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.svelte40
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>