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 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import type { Statistic } from "../types";
   import { token, user } from "../stores/auth";
   import Table from "./Table.svelte";
+  import Chart from 'chart.js/auto';
 
   let json: Promise<any>;
   let showAddForm: boolean = false;
 
+  let canvasRef: HTMLCanvasElement;
+  let chart: any;
+
   let statistic: Statistic = newStatistic();
 
   async function fetchData() {
@@ -74,6 +78,26 @@
 
   onMount(() => {
     fetchData();
+    chart = new Chart(canvasRef, {
+        type: 'bar',
+        data: {
+            labels: ['one', 'two'],
+            datasets: [
+                {
+                    label: 'Water',
+                    data: [1, 2],
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }
+            ]
+        }
+    });
+  });
+
+  onDestroy(() => {
+    if (chart) chart.destroy();
+    chart = null;
   });
 </script>
 
@@ -102,6 +126,7 @@
     </form>
   </dialog>
   <button on:click={handleClick}>Add</button>
+  <canvas bind:this={canvasRef} />
   {#await json then data}
     <Table {data} nofooter />
   {:catch error}