frontend/ui/PurchaseGraph.vue

@@ -2,89 +2,47 @@
   <div class="chart">
     <canvas ref="purchase-chart" width="100" height="50"></canvas>
     <div ref="chartjsLegend" class="chartjsLegend"></div>
+    <div class="year-select" v-if="years.length">
+      <button
+        class="vin-button small"
+        v-for="year in years"
+        :class="{ active: yearSelected == year }"
+        @click="yearFilterClicked(year)"
+      >
+        {{ year }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script>
 import Chartjs from "chart.js";
-import { chartPurchaseByColor } from "@/api";
 
 export default {
+  data() {
+    return {
+      lotteries: [],
+      years: [],
+      yearSelected: undefined,
+      chart: undefined
+    };
+  },
   async mounted() {
     let canvas = this.$refs["purchase-chart"].getContext("2d");
 
-    let response = await chartPurchaseByColor();
-    let labels = [];
-    let blue = {
-      label: "Blå",
-      borderColor: "#57d2fb",
-      backgroundColor: "#d4f2fe",
-      borderWidth: 2,
-      data: []
-    };
-    let yellow = {
-      label: "Gul",
-      borderColor: "#ffde5d",
-      backgroundColor: "#fff6d6",
-      borderWidth: 2,
-      data: []
-    };
-    let red = {
-      label: "Rød",
-      borderColor: "#ef5878",
-      backgroundColor: "#fbd7de",
-      borderWidth: 2,
-      data: []
-    };
-    let green = {
-      label: "Grønn",
-      borderColor: "#10e783",
-      backgroundColor: "#c8f9df",
-      borderWidth: 2,
-      data: []
+    this.lotteries = await this.chartPurchaseByColor();
+    if (this.lotteries?.length) this.years = [...new Set(this.lotteries.map(lot => lot.date.slice(0, 4)))];
+
+    const dataset = this.calculateChartDatapoints();
+
+    let chartData = {
+      labels: dataset.labels,
+      datasets: [dataset.blue, dataset.green, dataset.red, dataset.yellow]
     };
 
-    if (response.length == 1) {
-      labels.push("");
-      blue.data.push(0);
-      yellow.data.push(0);
-      red.data.push(0);
-      green.data.push(0);
-    }
-
-    let highestNumber = 0;
-
-    for (let i = 0; i < response.length; i++) {
-      let thisDate = response[i];
-      let dateObject = new Date(thisDate.date);
-      labels.push(this.getPrettierDateString(dateObject));
-
-      blue.data.push(thisDate.blue);
-      yellow.data.push(thisDate.yellow);
-      red.data.push(thisDate.red);
-      green.data.push(thisDate.green);
-
-      if (thisDate.blue > highestNumber) {
-        highestNumber = thisDate.blue;
-      }
-      if (thisDate.yellow > highestNumber) {
-        highestNumber = thisDate.yellow;
-      }
-      if (thisDate.green > highestNumber) {
-        highestNumber = thisDate.green;
-      }
-      if (thisDate.red > highestNumber) {
-        highestNumber = thisDate.red;
-      }
-    }
-    let datasets = [blue, yellow, green, red];
-    let chartdata = {
-      labels: labels,
-      datasets: datasets
-    };
-    let chart = new Chart(canvas, {
+    this.chart = new Chart(canvas, {
       type: "line",
-      data: chartdata,
+      data: chartData,
       options: {
         maintainAspectRatio: false,
         animation: {
@@ -110,8 +68,7 @@ export default {
           yAxes: [
             {
               ticks: {
-                beginAtZero: true,
-                suggestedMax: highestNumber + 5
+                beginAtZero: true
               }
             }
           ]
@@ -120,10 +77,82 @@ export default {
     });
   },
   methods: {
+    async yearFilterClicked(year) {
+      this.yearSelected = this.yearSelected === year ? null : year;
+
+      this.lotteries = await this.chartPurchaseByColor();
+      const dataset = this.calculateChartDatapoints();
+      let chartData = {
+        labels: dataset.labels,
+        datasets: [dataset.blue, dataset.green, dataset.red, dataset.yellow]
+      };
+
+      this.chart.data = chartData;
+      this.chart.update();
+    },
+    setupDataset() {
+      let blue = {
+        label: "Blå",
+        borderColor: "#57d2fb",
+        backgroundColor: "#d4f2fe",
+        borderWidth: 2,
+        data: []
+      };
+      let yellow = {
+        label: "Gul",
+        borderColor: "#ffde5d",
+        backgroundColor: "#fff6d6",
+        borderWidth: 2,
+        data: []
+      };
+      let red = {
+        label: "Rød",
+        borderColor: "#ef5878",
+        backgroundColor: "#fbd7de",
+        borderWidth: 2,
+        data: []
+      };
+      let green = {
+        label: "Grønn",
+        borderColor: "#10e783",
+        backgroundColor: "#c8f9df",
+        borderWidth: 2,
+        data: []
+      };
+
+      return {
+        labels: [""],
+        blue,
+        green,
+        red,
+        yellow
+      };
+    },
+    calculateChartDatapoints() {
+      let dataset = this.setupDataset();
+
+      this.lotteries.map(lottery => {
+        const date = new Date(lottery.date);
+        dataset.labels.push(this.getPrettierDateString(date));
+
+        dataset.blue.data.push(lottery.blue);
+        dataset.green.data.push(lottery.green);
+        dataset.red.data.push(lottery.red);
+        dataset.yellow.data.push(lottery.yellow);
+      });
+
+      return dataset;
+    },
+    chartPurchaseByColor() {
+      const url = new URL("/api/lotteries", window.location);
+      if (this.yearSelected != null) url.searchParams.set("year", this.yearSelected);
+
+      return fetch(url.href)
+        .then(resp => resp.json())
+        .then(response => response.lotteries);
+    },
     getPrettierDateString(date) {
-      return `${this.pad(date.getDate())}.${this.pad(
-        date.getMonth() + 1
-      )}.${this.pad(date.getYear() - 100)}`;
+      return `${this.pad(date.getDate())}.${this.pad(date.getMonth() + 1)}.${this.pad(date.getYear() - 100)}`;
     },
     pad(num) {
       if (num < 10) {
@@ -136,11 +165,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
+@import "@/styles/media-queries.scss";
 
 .chart {
   height: 40vh;
   max-height: 500px;
   width: 100%;
 }
+
+.year-select {
+  margin-top: 1rem;
+
+  button:not(:first-of-type) {
+    margin-left: 0.5rem;
+  }
+}
 </style>