<template>
  <div>
    hi
    <apexchart width="400" type="bar" :series="series" :options="chartOptions"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        chart: {
          id: 'week-averages-chart',
          toolbar: false,
          fontFamily: 'Bungee',
          foreColor: 'white'
        },
        colors: ['#004377'],
        xaxis: {
          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        grid: {
          show: false
        },
        dataLabels: {
          style: {
            colors: ['white'],
            fontFamily: 'Bungee'
          }
        },
        noData: 'Loading...'
      },
      weekData: {},
    }
  },
  async fetch() {
    const weekDataResponse = await this.$axios.get('/api/consumption/average-graph' +
      '?precision=week')
    this.weekData = weekDataResponse.data
  },
  computed: {
    series() {
      if (!Object.prototype.hasOwnProperty.call(this.weekData, 'moments')) {
        return undefined
      }
      return [{
        data: this.weekData.moments.map(moment => moment.average)
      }]
    }
  }
}
</script>

<style scoped>

</style>