diff options
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r-- | fe/src/lib/DataView.svelte | 53 |
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> |