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.svelte129
1 files changed, 105 insertions, 24 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 5182a85..2b1b8b9 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,16 +1,21 @@
1<script lang="ts"> 1<script lang="ts">
2 import { onDestroy, onMount } from "svelte"; 2 import { onDestroy, onMount } from "svelte";
3 import { token } from "../stores/auth"; 3 import { token } from "../stores/auth";
4 import { addFormOpen } from "../stores/forms";
4 import Table from "./Table.svelte"; 5 import Table from "./Table.svelte";
5 import Chart from "chart.js/auto"; 6 import Chart from "chart.js/auto";
7 import Card from "./Card.svelte";
8 import Column from "./Column.svelte";
6 import AddForm from "./forms/AddForm.svelte"; 9 import AddForm from "./forms/AddForm.svelte";
7 10
8 let open: boolean = false;
9
10 let json: Promise<any>; 11 let json: Promise<any>;
12 let totals: Promise<any>;
13 let userStats: Promise<any>;
11 14
12 let canvasRef: HTMLCanvasElement; 15 let barCanvasRef: HTMLCanvasElement;
13 let chart: any; 16 let lineCanvasRef: HTMLCanvasElement;
17 let barChart: any;
18 let lineChart: any;
14 19
15 let lastSevenDays: string[]; 20 let lastSevenDays: string[];
16 21
@@ -28,6 +33,37 @@
28 } 33 }
29 } 34 }
30 35
36 async function fetchTotals() {
37 const res = await fetch("http://localhost:8080/api/v1/stats/totals/", {
38 method: 'GET',
39 mode: 'no-cors',
40 headers: {
41 Authorization: `Bearer ${$token}`
42 }
43 });
44
45 if (res.ok) {
46 totals = res.json();
47 } else {
48 throw new Error("There was a problem with your request");
49 }
50 }
51
52 async function fetchStatsForUser() {
53 const res = await fetch("http://localhost:8080/api/v1/stats/user/1aa668f3-7527-4a67-9c24-fdf307542eeb", {
54 method: "GET",
55 headers: {
56 Authorization: `Bearer ${$token}`
57 }
58 });
59
60 if (res.ok) {
61 userStats = res.json();
62 } else {
63 throw new Error("There was a problem with your request");
64 }
65 }
66
31 function getLastSevenDays() { 67 function getLastSevenDays() {
32 const result = []; 68 const result = [];
33 for (let i = 0; i < 7; i++) { 69 for (let i = 0; i < 7; i++) {
@@ -38,23 +74,21 @@
38 return result; 74 return result;
39 } 75 }
40 76
41 function handleClick() {
42 open = true;
43 }
44
45 function closeDialog() { 77 function closeDialog() {
46 open = false; 78 addFormOpen.set(false);
47 } 79 }
48 80
49 function onStatisticAdd() { 81 function onStatisticAdd() {
50 open = false; 82 closeDialog();
51 fetchData(); 83 fetchData();
52 } 84 }
53 85
54 onMount(() => { 86 onMount(() => {
55 fetchData(); 87 fetchData();
88// fetchTotals();
89 fetchStatsForUser();
56 lastSevenDays = getLastSevenDays(); 90 lastSevenDays = getLastSevenDays();
57 chart = new Chart(canvasRef, { 91 barChart = new Chart(barCanvasRef, {
58 type: "bar", 92 type: "bar",
59 data: { 93 data: {
60 labels: lastSevenDays, 94 labels: lastSevenDays,
@@ -73,27 +107,74 @@
73 borderWidth: 1 107 borderWidth: 1
74 } 108 }
75 ] 109 ]
110 },
111 options: {
112 responsive: true
113 }
114 });
115 lineChart = new Chart(lineCanvasRef, {
116 type: "line",
117 data: {
118 labels: lastSevenDays,
119 datasets: [
120 {
121 label: "Zach",
122 data: [1, 2, 8, 2, 5, 5, 1],
123 backgroundColor: "rgba(255, 192, 192, 0.2)",
124 borderColor: "rgba(75, 192, 192, 1)",
125 borderWidth: 1
126 }, {
127 label: "Parker",
128 data: [6, 1, 1, 4, 3, 5, 1],
129 backgroundColor: "rgba(75, 192, 192, 0.2)",
130 borderColor: "rgba(75, 192, 192, 1)",
131 borderWidth: 1
132 }
133 ]
134 },
135 options: {
136 responsive: true
76 } 137 }
77 }); 138 });
78 }); 139 });
79 140
80 onDestroy(() => { 141 onDestroy(() => {
81 if (chart) chart.destroy(); 142 if (barChart) barChart.destroy();
82 chart = null; 143 if (lineChart) lineChart.destroy();
144 barChart = null;
145 lineChart = null;
83 }); 146 });
84</script> 147</script>
85 148
86<div> 149<Column --width="500px">
87 <button on:click={handleClick}>Add</button> 150 <Card>
88 <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} /> 151 <canvas bind:this={barCanvasRef} width="" />
89 <canvas bind:this={canvasRef} /> 152 </Card>
90 {#await json then data} 153 <Card>
91 <Table {data} nofooter /> 154 <canvas bind:this={lineCanvasRef} />
92 {:catch error} 155 </Card>
93 <p>{error}</p> 156</Column>
94 {/await} 157
95 <!-- <Chart /> --> 158<AddForm open={$addFormOpen} on:submit={onStatisticAdd} on:close={closeDialog} />
96</div> 159<Column>
160 <Card>
161 {#await json then data}
162 <Table {data} nofooter />
163 {:catch error}
164 <p>{error}</p>
165 {/await}
166 </Card>
167 <Card>
168 <button on:click={() => fetchTotals()}>Get totals</button>
169 {#await totals then data}
170 {JSON.stringify(data)}
171 {:catch error}
172 <p>{error}</p>
173 {/await}
174 </Card>
175</Column>
176<!-- <Chart /> -->
177
97 178
98<style> 179<style>
99 dialog { 180 dialog {