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-->
  <div class=row>
    <div class="col-xl-6">
      <panel-pie></panel-pie>
    </div><!--/.col-->
    <div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title mb-0">Weekly Spending by Category</h4>
            </div>
          </div>
          <div class="chart-wrapper">
            <canvas baseChart class="chart"
            [datasets]="doughnutChartDataCategory"
            [labels]="doughnutChartLabelsCategory"
            [options]="doughnutChartOptionsCategory"
            [legend]="chartLegend"
            [chartType]="chartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div *ngIf="showEssentialBarChart" class="col-xl-6">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title mb-0">No. of Essential Purchases</h4>
            </div>
          </div>
          <div class="chart-wrapper">
            <canvas baseChart class="chart"
            [datasets]="barChartDataEssential"
            [labels]="barChartLabelsEssential"
            [options]="barChartOptionsEssential"
            [chartType]="barChartTypeEssential"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div *ngIf="showCategoryBarChart" class="col-xl-6">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title mb-0">Monthly Spending by Category</h4>
            </div>
          </div>
          <div class="chart-wrapper">
            <canvas baseChart
            [datasets]="barChartDataCategory"
            [labels]="barChartLabelsCategory"
            [options]="barChartOptionsCategory"
            [legend]="barChartLegendCategory"
            [chartType]="barChartTypeCategory"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-xl-6">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title float-left mb-0">Weekly Purchase No.</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">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
                <div class="bars">
                  <div class="progress" style="height: 6px;">
                    <div class="progress-bar bg-success" role="progressbar"
                    [style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
              <li>
                <span class="title">Last Week</span>
                <span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
                  ({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
                <div class="bars">
                  <div class="progress" style="height: 6px;">
                    <div class="progress-bar bg-success" role="progressbar"
                    [style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
              <li>
                <span class="title">Week Maximum</span>
                <span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
                  (100%)</span></span>
                <div class="bars">
                  <div class="progress" style="height: 6px;">
                    <div class="progress-bar bg-success" role="progressbar"
                    style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
              <li>
                <span class="title">Weekly Average</span>
                <span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0  | number:'1.0-0'}} <span class="text-muted small">
                  ({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
                <div class="bars">
                  <div class="progress" style="height: 6px;">
                    <div class="progress-bar bg-success" role="progressbar"
                    [style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-xl-6">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title float-left mb-0">All Purchases by Category</h4>
            </div><!--/.col-->
          </div><!--/.row-->
          <div class="chart-wrapper">
            <ul class="icons-list">
              <!-- New loop  -->
              <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
                <i [ngClass]="[sectorIcons [category.name] || 'icon-question', sectorClasses [category.name] || 'bg-info']"></i>
                <div class="desc">
                  <div class="title">{{ category.category || 'N/A' }}</div>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought</div>
                  <strong>{{ category.value || 'N/A' }}</strong>
                </div>
              </li>
              <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
                <button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-xl-6">
      <div class="card">
        <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title float-left mb-0">All Purchases by Sector</h4>
            </div><!--/.col-->
          </div><!--/.row-->
          <div class="chart-wrapper">
            <ul class="icons-list">
              <!-- New loop  -->
              <li *ngFor="let sector of sectorLetters | slice:0:sectorLimit; let i=index">
                <i [ngClass]="[sectorIcons [sector] || 'icon-question', sectorClasses [sector] || 'bg-info']"></i>
                <div class="desc">
                  <div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
                </div>
                <div class="value">
                  <div class="small text-muted">Bought</div>
                  <strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
                </div>
              </li>
              <li *ngIf="sectorLetters.length > sectorLimit && disableSectorButton == false" class="divider text-center">
                <button type="button" class="btn btn-sm btn-link text-muted" (click)="sectorLoadMore()"><i class="icon-options"></i></button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
</div>