aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/DataView.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r--fe/src/lib/DataView.svelte27
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}