diff options
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r-- | fe/src/lib/DataView.svelte | 27 |
1 files changed, 23 insertions, 4 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index 7f368c6..5182a85 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -12,6 +12,8 @@ | |||
12 | let canvasRef: HTMLCanvasElement; | 12 | let canvasRef: HTMLCanvasElement; |
13 | let chart: any; | 13 | let chart: any; |
14 | 14 | ||
15 | let lastSevenDays: string[]; | ||
16 | |||
15 | async function fetchData() { | 17 | async function fetchData() { |
16 | const res = await fetch("http://localhost:8080/api/v1/stats/", { | 18 | const res = await fetch("http://localhost:8080/api/v1/stats/", { |
17 | method: "GET", | 19 | method: "GET", |
@@ -26,6 +28,16 @@ | |||
26 | } | 28 | } |
27 | } | 29 | } |
28 | 30 | ||
31 | function getLastSevenDays() { | ||
32 | const result = []; | ||
33 | for (let i = 0; i < 7; i++) { | ||
34 | let d = new Date(); | ||
35 | d.setDate(d.getDate() - i); | ||
36 | result.push(d.toISOString().substring(0, 10)); | ||
37 | } | ||
38 | return result; | ||
39 | } | ||
40 | |||
29 | function handleClick() { | 41 | function handleClick() { |
30 | open = true; | 42 | open = true; |
31 | } | 43 | } |
@@ -41,14 +53,21 @@ | |||
41 | 53 | ||
42 | onMount(() => { | 54 | onMount(() => { |
43 | fetchData(); | 55 | fetchData(); |
56 | lastSevenDays = getLastSevenDays(); | ||
44 | chart = new Chart(canvasRef, { | 57 | chart = new Chart(canvasRef, { |
45 | type: "bar", | 58 | type: "bar", |
46 | data: { | 59 | data: { |
47 | labels: ["one", "two"], | 60 | labels: lastSevenDays, |
48 | datasets: [ | 61 | datasets: [ |
49 | { | 62 | { |
50 | label: "Water", | 63 | label: "Zach", |
51 | data: [1, 2], | 64 | data: [1, 2, 8, 2, 5, 5, 1], |
65 | backgroundColor: "rgba(255, 192, 192, 0.2)", | ||
66 | borderColor: "rgba(75, 192, 192, 1)", | ||
67 | borderWidth: 1 | ||
68 | }, { | ||
69 | label: "Parker", | ||
70 | data: [6, 1, 1, 4, 3, 5, 1], | ||
52 | backgroundColor: "rgba(75, 192, 192, 0.2)", | 71 | backgroundColor: "rgba(75, 192, 192, 0.2)", |
53 | borderColor: "rgba(75, 192, 192, 1)", | 72 | borderColor: "rgba(75, 192, 192, 1)", |
54 | borderWidth: 1 | 73 | borderWidth: 1 |
@@ -66,8 +85,8 @@ | |||
66 | 85 | ||
67 | <div> | 86 | <div> |
68 | <button on:click={handleClick}>Add</button> | 87 | <button on:click={handleClick}>Add</button> |
69 | <canvas bind:this={canvasRef} /> | ||
70 | <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} /> | 88 | <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} /> |
89 | <canvas bind:this={canvasRef} /> | ||
71 | {#await json then data} | 90 | {#await json then data} |
72 | <Table {data} nofooter /> | 91 | <Table {data} nofooter /> |
73 | {:catch error} | 92 | {:catch error} |