diff options
Diffstat (limited to 'fe/src/lib/Chart.svelte')
-rw-r--r-- | fe/src/lib/Chart.svelte | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/fe/src/lib/Chart.svelte b/fe/src/lib/Chart.svelte new file mode 100644 index 0000000..b19d932 --- /dev/null +++ b/fe/src/lib/Chart.svelte | |||
@@ -0,0 +1,63 @@ | |||
1 | <script lang="ts"> | ||
2 | import { onDestroy } from "svelte"; | ||
3 | import ChartJS from "chart.js/auto"; | ||
4 | |||
5 | export let data; | ||
6 | export let labels; | ||
7 | export let type = 'bar'; | ||
8 | |||
9 | let ref: HTMLCanvasElement; | ||
10 | let chart | ||
11 | |||
12 | function setupChart(result) { | ||
13 | [labels, data] = result; | ||
14 | chart = new ChartJS(ref, { | ||
15 | type, | ||
16 | data: { | ||
17 | labels, | ||
18 | datasets: [ | ||
19 | { | ||
20 | label: "Totals", | ||
21 | data, | ||
22 | backgroundColor: "rgba(255, 192, 192, 0.2)" | ||
23 | } | ||
24 | ] | ||
25 | }, | ||
26 | options: { | ||
27 | responsive: true, | ||
28 | maintainAspectRatio: false, | ||
29 | scales: { | ||
30 | y: { | ||
31 | suggestedMax: 30, | ||
32 | beginAtZero: true, | ||
33 | ticks: { | ||
34 | autoSkip: true, | ||
35 | stepSize: 5 | ||
36 | } | ||
37 | } | ||
38 | }, | ||
39 | plugins: { | ||
40 | legend: { | ||
41 | display: false | ||
42 | }, | ||
43 | title: { | ||
44 | display: true, | ||
45 | text: "Weekly Breakdown" | ||
46 | }, | ||
47 | subtitle: { | ||
48 | display: true, | ||
49 | text: "Water consumption over the last week", | ||
50 | padding: {bottom: 10} | ||
51 | } | ||
52 | } | ||
53 | } | ||
54 | }); | ||
55 | |||
56 | onDestroy(() => { | ||
57 | if (chart) chart.destroy(); | ||
58 | chart = null; | ||
59 | }) | ||
60 | } | ||
61 | </script> | ||
62 | |||
63 | <canvas bind:this={ref} /> \ No newline at end of file | ||