<template>
  <div>
    <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',
          dropShadow: {
            enabled: true,
          }
        },
        plotOptions: {
          bar: {
            borderRadius: 5,
            dataLabels: {
              position: 'bottom'
            }
          }
        },
        colors: ['#004377'],
        xaxis: {
          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisBorder: {
            height: 3
          },
          axisTicks: {
            show: false
          }
        },
        yaxis: {
          labels: {
            formatter(value) {
              return value + ' ml'
            }
          }
        },
        grid: {
          show: false
        },
        dataLabels: {
          style: {
            colors: ['white'],
            fontFamily: 'Bungee'
          },
          dropShadow: {
            enabled: true,
          },
          formatter(value) {
            return value === 0 ? '' : value
          }
        },
        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 [{
        name: 'average',
        data: this.weekData.moments.map(moment => moment.average)
      }]
    }
  }
}
</script>

<style lang="scss">
#apexchartsweekxaveragesxchart {
  .apexcharts-xaxis-label,
  .apexcharts-yaxis-label {
    text-shadow: #555 1px 1px 5px;
  }

  .apexcharts-tooltip {
    color: #333;
  }

  .apexcharts-tooltip-text-y-value,
  .apexcharts-tooltip-text-goals-value,
  .apexcharts-tooltip-text-z-value {
    font-weight: unset;
  }
}
</style>