From 9cae9c1d2a0b4f7fa72f3075541b9ffafe1a7275 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 15 Mar 2024 18:49:43 -0400
Subject: Add routes for preference, clean up and add types

---
 fe/src/lib/Chart.svelte | 63 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 fe/src/lib/Chart.svelte

(limited to 'fe/src/lib/Chart.svelte')

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 @@
+<script lang="ts">
+import { onDestroy } from "svelte";
+import ChartJS from "chart.js/auto";
+
+export let data;
+export let labels;
+export let type = 'bar';
+
+let ref: HTMLCanvasElement;
+let chart
+
+function setupChart(result) {
+    [labels, data] = result;
+    chart = new ChartJS(ref, {
+        type,
+        data: {
+            labels,
+            datasets: [
+                {
+                    label: "Totals",
+                    data,
+                    backgroundColor: "rgba(255, 192, 192, 0.2)"
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    suggestedMax: 30,
+                    beginAtZero: true,
+                    ticks: {
+                        autoSkip: true,
+                        stepSize: 5
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                title: {
+                    display: true,
+                    text: "Weekly Breakdown"
+                },
+                subtitle: {
+                    display: true,
+                    text: "Water consumption over the last week",
+                    padding: {bottom: 10}
+                }
+            }
+        }
+    });
+    
+    onDestroy(() => {
+        if (chart) chart.destroy();
+        chart = null;
+    })
+}
+</script>
+
+<canvas bind:this={ref} />
\ No newline at end of file
-- 
cgit v1.1