diff options
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r-- | fe/src/lib/DataView.svelte | 40 |
1 files changed, 14 insertions, 26 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index 0a6b81b..5e81a5a 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -1,10 +1,11 @@ | |||
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 http from "../http"; |
4 | import { token } from "../stores/auth"; | 4 | import { token } from "../stores/auth"; |
5 | import { addFormOpen } from "../stores/forms"; | 5 | import { addFormOpen } from "../stores/forms"; |
6 | import Table from "./Table.svelte"; | 6 | import Table from "./Table.svelte"; |
7 | import Chart from "chart.js/auto"; | 7 | import ChartJS from "chart.js/auto"; |
8 | import Chart from './Chart.svelte' | ||
8 | import Card from "./Card.svelte"; | 9 | import Card from "./Card.svelte"; |
9 | import Column from "./Column.svelte"; | 10 | import Column from "./Column.svelte"; |
10 | import AddForm from "./forms/AddForm.svelte"; | 11 | import AddForm from "./forms/AddForm.svelte"; |
@@ -46,8 +47,8 @@ | |||
46 | 47 | ||
47 | if (res.ok) { | 48 | if (res.ok) { |
48 | const json = await res.json(); | 49 | const json = await res.json(); |
49 | let labels = json.map(d => d.name); | 50 | let labels = json.map((d: any) => d.name); |
50 | let data = json.map(d => d.total); | 51 | let data = json.map((d: any) => d.total); |
51 | return [labels, data]; | 52 | return [labels, data]; |
52 | } else { | 53 | } else { |
53 | throw new Error("There was a problem with your request"); | 54 | throw new Error("There was a problem with your request"); |
@@ -65,8 +66,8 @@ | |||
65 | 66 | ||
66 | if (res.ok) { | 67 | if (res.ok) { |
67 | const json = await res.json(); | 68 | const json = await res.json(); |
68 | let labels = json.map(d => d.date); | 69 | let labels = json.map((d: any) => d.date); |
69 | let data = json.map(d => d.total); | 70 | let data = json.map((d: any) => d.total); |
70 | return [labels, data]; | 71 | return [labels, data]; |
71 | } else { | 72 | } else { |
72 | throw new Error("There was a problem with your request"); | 73 | throw new Error("There was a problem with your request"); |
@@ -84,9 +85,9 @@ | |||
84 | fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err)); | 85 | fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err)); |
85 | } | 86 | } |
86 | 87 | ||
87 | function setupWeeklyTotalsChart(result) { | 88 | function setupWeeklyTotalsChart(result: any) { |
88 | [lastSevenDays, lastSevenDaysData] = result; | 89 | [lastSevenDays, lastSevenDaysData] = result; |
89 | lineChart = new Chart(lineCanvasRef, { | 90 | lineChart = new ChartJS(lineCanvasRef, { |
90 | type: "line", | 91 | type: "line", |
91 | data: { | 92 | data: { |
92 | labels: lastSevenDays, | 93 | labels: lastSevenDays, |
@@ -129,10 +130,10 @@ | |||
129 | }); | 130 | }); |
130 | } | 131 | } |
131 | 132 | ||
132 | function setupDailyUserTotalsChart(result) { | 133 | function setupDailyUserTotalsChart(result: any) { |
133 | [userTotalsLabels, userTotalsData] = result; | 134 | [userTotalsLabels, userTotalsData] = result; |
134 | 135 | ||
135 | barChart = new Chart(barCanvasRef, { | 136 | barChart = new ChartJS(barCanvasRef, { |
136 | type: "bar", | 137 | type: "bar", |
137 | data: { | 138 | data: { |
138 | labels: userTotalsLabels, | 139 | labels: userTotalsLabels, |
@@ -177,13 +178,13 @@ | |||
177 | }); | 178 | }); |
178 | } | 179 | } |
179 | 180 | ||
180 | function updateWeeklyTotalsChart(result) { | 181 | function updateWeeklyTotalsChart(result: any) { |
181 | [, lastSevenDaysData] = result; | 182 | [, lastSevenDaysData] = result; |
182 | lineChart.data.datasets[0].data = lastSevenDaysData; | 183 | lineChart.data.datasets[0].data = lastSevenDaysData; |
183 | lineChart.update(); | 184 | lineChart.update(); |
184 | } | 185 | } |
185 | 186 | ||
186 | function updateDailyUserTotalsChart(result) { | 187 | function updateDailyUserTotalsChart(result: any) { |
187 | [, userTotalsData] = result; | 188 | [, userTotalsData] = result; |
188 | barChart.data.datasets[0].data = userTotalsData; | 189 | barChart.data.datasets[0].data = userTotalsData; |
189 | barChart.update(); | 190 | barChart.update(); |
@@ -205,6 +206,7 @@ | |||
205 | 206 | ||
206 | <Column --width="500px"> | 207 | <Column --width="500px"> |
207 | <Card --height="300px"> | 208 | <Card --height="300px"> |
209 | <!--<Chart />--> | ||
208 | <canvas bind:this={barCanvasRef} /> | 210 | <canvas bind:this={barCanvasRef} /> |
209 | </Card> | 211 | </Card> |
210 | <Card --height="300px"> | 212 | <Card --height="300px"> |
@@ -223,17 +225,3 @@ | |||
223 | </Card> | 225 | </Card> |
224 | </Column> | 226 | </Column> |
225 | <!-- <Chart /> --> | 227 | <!-- <Chart /> --> |
226 | |||
227 | |||
228 | <style> | ||
229 | dialog { | ||
230 | background: red; | ||
231 | box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8); | ||
232 | } | ||
233 | |||
234 | dialog::backdrop { | ||
235 | padding: 20px; | ||
236 | box-shadow: 20px 20px rgba(0, 0, 0, 0.8); | ||
237 | background-color: red; | ||
238 | } | ||
239 | </style> | ||