eHealthAfrica/direct-delivery-dashboard

<div ng-show="utilityCtrl.isLoading" align="center">
  <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
<div class="row">
  <div ng-show="!utilityCtrl.isLoading && utilityCtrl.kpiAgg.total !== 0" class="col-sm-12"">
    <div class="btn btn-primary btn-lg clearfix">
      <h5 class="pull-left">Total Immunized </h5>
      <h3 class="pull-right">| {{utilityCtrl.kpiAgg.total}}</h3>
    </div>
    <div class="btn btn-info btn-lg clearfix">
      <h5 class="pull-left">Average Immunized </h5>
      <h3 class="pull-right">| {{utilityCtrl.kpiAgg.ave}}</h3>
    </div>
    <div class="btn btn-success btn-lg clearfix">
      <h5 class="pull-left">Highest Immunized <br/> ({{utilityCtrl.rounds[utilityCtrl.kpiValues[utilityCtrl.kpiValues.length -1][0]]}})</h5>
      <h3 class="pull-right">| {{utilityCtrl.kpiValues[utilityCtrl.kpiValues.length -1][1]}}</h3>
    </div>
    <div class="btn btn-danger btn-lg clearfix">
      <h5 class="pull-left">Lowest Immunized <br/> ({{utilityCtrl.rounds[utilityCtrl.kpiValues[0][0]]}})</h5>
      <h3 class="pull-right">| {{utilityCtrl.kpiValues[0][1]}}</h3>
    </div>
  </div>
</div>
<div class="btn-group pull-right">
  <div class="btn btn-default"><i class="fa fa-arrow-left"></i> Prev 5 rounds</div>
  <div class="btn btn-default"> Next 5 rounds <i class="fa fa-arrow-right"></i></div>
</div>
<p class="clearfix"></p>
<nvd3-line-chart
  data="utilityCtrl.chartData"
  id="exampleId"
  height="600"
  showXAxis="true"
  showYAxis="true"
  showLegend="true"
  tooltips="true"
  interactive="true"
  x="utilityCtrl.utilx()"
  y="utilityCtrl.utily()"
  xAxisTickFormat="utilityCtrl.xtick()"
  objectequality="true">
  <svg></svg>
</nvd3-line-chart>