Add monthly values area chart

components/MonthlyAreaChart.vue

+<template>
+  <div class="pie-container">
+    <apexchart width="300" type="line" :series="series" :options="chartOptions"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartOptions: {
+        chart: {
+          id: 'month-averages-chart',
+          toolbar: false,
+          fontFamily: 'Bungee',
+          foreColor: 'white',
+          dropShadow: {
+            enabled: true,
+          }
+        },
+        stroke: {
+          curve: 'smooth'
+        },
+        fill: {
+          type: 'solid',
+          opacity: 1,
+        },
+        markers: {
+          size: 0
+        },
+        yaxis: [
+          {
+            labels: {
+              formatter(value) {
+                return value + ' ml'
+              }
+            }
+          },
+        ],
+        legend: {
+          show: false,
+        },
+        colors: ['#eef5ff', '#004377'],
+        tooltip: {
+          shared: true,
+          intersect: false,
+          y: {
+            formatter(y) {
+              if (typeof y !== 'undefined') {
+                return y.toFixed(0)
+              }
+              return y
+            }
+          }
+        },
+        xaxis: {
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false
+          }
+        },
+        grid: {
+          show: true,
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        noData: 'Loading...'
+      },
+      monthData: {},
+      goalArray: [],
+      goalLine: {},
+      bestDay: 1,
+      bestDayString: '',
+    }
+  },
+  async fetch() {
+    const monthDataResponse = await this.$axios.get('/api/consumption/average-graph' +
+      '?precision=month')
+    this.monthData = monthDataResponse.data
+    for (let i = 0; i < this.monthData.moments.length; i++) {
+      this.goalArray[i] = this.goal
+    }
+    this.goalLine = this.goalArray
+    let max = 0
+
+    for (let i = 0; i < (this.monthData.moments.map(moment => moment.average)).length; i++) {
+      if ((this.monthData.moments.map(moment => moment.average)[i]) > max) {
+        max = this.monthData.moments.map(moment => moment.average)[i]
+        this.bestDay = i + 1
+      }
+    }
+    if (this.bestDay === 1 || this.bestDay === 21 || this.bestDay === 31) {
+      this.bestDayString = this.bestDay + 'st'
+    } else if (this.bestDay === 2 || this.bestDay === 22) {
+      this.bestDayString = this.bestDay + 'nd'
+    } else if (this.bestDay === 3 || this.bestDay === 23) {
+      this.bestDayString = this.bestDay + 'rd'
+    } else {
+      this.bestDayString = this.bestDay + 'th'
+    }
+    this.$store.commit('setBestMonthDay', this.bestDayString)
+  },
+  computed: {
+    series() {
+      if (!Object.prototype.hasOwnProperty.call(this.monthData, 'moments')) {
+        return undefined
+      }
+      return [{
+        name: 'daily',
+        type: 'area',
+        zIndex: 10,
+        data: this.monthData.moments.map(moment => moment.average)
+      }, {
+        name: 'goal',
+        type: 'line',
+        data: this.goalLine
+      }
+      ]
+    },
+    goal() {
+      return this.$store.getters.goal
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#apexchartsmonthxaveragesxchart {
+  margin-top:1em;
+  .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>