105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
<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>
|