1 files changed, 47 insertions, 6 deletions

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 7d62a43..0a6b81b 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
+    import HttpClient from "../http";
     import { token } from "../stores/auth";
     import { addFormOpen } from "../stores/forms";
     import Table from "./Table.svelte";
@@ -36,7 +37,7 @@
     }
 
     async function fetchDailyUserStatistics() {
-        const res = await fetch("http://localhost:8080/api/v1/stats/totals/", {
+        const res = await fetch("http://localhost:8080/api/v1/stats/daily/", {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
@@ -99,9 +100,29 @@
             },
             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}
                     }
                 }
             }
@@ -127,9 +148,29 @@
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        suggestedMax: 10,
+                        ticks: {
+                            autoSkip: true,
+                            stepSize: 1
+                        }
+                    }
+                },
                 plugins: {
                     legend: {
                         display: false
+                    },
+                    title: {
+                        display: true,
+                        text: "Daily Total"
+                    },
+                    subtitle: {
+                        display: true,
+                        text: "Water Drank Today",
+                        padding: {bottom: 10}
                     }
                 }
             }
@@ -137,13 +178,13 @@
     }
 
     function updateWeeklyTotalsChart(result) {
-        [,lastSevenDaysData] = result;
+        [, lastSevenDaysData] = result;
         lineChart.data.datasets[0].data = lastSevenDaysData;
         lineChart.update();
     }
 
     function updateDailyUserTotalsChart(result) {
-        [,userTotalsData] = result;
+        [, userTotalsData] = result;
         barChart.data.datasets[0].data = userTotalsData;
         barChart.update();
     }
@@ -163,10 +204,10 @@
 </script>
 
 <Column --width="500px">
-    <Card>
-        <canvas bind:this={barCanvasRef} width="" />
+    <Card --height="300px">
+        <canvas bind:this={barCanvasRef} />
     </Card>
-    <Card>
+    <Card --height="300px">
         <canvas bind:this={lineCanvasRef} />
     </Card>
 </Column>