Working now

src/ui/WinGraph.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <canvas ref="win-chart" width="100" height="50"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  async mounted() {
+    let canvas = this.$refs["win-chart"].getContext("2d");
+
+    console.log(canvas);
+    let _response = await fetch(
+      "http://localhost:30030/api/purchase/statistics/color"
+    );
+    let response = await _response.json();
+    let labels = ["Vunnet"];
+    let blue = {
+      label: "Blå",
+      borderColor: "#4bcffa",
+      backgroundColor: "#4bcffa42",
+      data: []
+    };
+    let yellow = {
+      label: "Gul",
+      borderColor: "#ffdd59",
+      backgroundColor: "#ffdd5942",
+      data: []
+    };
+    let red = {
+      label: "Rød",
+      borderColor: "#ef5777",
+      backgroundColor: "#ef577742",
+      data: []
+    };
+    let green = {
+      label: "Grønn",
+      borderColor: "#0be881",
+      backgroundColor: "#0be88142",
+      data: []
+    };
+
+    blue.data.push(response.blue.win);
+    yellow.data.push(response.yellow.win);
+    red.data.push(response.red.win);
+    green.data.push(response.green.win);
+    let highestNumber = 0;
+    if (response.blue.win > highestNumber) {
+      highestNumber = response.blue.win;
+    }
+    if (response.red.win > highestNumber) {
+      highestNumber = response.red.win;
+    }
+    if (response.green.win > highestNumber) {
+      highestNumber = response.green.win;
+    }
+    if (response.yellow.win > highestNumber) {
+      highestNumber = response.yellow.win;
+    }
+
+    let datasets = [blue, yellow, green, red];
+    let chartdata = {
+      labels: labels,
+      datasets: datasets
+    };
+    let chart = new Chart(canvas, {
+      type: "bar",
+      data: chartdata,
+      options: {
+        title: {
+          display: true,
+          text: "Antall vinn"
+        },
+        scales: {
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+                suggestedMax: highestNumber + 5
+              }
+            }
+          ]
+        }
+      }
+    });
+  }
+};
+</script>