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