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

<div class="animated fadeIn">
  <div class="card">
    <div class="card-footer">
      <ul>
        <li class="hidden-sm-down">
          <div class="text-muted">Customers This Month</div>
          <strong>{{customersThisMonth}}</strong>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">Money Spent This Month</div>
          <strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">Points Total</div>
          <strong>{{pointsTotal}}</strong>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">Average Transaction Today</div>
          <strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
        </li>
      </ul>
    </div>
  </div>
  <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="card">
    <div class="card-block">
      <div class="row">
        <div class="col-sm-5">
          <h4 class="card-title mb-0">Customers</h4>
          <div class="small text-muted">November 2015</div>
        </div><!--/.col-->
        <div class="col-sm-7 hidden-sm-down">
          <button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
          <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
              <label class="btn btn-outline-secondary">
                <input type="radio" name="options" id="option1"> Day
              </label>
              <label class="btn btn-outline-secondary active">
                <input type="radio" name="options" id="option2" checked> Month
              </label>
              <label class="btn btn-outline-secondary">
                <input type="radio" name="options" id="option3"> Year
              </label>
            </div>
          </div>
        </div><!--/.col-->
      </div><!--/.row-->
      <div class="chart-wrapper" style="height:300px;margin-top:40px;">
        <canvas baseChart class="chart"
        [datasets]="mainChartData"
        [labels]="mainChartLabels"
        [options]="mainChartOptions"
        [colors]="mainChartColours"
        [legend]="mainChartLegend"
        [chartType]="mainChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
      </div>
    </div>
    <div class="card-footer">
      <ul>
        <li class="hidden-sm-down">
          <div class="text-muted">Customers</div>
          <strong>24.093 Users (20%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </li>
        <li>
          <div class="text-muted">Pageviews</div>
          <strong>78.706 Views (60%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">New Users</div>
          <strong>22.123 Users (80%)</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">Bounce Rate</div>
          <strong>40.15%</strong>
          <div class="progress progress-xs mt-2">
            <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>