This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/components/Chart.vue

57 lines
1.7 KiB
Vue
Raw Normal View History

2021-04-08 15:43:57 -07:00
<template>
<canvas></canvas>
</template>
<script>
import {sleep} from "../src/helpers";
2021-04-08 15:43:57 -07:00
export default {
props: {
label: { required: true },
2021-04-08 15:43:57 -07:00
data: { required: true },
cumulative: { type: Boolean },
2021-09-09 01:46:17 -07:00
type: {'default': 'line'},
2021-04-08 15:43:57 -07:00
},
2021-08-09 23:50:22 -07:00
async created() {
2021-04-08 15:43:57 -07:00
},
async mounted() {
if (!process.client) { return; }
await this.$loadScript('charts', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js');
this.drawChart();
2021-04-08 15:43:57 -07:00
},
methods: {
async drawChart() {
let tries = 0;
while (window.Chart === undefined) {
await sleep(100);
if (tries++ > 1000) {
return;
}
}
2021-04-08 15:43:57 -07:00
new Chart(this.$el.getContext('2d'), {
2021-09-09 01:46:17 -07:00
type: this.type,
2021-04-08 15:43:57 -07:00
data: {
labels: Object.keys(this.data),
datasets: [{
label: this.label,
2021-04-08 15:43:57 -07:00
data: this.cumulative ? this.accumulate(Object.values(this.data)) : Object.values(this.data),
fill: false,
borderColor: '#C71585',
}],
},
2021-04-08 15:43:57 -07:00
});
},
accumulate(values) {
const newValues = [];
let acc = 0;
for (let v of values) {
acc += v;
newValues.push(acc);
}
return newValues;
},
},
}
</script>