special-dispatch-app/app/components/dashboard-page.js

const app = require('../app')

app.component('appDashboardPage', {
  template: html`
    <app-user-area title-text="Dashboard">
      <div flex layout="row">
        <md-card flex ng-repeat="serviceCategory in $ctrl.statistics.serviceCategories">
          <md-card-content>
            <h2>{{::$ctrl.serviceCategories[serviceCategory.serviceCategory].name}}</h2>
            <div ng-repeat="terminal in serviceCategory.terminals">
              <h3>{{::$ctrl.terminals[terminal.terminal].name}}</h3>
              <table md-table>
                <tbody>
                  <tr ng-repeat="laborCategory in terminal.laborCategories">
                    <th align="left">{{::$ctrl.laborCategories[laborCategory.laborCategory].name}}</th>
                    <td align="right">{{laborCategory.costPerCarton | currency}}</td>
                  </tr>
                  <tr ng-if="terminal.laborCategories.length > 1">
                    <th align="left">All</th>
                    <td align="right">{{terminal.costPerCarton | currency}}</td>
                  </tr>
                </tbody>
              </table>
              <hr />
            </div>
            <div ng-if="serviceCategory.terminals.length > 1">
              <h3>Overall</h3>
              <table md-table>
                <tbody>
                  <tr ng-repeat="laborCategory in serviceCategory.laborCategories">
                    <th align="left">{{::$ctrl.laborCategories[laborCategory.laborCategory].name}}</th>
                    <td align="right">{{laborCategory.costPerCarton | currency}}</td>
                  </tr>
                  <tr ng-if="serviceCategory.laborCategories.length > 1">
                    <th align="left">All</th>
                    <td align="right">{{serviceCategory.costPerCarton | currency}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </md-card-content>
        </md-card>
      </div>
      <div flex layout="column" layout-gt-sm="row">
        <md-card flex="50" class="mg-margin md-padding">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Labor Costs</span>
              <span class="md-subhead"></span>
            </md-card-title-text>
          </md-card-title>
          <md-card-content>
            <div style="width: 520px; height: 260px;" >
              <canvas class="chart chart-line" chart-data="$ctrl.charts.laborCost.data" chart-colors="$ctrl.charts.laborCost.colors"
                chart-labels="$ctrl.charts.laborCost.labels" chart-series="$ctrl.charts.laborCost.series" chart-options="$ctrl.charts.laborCost.options">
              </canvas>
            </div>
            <div ng-repeat="color in $ctrl.charts.laborCost.colors">
              <div style="background-color: {{color}}; width: 16px; height: 16px; display: inline-block; margin: 0 4px;"></div>
              {{$ctrl.charts.laborCost.series[$index]}}
            </div>
          </md-card-content>
        </md-card>
        <md-card flex="50" class="mg-margin md-padding">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Efficiency</span>
              <span class="md-subhead"></span>
            </md-card-title-text>
          </md-card-title>
          <md-card-content>
            <div style="width: 520px; height: 260px;" >
              <canvas class="chart chart-line" chart-data="$ctrl.charts.efficiency.data" chart-colors="$ctrl.charts.efficiency.colors"
                chart-labels="$ctrl.charts.efficiency.labels" chart-series="$ctrl.charts.efficiency.series" chart-options="$ctrl.charts.efficiency.options">
              </canvas>
            </div>
            <div ng-repeat="color in $ctrl.charts.efficiency.colors">
              <div style="background-color: {{color}}; width: 16px; height: 16px; display: inline-block; margin: 0 4px;"></div>
              {{$ctrl.charts.efficiency.series[$index]}}
            </div>
          </md-card-content>
        </md-card>
      </div>
    </app-user-area>
  `,
  controller: function(api, statistics) {
    api.statistics().then(stats => {
      this.statistics = stats
      this.charts = statistics.charts(stats.metricsOverTime)
    })
    api.terminals().then(terminals => {
      this.terminals = terminals
    })
    api.laborCategories().then(laborCategories => {
      this.laborCategories = laborCategories
    })
    api.serviceCategories().then(serviceCategories => {
      this.serviceCategories = serviceCategories
    })

  //   statistics.efficiency().then(statistics => {
  //     Object.assign(this, statistics)
  //   })
  }
})