diff options
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r-- | fe/src/lib/DataView.svelte | 27 |
1 files changed, 26 insertions, 1 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index 1458c9a..00ee21a 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -1,12 +1,16 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import { onMount } from "svelte"; | 2 | import { onDestroy, onMount } from "svelte"; |
3 | import type { Statistic } from "../types"; | 3 | import type { Statistic } from "../types"; |
4 | import { token, user } from "../stores/auth"; | 4 | import { token, user } from "../stores/auth"; |
5 | import Table from "./Table.svelte"; | 5 | import Table from "./Table.svelte"; |
6 | import Chart from 'chart.js/auto'; | ||
6 | 7 | ||
7 | let json: Promise<any>; | 8 | let json: Promise<any>; |
8 | let showAddForm: boolean = false; | 9 | let showAddForm: boolean = false; |
9 | 10 | ||
11 | let canvasRef: HTMLCanvasElement; | ||
12 | let chart: any; | ||
13 | |||
10 | let statistic: Statistic = newStatistic(); | 14 | let statistic: Statistic = newStatistic(); |
11 | 15 | ||
12 | async function fetchData() { | 16 | async function fetchData() { |
@@ -74,6 +78,26 @@ | |||
74 | 78 | ||
75 | onMount(() => { | 79 | onMount(() => { |
76 | fetchData(); | 80 | fetchData(); |
81 | chart = new Chart(canvasRef, { | ||
82 | type: 'bar', | ||
83 | data: { | ||
84 | labels: ['one', 'two'], | ||
85 | datasets: [ | ||
86 | { | ||
87 | label: 'Water', | ||
88 | data: [1, 2], | ||
89 | backgroundColor: 'rgba(75, 192, 192, 0.2)', | ||
90 | borderColor: 'rgba(75, 192, 192, 1)', | ||
91 | borderWidth: 1 | ||
92 | } | ||
93 | ] | ||
94 | } | ||
95 | }); | ||
96 | }); | ||
97 | |||
98 | onDestroy(() => { | ||
99 | if (chart) chart.destroy(); | ||
100 | chart = null; | ||
77 | }); | 101 | }); |
78 | </script> | 102 | </script> |
79 | 103 | ||
@@ -102,6 +126,7 @@ | |||
102 | </form> | 126 | </form> |
103 | </dialog> | 127 | </dialog> |
104 | <button on:click={handleClick}>Add</button> | 128 | <button on:click={handleClick}>Add</button> |
129 | <canvas bind:this={canvasRef} /> | ||
105 | {#await json then data} | 130 | {#await json then data} |
106 | <Table {data} nofooter /> | 131 | <Table {data} nofooter /> |
107 | {:catch error} | 132 | {:catch error} |