From 7234c2fbba95f4d857cc1e43398642bf801adcb2 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 18 Feb 2021 23:11:48 +0100
Subject: [PATCH] Backend endpoint makes it easier consume for graph.

New endpoint has the data aggregated so we don't need to do as much in
js.
Also added simple year select when we have data spanning multiple years.
---
 frontend/ui/PurchaseGraph.vue | 189 ++++++++++++++++++++--------------
 1 file changed, 113 insertions(+), 76 deletions(-)

diff --git a/frontend/ui/PurchaseGraph.vue b/frontend/ui/PurchaseGraph.vue
index af9dcd7..c43ae71 100644
--- a/frontend/ui/PurchaseGraph.vue
+++ b/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>