FoodLoop-Web/src/app/dashboard/dashboard-customer.component.html

<div class="animated fadeIn">
  <snippet-bar-cust></snippet-bar-cust>
  <div class="row">
    <div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
      <widget-graph *ngIf="widget.type == 'graph'"
                    [graphName]="widget.name"
                    [graphTitle]="widget.title"
                    [graphIcon]="widget.icon"
                    [dataType]="widget.dataType">
      </widget-graph>
    </div><!--/.col-->
  </div><!--/.row-->
  <!-- http://www.chartjs.org/docs/latest/charts/polar.html?h=polar -->
  <div class=row>
    <div class="col-md-4">
      <panel-pie></panel-pie>
    </div><!--/.col-->
    <div class="col-md-4">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title float-left mb-0">Purchases Per Week</h4>
            </div><!--/.col-->
          </div><!--/.row-->
          <div class="chart-wrapper">
            <ul class="horizontal-bars type-2">
              <li>
                <span class="title">This Week</span>
                <span class="value">191,235 <span class="text-muted small">(56%)</span></span>
                <div class="bars">
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
              <li>
                <span class="title">Last Week</span>
                <span class="value">51,223 <span class="text-muted small">(15%)</span></span>
                <div class="bars">
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
              <li>
                <span class="title">2 Weeks Ago</span>
                <span class="value">37,564 <span class="text-muted small">(11%)</span></span>
                <div class="bars">
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
              <li>
                <span class="title">3 Weeks Ago</span>
                <span class="value">27,319 <span class="text-muted small">(8%)</span></span>
                <div class="bars">
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-md-4">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title float-left mb-0">Sector Purchase Amounts</h4>
            </div><!--/.col-->
          </div><!--/.row-->
          <div class="chart-wrapper">
            <ul class="icons-list">
              <li>
                <i class="icon-screen-desktop bg-primary"></i>
                <div class="desc">
                  <div class="title">Sector A</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>1.924</strong>
                </div>
              </li>
              <li>
                <i class="icon-screen-smartphone bg-info"></i>
                <div class="desc">
                  <div class="title">Sector B</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>1.224</strong>
                </div>
              </li>
              <li>
                <i class="icon-screen-smartphone bg-warning"></i>
                <div class="desc">
                  <div class="title">Sector C</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>1.163</strong>
                </div>
              </li>
              <li>
                <i class="icon-user bg-danger"></i>
                <div class="desc">
                  <div class="title">Sector D</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>928</strong>
                </div>
              </li>
              <li>
                <i class="icon-social-spotify bg-success"></i>
                <div class="desc">
                  <div class="title">Sector E</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>893</strong>
                </div>
              </li>
              <li>
                <i class="icon-cloud-download bg-danger"></i>
                <div class="desc">
                  <div class="title">Sector F</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>121.924</strong>
                </div>
              </li>
              <li>
                <i class="icon-camera bg-warning"></i>
                <div class="desc">
                  <div class="title">Sector G</div>
                  <small>Lorem ipsum dolor sit amet</small>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought this week</div>
                  <strong>12.125</strong>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
</div>