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

<div class="animated fadeIn">
  <snippet-bar-org></snippet-bar-org>
  <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-->
  <panel-graph></panel-graph>
  <div class="card">
    <div class="card-block">
      <div class="row">
        <div class="col-12">
          <h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
        </div><!--/.col-->
      </div><!--/.row-->
      <div class="chart-wrapper">
        <canvas baseChart class="chart"
        [datasets]="lineChartDataSector"
        [labels]="lineChartLabelsSector"
        [options]="lineChartOptionsSector"
        [legend]="lineChartLegendSector"
        [chartType]="lineChartTypeSector"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
      </div>
    </div>
</div>
<div class=row>
  <div 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 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>
    <div class="col-xl-6">
      <org-pie-panel></org-pie-panel>
    </div>
</div>