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

const app = require('../app')
const moment = require('moment-immutable')
const _ = require('lodash')
const { previousWeekIcon, previousDayIcon, nextDayIcon, nextWeekIcon } = require('../assets')

app.component('appDashboardPage', {
  template: html`
    <app-user-area title-text="Dashboard">

      <div>
        <md-button
          class="md-fab"
          ng-click="$ctrl.setOffset($ctrl.offset - 7)">
          <md-icon md-svg-src="${previousWeekIcon}"></md-icon>
        </md-button>
        <md-button
          class="md-fab"
          ng-click="$ctrl.setOffset($ctrl.offset - 1)">
          <md-icon md-svg-src="${previousDayIcon}"></md-icon>
        </md-button>
        <md-button
          style="min-width: auto; width: 3em;"
          class="md-raised md-mini"
          ng-repeat="workday in $ctrl.workdays track by workday.formatted"
          ng-class="{
            'md-primary': workday.date.valueOf() == $ctrl.date.valueOf()
          }"
          ng-disabled="!workday.hasData"
          ng-click="$ctrl.setDate(workday.date)"
          >
          {{workday.short}}
        </md-button>
        <md-button
          class="md-fab"
          ng-click="$ctrl.setOffset($ctrl.offset + 1)">
          <md-icon md-svg-src="${nextDayIcon}"></md-icon>
        </md-button>
        <md-button
          class="md-fab"
          ng-click="$ctrl.setOffset($ctrl.offset + 7)">
          <md-icon md-svg-src="${nextWeekIcon}"></md-icon>
        </md-button>
      </div>
      <h2>{{$ctrl.date.format('LL')}}</h2>
      <div flex layout="row" ng-show="$ctrl.statistics">
        <md-card flex ng-repeat="serviceCategory in $ctrl.statistics.serviceCategories">
          <md-card-content>
            <h2>{{::$ctrl.serviceCategories[serviceCategory.serviceCategory].name}}</h2>
            <div flex layout="row">
              <md-card flex="30" md-whiteframe="15">
                <md-card-title><md-card-title-text style="text-align: center">
                  Cartons
                </md-card-title-text></md-card-title>
                <md-card-content>
                  <h1 style="text-align: center">{{serviceCategory.lastMetrics[serviceCategory.serviceColumn]}}</h1>
                </md-card-content>
              </md-card>
              <md-card flex="30" md-whiteframe="15">
                <md-card-title><md-card-title-text style="text-align: center">
                  Labor Cost
                </md-card-title-text></md-card-title>
                <md-card-content>
                  <h1 ng-if="serviceCategory.lastMetrics.laborCost" style="text-align: center">$\{{Math.floor(serviceCategory.lastMetrics.laborCost) || null}}</h1>
                </md-card-content>
              </md-card>
              <md-card flex="30" md-whiteframe="15">
                <md-card-title><md-card-title-text style="text-align: center">
                  Cost per Carton
                </md-card-title-text></md-card-title>
                <md-card-content>
                  <h1 style="text-align: center">{{serviceCategory.lastMetrics.costPer | currency}}</h1>
                </md-card-content>
              </md-card>
            </div>            
            <div ng-repeat="terminal in serviceCategory.terminals">
              <table md-table>
                <thead>
                  <th align="left">
                    <h4>{{::$ctrl.terminals[terminal.terminal].name}}</h4>
                  </th>
                  <th align="right">
                    <span ng-if="$index == 0">Cost per Carton</span>
                  </th>
                </thead>
                <tbody>
                  <tr ng-repeat="laborCategory in terminal.laborCategories">
                    <th align="left">{{::$ctrl.laborCategories[laborCategory.laborCategory].name}}</th>
                    <td align="right">{{laborCategory.costPer | currency}}</td>
                  </tr>
                  <tr ng-if="terminal.laborCategories.length > 1">
                    <th align="left">All</th>
                    <td align="right">{{terminal.costPer | currency}}</td>
                  </tr>
                </tbody>
              </table>
              <hr />
            </div>
            <div ng-if="serviceCategory.terminals.length > 1">
              <table md-table>
                <thead>
                  <th align="left">
                    <h4>Overall</h4>
                  </th>
                  <th align="right"></th>
                </thead>
                <tbody>
                  <tr ng-repeat="laborCategory in serviceCategory.laborCategories">
                    <th align="left">{{::$ctrl.laborCategories[laborCategory.laborCategory].name}}</th>
                    <td align="right">{{laborCategory.costPer | currency}}</td>
                  </tr>
                  <tr ng-if="serviceCategory.laborCategories.length > 1">
                    <th align="left">All</th>
                    <td align="right">{{serviceCategory.costPer | currency}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </md-card-content>
        </md-card>
      </div>
      <div flex layout="column" ng-show="$ctrl.charts" 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">Cost per Carton</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.costPerCarton.data" chart-colors="$ctrl.charts.costPerCarton.colors"
                chart-labels="$ctrl.charts.costPerCarton.labels" chart-series="$ctrl.charts.costPerCarton.series" chart-options="$ctrl.charts.costPerCarton.options">
              </canvas>
            </div>
            <div ng-repeat="color in $ctrl.charts.costPerCarton.colors">
              <div style="background-color: {{color}}; width: 16px; height: 16px; display: inline-block; margin: 0 4px;"></div>
              {{$ctrl.charts.costPerCarton.series[$index]}}
            </div>
          </md-card-content>
        </md-card>
      </div>
    </app-user-area>
  `,
  controller: function(api, statistics, $scope) {
    $scope.Math = Math
    const load = (date) => {
      api.statistics(date).then(stats => {
        this.statistics = stats
        this.charts = statistics.charts(stats.metricsOverTime)
        this.last = stats.last
      })
    }
    api.terminals().then(terminals => {
      this.terminals = terminals
    })
    api.laborCategories().then(laborCategories => {
      this.laborCategories = laborCategories
    })
    api.serviceCategories().then(serviceCategories => {
      this.serviceCategories = serviceCategories
    })
    api.get(`/api/workdays`).then(workdays => {
      const wds = {}
      workdays.dates.forEach(x => (wds[x] = true))
      const getWorkdays = (offset) => {
        const dates = _.range(offset - 6, offset + 1)
          .map(x => {
            const date = moment().startOf('day').add(x, 'days')
            return {
              date,
              formatted: date.format('L'),
              short: date.format('M/DD'),
              hasData: wds[date.format('YYYY-MM-DD')]
            }
          })
        return dates
      }

      this.setOffset = (offset) => {
        this.offset = offset
        this.workdays = getWorkdays(offset)
      }

      this.setDate = (date) => {
        this.date = date
        this.now = moment()
        load(date)
      }


      this.setOffset(0)
      this.setDate(moment(
        workdays.dates
          .map(x => moment(x).valueOf())
          .sort()
          .pop() || moment.now()
      ))
    })

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

window.moment = moment