58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<canvas id="dailyParticipation" />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Chart, registerables } from "chart.js";
|
|
import { defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}");
|
|
const data = JSON.parse(json);
|
|
this.dates = data.dates;
|
|
this.count = data.count;
|
|
this.countUnique = data.countUnique;
|
|
console.log(this.dates, this.count, this.countUnique);
|
|
Chart.register(...registerables);
|
|
|
|
const ctx = (document.getElementById("dailyParticipation") as HTMLCanvasElement).getContext("2d");
|
|
new Chart(ctx as CanvasRenderingContext2D, {
|
|
type: "line",
|
|
data: {
|
|
labels: this.dates,
|
|
datasets: [
|
|
{
|
|
label: "Nombre de participation(s)",
|
|
data: this.count,
|
|
|
|
borderColor: [
|
|
"rgba(52, 146, 224, 1)",
|
|
],
|
|
borderWidth: 1
|
|
},
|
|
{
|
|
label: "Nombre de participation(s) unique(s)",
|
|
data: this.countUnique,
|
|
|
|
borderColor: [
|
|
"rgba(186, 0, 0, 1)",
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
}
|
|
});
|
|
},
|
|
data(): {
|
|
dates: any;
|
|
count: any;
|
|
countUnique: any;
|
|
} {
|
|
return {
|
|
dates: null,
|
|
count: null,
|
|
countUnique: null,
|
|
};
|
|
},
|
|
});
|
|
</script>
|