Working now

src/ui/Highscore.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h3>Highscore</h3>
+    <ol>
+      <li v-for="person in highscore">
+        {{ person.name }} - {{ person.wins.length }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { highscore: [] };
+  },
+  async mounted() {
+    let _response = await fetch(
+      "http://localhost:30030/api/highscore/statistics"
+    );
+    let response = await _response.json();
+    this.highscore = response;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+div {
+  font-family: sans-serif;
+  width: 70vw;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+</style>

src/ui/PurchaseGraph.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <canvas ref="purchase-chart" width="100" height="50"></canvas>
+  </div>
+</template>
+
+<script>
+import Chartjs from "chart.js";
+
+export default {
+  async mounted() {
+    let canvas = this.$refs["purchase-chart"].getContext("2d");
+
+    console.log(canvas);
+    let _response = await fetch(
+      "http://localhost:30030/api/purchase/statistics"
+    );
+    let response = await _response.json();
+    let labels = [];
+    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: []
+    };
+
+    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, {
+      type: "line",
+      data: chartdata,
+      options: {
+        title: {
+          display: true,
+          text: "Antall kjøp"
+        },
+        scales: {
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+                suggestedMax: highestNumber + 5
+              }
+            }
+          ]
+        }
+      }
+    });
+  },
+  methods: {
+    getPrettierDateString(date) {
+      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/ui/TotalBought.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="bought-container">
+    <div class="red-container">
+      <div>
+        <span class="red">{{ red.total }}</span> kjøpt
+      </div>
+      <div>{{ red.win }} vinn</div>
+      <div>{{ redPercentage }}% vinn</div>
+    </div>
+    <div class="blue-container">
+      <div>
+        <span class="blue">{{ blue.total }}</span> kjøpt
+      </div>
+      <div>{{ blue.win }} vinn</div>
+      <div>{{ bluePercentage }}% vinn</div>
+    </div>
+    <div class="yellow-container">
+      <div>
+        <span class="yellow">{{ yellow.total }}</span> kjøpt
+      </div>
+      <div>{{ yellow.win }} vinn</div>
+      <div>{{ yellowPercentage }}% vinn</div>
+    </div>
+    <div class="green-container">
+      <div>
+        <span class="green">{{ green.total }}</span> kjøpt
+      </div>
+      <div>{{ green.win }} vinn</div>
+      <div>{{ greenPercentage }}% vinn</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      red: 0,
+      blue: 0,
+      yellow: 0,
+      green: 0,
+      total: 0,
+      totalWin: 0,
+      wins: 0,
+      redPercentage: 0,
+      yellowPercentage: 0,
+      greenPercentage: 0,
+      bluePercentage: 0
+    };
+  },
+  async mounted() {
+    let _response = await fetch(
+      "http://localhost:30030/api/purchase/statistics/color"
+    );
+    let response = await _response.json();
+    this.red = response.red;
+    this.blue = response.blue;
+    this.green = response.green;
+    this.yellow = response.yellow;
+    this.total = response.total;
+    this.totalWin =
+      this.red.win + this.yellow.win + this.blue.win + this.green.win;
+
+    this.redPercentage =
+      this.red.win == 0 ? 0 : (this.totalWin / this.red.win) * 100;
+    this.greenPercentage =
+      this.green.win == 0 ? 0 : (this.totalWin / this.green.win) * 100;
+    this.bluePercentage =
+      this.blue.win == 0 ? 0 : (this.totalWin / this.blue.win) * 100;
+    this.yellowPercentage =
+      this.yellow.win == 0 ? 0 : (this.totalWin / this.yellow.win) * 100;
+    console.log(response);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bought-container {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  justify-content: space-around;
+  font-family: sans-serif;
+}
+
+.green,
+.blue,
+.yellow,
+.red {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.green {
+  color: #0be881;
+}
+
+.red {
+  color: #ef5777;
+}
+
+.yellow {
+  color: #ffdd59;
+}
+
+.blue {
+  color: #4bcffa;
+}
+</style>

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>