aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/DataView.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r--fe/src/lib/DataView.svelte53
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 @@
1<script lang="ts"> 1<script lang="ts">
2 import { onDestroy, onMount } from "svelte"; 2 import { onDestroy, onMount } from "svelte";
3 import HttpClient from "../http";
3 import { token } from "../stores/auth"; 4 import { token } from "../stores/auth";
4 import { addFormOpen } from "../stores/forms"; 5 import { addFormOpen } from "../stores/forms";
5 import Table from "./Table.svelte"; 6 import Table from "./Table.svelte";
@@ -36,7 +37,7 @@
36 } 37 }
37 38
38 async function fetchDailyUserStatistics() { 39 async function fetchDailyUserStatistics() {
39 const res = await fetch("http://localhost:8080/api/v1/stats/totals/", { 40 const res = await fetch("http://localhost:8080/api/v1/stats/daily/", {
40 method: "GET", 41 method: "GET",
41 headers: { 42 headers: {
42 Authorization: `Bearer ${$token}` 43 Authorization: `Bearer ${$token}`
@@ -99,9 +100,29 @@
99 }, 100 },
100 options: { 101 options: {
101 responsive: true, 102 responsive: true,
103 maintainAspectRatio: false,
104 scales: {
105 y: {
106 suggestedMax: 30,
107 beginAtZero: true,
108 ticks: {
109 autoSkip: true,
110 stepSize: 5
111 }
112 }
113 },
102 plugins: { 114 plugins: {
103 legend: { 115 legend: {
104 display: false 116 display: false
117 },
118 title: {
119 display: true,
120 text: "Weekly Breakdown"
121 },
122 subtitle: {
123 display: true,
124 text: "Water consumption over the last week",
125 padding: {bottom: 10}
105 } 126 }
106 } 127 }
107 } 128 }
@@ -127,9 +148,29 @@
127 }, 148 },
128 options: { 149 options: {
129 responsive: true, 150 responsive: true,
151 maintainAspectRatio: false,
152 scales: {
153 y: {
154 beginAtZero: true,
155 suggestedMax: 10,
156 ticks: {
157 autoSkip: true,
158 stepSize: 1
159 }
160 }
161 },
130 plugins: { 162 plugins: {
131 legend: { 163 legend: {
132 display: false 164 display: false
165 },
166 title: {
167 display: true,
168 text: "Daily Total"
169 },
170 subtitle: {
171 display: true,
172 text: "Water Drank Today",
173 padding: {bottom: 10}
133 } 174 }
134 } 175 }
135 } 176 }
@@ -137,13 +178,13 @@
137 } 178 }
138 179
139 function updateWeeklyTotalsChart(result) { 180 function updateWeeklyTotalsChart(result) {
140 [,lastSevenDaysData] = result; 181 [, lastSevenDaysData] = result;
141 lineChart.data.datasets[0].data = lastSevenDaysData; 182 lineChart.data.datasets[0].data = lastSevenDaysData;
142 lineChart.update(); 183 lineChart.update();
143 } 184 }
144 185
145 function updateDailyUserTotalsChart(result) { 186 function updateDailyUserTotalsChart(result) {
146 [,userTotalsData] = result; 187 [, userTotalsData] = result;
147 barChart.data.datasets[0].data = userTotalsData; 188 barChart.data.datasets[0].data = userTotalsData;
148 barChart.update(); 189 barChart.update();
149 } 190 }
@@ -163,10 +204,10 @@
163</script> 204</script>
164 205
165<Column --width="500px"> 206<Column --width="500px">
166 <Card> 207 <Card --height="300px">
167 <canvas bind:this={barCanvasRef} width="" /> 208 <canvas bind:this={barCanvasRef} />
168 </Card> 209 </Card>
169 <Card> 210 <Card --height="300px">
170 <canvas bind:this={lineCanvasRef} /> 211 <canvas bind:this={lineCanvasRef} />
171 </Card> 212 </Card>
172</Column> 213</Column>