diff options
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r-- | fe/src/lib/DataView.svelte | 130 |
1 files changed, 69 insertions, 61 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index 2b1b8b9..7d62a43 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -9,8 +9,6 @@ | |||
9 | import AddForm from "./forms/AddForm.svelte"; | 9 | import AddForm from "./forms/AddForm.svelte"; |
10 | 10 | ||
11 | let json: Promise<any>; | 11 | let json: Promise<any>; |
12 | let totals: Promise<any>; | ||
13 | let userStats: Promise<any>; | ||
14 | 12 | ||
15 | let barCanvasRef: HTMLCanvasElement; | 13 | let barCanvasRef: HTMLCanvasElement; |
16 | let lineCanvasRef: HTMLCanvasElement; | 14 | let lineCanvasRef: HTMLCanvasElement; |
@@ -18,6 +16,10 @@ | |||
18 | let lineChart: any; | 16 | let lineChart: any; |
19 | 17 | ||
20 | let lastSevenDays: string[]; | 18 | let lastSevenDays: string[]; |
19 | let lastSevenDaysData: number[]; | ||
20 | |||
21 | let userTotalsLabels: string[]; | ||
22 | let userTotalsData: number[]; | ||
21 | 23 | ||
22 | async function fetchData() { | 24 | async function fetchData() { |
23 | const res = await fetch("http://localhost:8080/api/v1/stats/", { | 25 | const res = await fetch("http://localhost:8080/api/v1/stats/", { |
@@ -33,24 +35,27 @@ | |||
33 | } | 35 | } |
34 | } | 36 | } |
35 | 37 | ||
36 | async function fetchTotals() { | 38 | async function fetchDailyUserStatistics() { |
37 | const res = await fetch("http://localhost:8080/api/v1/stats/totals/", { | 39 | const res = await fetch("http://localhost:8080/api/v1/stats/totals/", { |
38 | method: 'GET', | 40 | method: "GET", |
39 | mode: 'no-cors', | ||
40 | headers: { | 41 | headers: { |
41 | Authorization: `Bearer ${$token}` | 42 | Authorization: `Bearer ${$token}` |
42 | } | 43 | } |
43 | }); | 44 | }); |
44 | 45 | ||
45 | if (res.ok) { | 46 | if (res.ok) { |
46 | totals = res.json(); | 47 | const json = await res.json(); |
48 | let labels = json.map(d => d.name); | ||
49 | let data = json.map(d => d.total); | ||
50 | return [labels, data]; | ||
47 | } else { | 51 | } else { |
48 | throw new Error("There was a problem with your request"); | 52 | throw new Error("There was a problem with your request"); |
49 | } | 53 | } |
54 | |||
50 | } | 55 | } |
51 | 56 | ||
52 | async function fetchStatsForUser() { | 57 | async function fetchWeeklyTotals() { |
53 | const res = await fetch("http://localhost:8080/api/v1/stats/user/1aa668f3-7527-4a67-9c24-fdf307542eeb", { | 58 | const res = await fetch("http://localhost:8080/api/v1/stats/weekly/", { |
54 | method: "GET", | 59 | method: "GET", |
55 | headers: { | 60 | headers: { |
56 | Authorization: `Bearer ${$token}` | 61 | Authorization: `Bearer ${$token}` |
@@ -58,22 +63,15 @@ | |||
58 | }); | 63 | }); |
59 | 64 | ||
60 | if (res.ok) { | 65 | if (res.ok) { |
61 | userStats = res.json(); | 66 | const json = await res.json(); |
67 | let labels = json.map(d => d.date); | ||
68 | let data = json.map(d => d.total); | ||
69 | return [labels, data]; | ||
62 | } else { | 70 | } else { |
63 | throw new Error("There was a problem with your request"); | 71 | throw new Error("There was a problem with your request"); |
64 | } | 72 | } |
65 | } | 73 | } |
66 | 74 | ||
67 | function getLastSevenDays() { | ||
68 | const result = []; | ||
69 | for (let i = 0; i < 7; i++) { | ||
70 | let d = new Date(); | ||
71 | d.setDate(d.getDate() - i); | ||
72 | result.push(d.toISOString().substring(0, 10)); | ||
73 | } | ||
74 | return result; | ||
75 | } | ||
76 | |||
77 | function closeDialog() { | 75 | function closeDialog() { |
78 | addFormOpen.set(false); | 76 | addFormOpen.set(false); |
79 | } | 77 | } |
@@ -81,61 +79,79 @@ | |||
81 | function onStatisticAdd() { | 79 | function onStatisticAdd() { |
82 | closeDialog(); | 80 | closeDialog(); |
83 | fetchData(); | 81 | fetchData(); |
82 | fetchWeeklyTotals().then(updateWeeklyTotalsChart).catch(err => console.error(err)); | ||
83 | fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err)); | ||
84 | } | 84 | } |
85 | 85 | ||
86 | onMount(() => { | 86 | function setupWeeklyTotalsChart(result) { |
87 | fetchData(); | 87 | [lastSevenDays, lastSevenDaysData] = result; |
88 | // fetchTotals(); | 88 | lineChart = new Chart(lineCanvasRef, { |
89 | fetchStatsForUser(); | 89 | type: "line", |
90 | lastSevenDays = getLastSevenDays(); | ||
91 | barChart = new Chart(barCanvasRef, { | ||
92 | type: "bar", | ||
93 | data: { | 90 | data: { |
94 | labels: lastSevenDays, | 91 | labels: lastSevenDays, |
95 | datasets: [ | 92 | datasets: [ |
96 | { | 93 | { |
97 | label: "Zach", | 94 | label: "Totals", |
98 | data: [1, 2, 8, 2, 5, 5, 1], | 95 | data: lastSevenDaysData, |
99 | backgroundColor: "rgba(255, 192, 192, 0.2)", | 96 | backgroundColor: "rgba(255, 192, 192, 0.2)" |
100 | borderColor: "rgba(75, 192, 192, 1)", | ||
101 | borderWidth: 1 | ||
102 | }, { | ||
103 | label: "Parker", | ||
104 | data: [6, 1, 1, 4, 3, 5, 1], | ||
105 | backgroundColor: "rgba(75, 192, 192, 0.2)", | ||
106 | borderColor: "rgba(75, 192, 192, 1)", | ||
107 | borderWidth: 1 | ||
108 | } | 97 | } |
109 | ] | 98 | ] |
110 | }, | 99 | }, |
111 | options: { | 100 | options: { |
112 | responsive: true | 101 | responsive: true, |
102 | plugins: { | ||
103 | legend: { | ||
104 | display: false | ||
105 | } | ||
106 | } | ||
113 | } | 107 | } |
114 | }); | 108 | }); |
115 | lineChart = new Chart(lineCanvasRef, { | 109 | } |
116 | type: "line", | 110 | |
111 | function setupDailyUserTotalsChart(result) { | ||
112 | [userTotalsLabels, userTotalsData] = result; | ||
113 | |||
114 | barChart = new Chart(barCanvasRef, { | ||
115 | type: "bar", | ||
117 | data: { | 116 | data: { |
118 | labels: lastSevenDays, | 117 | labels: userTotalsLabels, |
119 | datasets: [ | 118 | datasets: [ |
120 | { | 119 | { |
121 | label: "Zach", | 120 | data: userTotalsData, |
122 | data: [1, 2, 8, 2, 5, 5, 1], | 121 | backgroundColor: [ |
123 | backgroundColor: "rgba(255, 192, 192, 0.2)", | 122 | "#330000", |
124 | borderColor: "rgba(75, 192, 192, 1)", | 123 | "rgba(100, 200, 192, 0.2)" |
125 | borderWidth: 1 | 124 | ] |
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 | } | 125 | } |
133 | ] | 126 | ] |
134 | }, | 127 | }, |
135 | options: { | 128 | options: { |
136 | responsive: true | 129 | responsive: true, |
130 | plugins: { | ||
131 | legend: { | ||
132 | display: false | ||
133 | } | ||
134 | } | ||
137 | } | 135 | } |
138 | }); | 136 | }); |
137 | } | ||
138 | |||
139 | function updateWeeklyTotalsChart(result) { | ||
140 | [,lastSevenDaysData] = result; | ||
141 | lineChart.data.datasets[0].data = lastSevenDaysData; | ||
142 | lineChart.update(); | ||
143 | } | ||
144 | |||
145 | function updateDailyUserTotalsChart(result) { | ||
146 | [,userTotalsData] = result; | ||
147 | barChart.data.datasets[0].data = userTotalsData; | ||
148 | barChart.update(); | ||
149 | } | ||
150 | |||
151 | onMount(() => { | ||
152 | fetchData(); | ||
153 | fetchWeeklyTotals().then(setupWeeklyTotalsChart); | ||
154 | fetchDailyUserStatistics().then(setupDailyUserTotalsChart); | ||
139 | }); | 155 | }); |
140 | 156 | ||
141 | onDestroy(() => { | 157 | onDestroy(() => { |
@@ -164,14 +180,6 @@ | |||
164 | <p>{error}</p> | 180 | <p>{error}</p> |
165 | {/await} | 181 | {/await} |
166 | </Card> | 182 | </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> | 183 | </Column> |
176 | <!-- <Chart /> --> | 184 | <!-- <Chart /> --> |
177 | 185 | ||