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

<div class="animated fadeIn">
  <div class="card">
    <div class="card-footer">
      <ul>
        <li class="hidden-sm-down">
          <div class="text-muted">My Points</div>
          <strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">My Rank</div>
            <div *ngIf="basicStats.user_position == 0" class="statuscontent">
              <strong>Unranked</strong>
            </div>
    				<div *ngIf="basicStats.user_position != 0" class="statuscontent">
    					<strong>{{ basicStats.user_position }}</strong>
    				</div>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">My Total Spend</div>
          <strong>{{ basicStats.user_sum | currency:'GBP':true:'1.2-2' }}</strong>
        </li>
        <li class="hidden-sm-down">
          <div class="text-muted">Value to Local Economy</div>
          <strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':true:'1.2-2' }}</strong>
          <div class="progress progress-xs mt-2">
              <div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </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"></widget-graph>
    </div>
  </div><!--/.row-->
</div>