From 326f186d67017f87e631a1fbcdf3f184cbc42d7d Mon Sep 17 00:00:00 2001 From: Zach Berwaldt Date: Fri, 1 Mar 2024 20:26:42 -0500 Subject: 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. --- fe/src/lib/DataView.svelte | 27 +++++++++++++++++++++++---- 1 file 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 @@
- + {#await json then data} {:catch error} -- cgit v1.1