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

app.component('appDashboardPage', {
  template: html`
    <app-user-area title-text="Dashboard">
      <md-grid-list
        md-cols="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="6"
        md-row-height-gt-md="1:1" md-row-height="4:3"
        md-gutter="8px" md-gutter-gt-sm="4px">

        <md-grid-tile
          md-rowspan="2"
          md-colspan="3"
          md-colspan-sm="2"
          md-rowspan-sm="1"
          md-colspan-xs="1"
          md-colspan-xs="1"
          ng-class="tile.background">
          <canvas id="line" class="chart chart-line" chart-data="dashboard.efficiency.data"
            chart-labels="dashboard.efficiency.labels" chart-series="dashboard.efficiency.series" chart-options="dashboard.efficiency.options">
          </canvas>
          <md-grid-tile-footer><h3>Efficiency</h3></md-grid-tile-footer>
        </md-grid-tile>

        <md-grid-tile
          md-rowspan="2"
          md-colspan="3"
          md-colspan-sm="2"
          md-rowspan-sm="1"
          md-colspan-xs="1"
          md-colspan-xs="1"
          ng-class="tile.background">
          <canvas id="line" class="chart chart-line" chart-data="dashboard.delivery.data"
            chart-labels="dashboard.delivery.labels" chart-series="dashboard.delivery.series" chart-options="dashboard.delivery.options">
          </canvas>
          <md-grid-tile-footer><h3>Delivery</h3></md-grid-tile-footer>
        </md-grid-tile>

        <md-grid-tile
          md-rowspan="2"
          md-colspan="3"
          md-colspan-sm="2"
          md-rowspan-sm="1"
          md-colspan-xs="1"
          md-colspan-xs="1"
          ng-class="tile.background">
          <canvas id="line" class="chart chart-line" chart-data="dashboard.laborCost.data"
            chart-labels="dashboard.laborCost.labels" chart-series="dashboard.laborCost.series" chart-options="dashboard.laborCost.options">
          </canvas>
          <md-grid-tile-footer><h3>Labor Cost</h3></md-grid-tile-footer>
        </md-grid-tile>

      </md-grid-list>
    </app-user-area>
  `,
  controllerAs: 'dashboard',
  controller: function(statistics) {
    statistics.efficiency().then(statistics => {
      Object.assign(this, statistics)
    })
  }
})