feat: Add last seven days labels to chart

In the `DataView.svelte` component, the last seven days are now included as labels in the chart. This allows users to easily visualize data for the past week. The `getLastSevenDays` function generates an array of string values representing the dates in ISO format. This array is assigned to the `lastSevenDays` variable, which is then used as the labels in the chart's dataset.

1 files changed, 23 insertions, 4 deletions

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 7f368c6..5182a85 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -12,6 +12,8 @@
     let canvasRef: HTMLCanvasElement;
     let chart: any;
 
+    let lastSevenDays: string[];
+
     async function fetchData() {
         const res = await fetch("http://localhost:8080/api/v1/stats/", {
             method: "GET",
@@ -26,6 +28,16 @@
         }
     }
 
+    function getLastSevenDays() {
+        const result = [];
+        for (let i = 0; i < 7; i++) {
+            let d = new Date();
+            d.setDate(d.getDate() - i);
+            result.push(d.toISOString().substring(0, 10));
+        }
+        return result;
+    }
+
     function handleClick() {
         open = true;
     }
@@ -41,14 +53,21 @@
 
     onMount(() => {
         fetchData();
+        lastSevenDays = getLastSevenDays();
         chart = new Chart(canvasRef, {
             type: "bar",
             data: {
-                labels: ["one", "two"],
+                labels: lastSevenDays,
                 datasets: [
                     {
-                        label: "Water",
-                        data: [1, 2],
+                        label: "Zach",
+                        data: [1, 2, 8, 2, 5, 5, 1],
+                        backgroundColor: "rgba(255, 192, 192, 0.2)",
+                        borderColor: "rgba(75, 192, 192, 1)",
+                        borderWidth: 1
+                    }, {
+                        label: "Parker",
+                        data: [6, 1, 1, 4, 3, 5, 1],
                         backgroundColor: "rgba(75, 192, 192, 0.2)",
                         borderColor: "rgba(75, 192, 192, 1)",
                         borderWidth: 1
@@ -66,8 +85,8 @@
 
 <div>
     <button on:click={handleClick}>Add</button>
-    <canvas bind:this={canvasRef} />
     <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} />
+    <canvas bind:this={canvasRef} />
     {#await json then data}
         <Table {data} nofooter />
     {:catch error}