From a83dc5471396206a2318ea76527e3ed858cf16f6 Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Fri, 9 Aug 2024 22:36:34 +0200
Subject: [PATCH] Implement graphs for average energy values

---
 .../AggregatedFood/AggregatedFoodComp.svelte  |   4 +-
 .../AggregatedFood/AggregatedFoodTable.svelte | 127 ++++++++----------
 frontend/src/lib/components/Header.svelte     |   2 +-
 .../lib/components/Settings/Setting.svelte    |   2 +-
 .../lib/components/Settings/Settings.svelte   |   2 +-
 frontend/src/lib/router/routes/Daily.svelte   |  11 +-
 frontend/src/lib/router/routes/Monthly.svelte |  11 +-
 frontend/src/lib/router/routes/Weekly.svelte  |  11 +-
 frontend/src/lib/router/routes/Yearly.svelte  |  11 +-
 .../src/lib/store/Energy/dailyFoodStore.ts    |   2 +-
 frontend/src/lib/store/Energy/foodStore.ts    |   4 +-
 .../src/lib/store/Energy/monthlyFoodStore.ts  |   2 +-
 .../src/lib/store/Energy/weeklyFoodStore.ts   |   2 +-
 .../src/lib/store/Energy/yearlyFoodStore.ts   |   2 +-
 14 files changed, 98 insertions(+), 95 deletions(-)

diff --git a/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodComp.svelte b/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodComp.svelte
index 24ca740..aa8a047 100644
--- a/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodComp.svelte
+++ b/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodComp.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { AggregatedFood } from '$lib/database/food'
+	import { main } from "$wails/models";
 
-	export let item: AggregatedFood
+	export let item: main.AggregatedFood
 </script>
 
 <template>
diff --git a/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte b/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte
index 8a353a7..0329873 100644
--- a/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte
+++ b/frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Line } from 'svelte-chartjs'
-	import type { AggregatedFood } from '$lib/database/food'
-	import AggregatedFoodComp from '$components/Energy/AggregatedFood/AggregatedFoodComp.svelte'
-	import type { ChartData, Point } from 'chart.js'
+	import { Line } from "svelte-chartjs";
+	import AggregatedFoodComp from "$components/Energy/AggregatedFood/AggregatedFoodComp.svelte";
+	import { main } from "$wails/models";
+	import type { ChartData, Point } from "chart.js";
 	import {
 		CategoryScale,
 		Chart as ChartJS,
@@ -10,109 +10,92 @@
 		LinearScale,
 		LineElement,
 		PointElement,
-		Title,
-		Tooltip
-	} from 'chart.js'
-
-	ChartJS.register(
 		Title,
 		Tooltip,
-		Legend,
-		LineElement,
-		LinearScale,
-		PointElement,
-		CategoryScale
-	)
+	} from "chart.js";
 
-	export let items: AggregatedFood[] = []
-	export let energyTarget: number = 2000
-	export let energyLimit: number = 2500
-	let reversedItems = items.slice().reverse()
+	ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
+
+	export let items: main.AggregatedFood[] = [];
+	export let energyTarget: number = 2000;
+	export let energyLimit: number = 2500;
+	let reversedItems = items.slice().reverse();
 
 	const defaultOptions = {
-		backgroundColor: 'rgba(225, 204,230, .3)',
-		borderColor: 'rgb(205, 130, 158)',
-		pointBorderColor: 'rgb(205, 130, 158)',
-		pointBackgroundColor: 'rgb(255, 255, 255)',
+		backgroundColor: "rgba(225, 204,230, .3)",
+		borderColor: "rgb(205, 130, 158)",
+		pointBorderColor: "rgb(205, 130, 158)",
+		pointBackgroundColor: "rgb(255, 255, 255)",
 		pointBorderWidth: 10,
 		pointHoverRadius: 5,
-		pointHoverBackgroundColor: 'rgb(0, 157, 123)',
-		pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+		pointHoverBackgroundColor: "rgb(0, 157, 123)",
+		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
 		pointHoverBorderWidth: 2,
 		pointRadius: 1,
-		pointHitRadius: 10
-	}
-	const data: ChartData<'line', (number | Point)[]> = {
-		labels: reversedItems.map(f => f.period),
+		pointHitRadius: 10,
+	};
+	const data: ChartData<"line", (number | Point)[]> = {
+		labels: reversedItems.map((f) => f.period),
 		datasets: [
 			{
 				...defaultOptions,
-				label: 'Amount',
-				data: reversedItems.map(f => f.amount),
-				borderColor: '#ff4dff',
-				pointBorderColor: '#ff4dff',
+				label: "Amount",
+				data: reversedItems.map((f) => f.amount),
+				borderColor: "#ff4dff",
+				pointBorderColor: "#ff4dff",
 			},
 			{
 				...defaultOptions,
-				label: 'AvgPer100',
-				data: reversedItems.map(f => f.avgPer100),
-				borderColor: '#ffb84d',
-				pointBorderColor: '#ffb84d',
+				label: "AvgPer100",
+				data: reversedItems.map((f) => f.avgPer100),
+				borderColor: "#ffb84d",
+				pointBorderColor: "#ffb84d",
 			},
 			{
 				...defaultOptions,
-				label: 'Energy',
-				data: reversedItems.map(f => f.energy),
-				borderColor: '#b8ff4d',
-				pointBorderColor: '#b8ff4d',
+				label: "Energy",
+				data: reversedItems.map((f) => f.energy),
+				borderColor: "#b8ff4d",
+				pointBorderColor: "#b8ff4d",
 			},
 			{
 				...defaultOptions,
-				label: 'Target',
-				data: reversedItems.map(f => energyTarget),
-				borderColor: '#00ff00',
-				pointBorderColor: '#00ff00',
+				label: "Target",
+				data: reversedItems.map((f) => energyTarget),
+				borderColor: "#00ff00",
+				pointBorderColor: "#00ff00",
 			},
 			{
 				...defaultOptions,
-				label: 'Limit',
-				data: reversedItems.map(f => energyLimit),
-				borderColor: '#ff0000',
-				pointBorderColor: '#ff0000',
-			}
-		]
-	}
+				label: "Limit",
+				data: reversedItems.map((f) => energyLimit),
+				borderColor: "#ff0000",
+				pointBorderColor: "#ff0000",
+			},
+		],
+	};
 </script>
 
 <template>
-	<Line data="{data}" class="max-h-[50vh] h-[50vh]" />
+	<Line {data} class="max-h-[50vh] h-[50vh]" />
 	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
 		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
 			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
 				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-				<tr>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
-						Period
-					</th>
-					<th class="px-6 py-3" scope="col">
-						Amount
-					</th>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
-						AvgPer100
-					</th>
-					<th class="px-6 py-3" scope="col">
-						Energy
-					</th>
-				</tr>
+					<tr>
+						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
+						<th class="px-6 py-3" scope="col"> Amount </th>
+						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col"> AvgPer100 </th>
+						<th class="px-6 py-3" scope="col"> Energy </th>
+					</tr>
 				</thead>
 				<tbody>
-				{#each items as f}
-					<AggregatedFoodComp item="{f}" />
-				{/each}
+					{#each items as f}
+						<AggregatedFoodComp item={f} />
+					{/each}
 				</tbody>
 			</table>
 		</div>
-		<div>
-		</div>
+		<div></div>
 	</div>
 </template>
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index cccdbcd..e679ced 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -43,7 +43,7 @@
 		});
 	}
 
-	let showModal = true;
+	let showModal = false;
 </script>
 
 <header
diff --git a/frontend/src/lib/components/Settings/Setting.svelte b/frontend/src/lib/components/Settings/Setting.svelte
index a5626a7..bdc2b6b 100644
--- a/frontend/src/lib/components/Settings/Setting.svelte
+++ b/frontend/src/lib/components/Settings/Setting.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { settingsStore } from "$lib/store/SettingsStore";
+	import { settingsStore } from "$lib/store/settingsStore";
 	import { SetSetting } from "$wails/main/App";
 	import { toast } from "svelte-sonner";
 
diff --git a/frontend/src/lib/components/Settings/Settings.svelte b/frontend/src/lib/components/Settings/Settings.svelte
index a7133aa..f3892a7 100644
--- a/frontend/src/lib/components/Settings/Settings.svelte
+++ b/frontend/src/lib/components/Settings/Settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { settingsStore } from "$lib/store/SettingsStore";
+	import { settingsStore } from "$lib/store/settingsStore";
 	import Modal from "../Modal.svelte";
 	import Setting from "./Setting.svelte";
 
diff --git a/frontend/src/lib/router/routes/Daily.svelte b/frontend/src/lib/router/routes/Daily.svelte
index 6da91e9..b30f4e3 100644
--- a/frontend/src/lib/router/routes/Daily.svelte
+++ b/frontend/src/lib/router/routes/Daily.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { dailyFoodStore } from '$lib/store/Energy/dailyFoodStore'
+	import AggregatedFoodTable from "$components/Energy/AggregatedFood/AggregatedFoodTable.svelte";
+	import { dailyFoodStore } from "$lib/store/Energy/dailyFoodStore";
+	import { settingsStore } from "$lib/store/settingsStore";
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$dailyFoodStore}" />
+	<AggregatedFoodTable
+		items={$dailyFoodStore}
+		energyTarget={$settingsStore.target}
+		energyLimit={$settingsStore.limit}
+	/>
 </template>
diff --git a/frontend/src/lib/router/routes/Monthly.svelte b/frontend/src/lib/router/routes/Monthly.svelte
index 9b53d05..9eec13e 100644
--- a/frontend/src/lib/router/routes/Monthly.svelte
+++ b/frontend/src/lib/router/routes/Monthly.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { monthlyFoodStore } from '$lib/store/Energy/monthlyFoodStore'
+	import AggregatedFoodTable from "$components/Energy/AggregatedFood/AggregatedFoodTable.svelte";
+	import { monthlyFoodStore } from "$lib/store/Energy/monthlyFoodStore";
+	import { settingsStore } from "$lib/store/settingsStore";
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$monthlyFoodStore}" />
+	<AggregatedFoodTable
+		items={$monthlyFoodStore}
+		energyTarget={$settingsStore.target * 30}
+		energyLimit={$settingsStore.limit * 30}
+	/>
 </template>
diff --git a/frontend/src/lib/router/routes/Weekly.svelte b/frontend/src/lib/router/routes/Weekly.svelte
index 0211469..837c06f 100644
--- a/frontend/src/lib/router/routes/Weekly.svelte
+++ b/frontend/src/lib/router/routes/Weekly.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { weeklyFoodStore } from '$lib/store/Energy/weeklyFoodStore'
+	import AggregatedFoodTable from "$components/Energy/AggregatedFood/AggregatedFoodTable.svelte";
+	import { weeklyFoodStore } from "$lib/store/Energy/weeklyFoodStore";
+	import { settingsStore } from "$lib/store/settingsStore";
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$weeklyFoodStore}" />
+	<AggregatedFoodTable
+		items={$weeklyFoodStore}
+		energyTarget={$settingsStore.target * 7}
+		energyLimit={$settingsStore.limit * 7}
+	/>
 </template>
diff --git a/frontend/src/lib/router/routes/Yearly.svelte b/frontend/src/lib/router/routes/Yearly.svelte
index 569def8..e4ec2b1 100644
--- a/frontend/src/lib/router/routes/Yearly.svelte
+++ b/frontend/src/lib/router/routes/Yearly.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { yearlyFoodStore } from '$lib/store/Energy/yearlyFoodStore'
+	import AggregatedFoodTable from "$components/Energy/AggregatedFood/AggregatedFoodTable.svelte";
+	import { yearlyFoodStore } from "$lib/store/Energy/yearlyFoodStore";
+	import { settingsStore } from "$lib/store/settingsStore";
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$yearlyFoodStore}" />
+	<AggregatedFoodTable
+		items={$yearlyFoodStore}
+		energyTarget={$settingsStore.target * 365}
+		energyLimit={$settingsStore.limit * 365}
+	/>
 </template>
diff --git a/frontend/src/lib/store/Energy/dailyFoodStore.ts b/frontend/src/lib/store/Energy/dailyFoodStore.ts
index 0beb1f2..8a9269b 100644
--- a/frontend/src/lib/store/Energy/dailyFoodStore.ts
+++ b/frontend/src/lib/store/Energy/dailyFoodStore.ts
@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
 import { main } from "$wails/models";
 import { GetDailyFood } from "$wails/main/App";
 import { toast } from "svelte-sonner";
-import { settingsStore } from "../SettingsStore";
+import { settingsStore } from "../settingsStore";
 
 async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
 	let foods: main.AggregatedFood[] = [];
diff --git a/frontend/src/lib/store/Energy/foodStore.ts b/frontend/src/lib/store/Energy/foodStore.ts
index af2ac53..9b88a9d 100644
--- a/frontend/src/lib/store/Energy/foodStore.ts
+++ b/frontend/src/lib/store/Energy/foodStore.ts
@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
 import { main } from "$wails/models";
 import { GetFood } from "$wails/main/App";
 import { toast } from "svelte-sonner";
-import { settingsStore } from "../SettingsStore";
+import { settingsStore } from "../settingsStore";
 
 async function createStore(): Promise<Writable<main.Food[]>> {
 	let foods: main.Food[] = [];
@@ -36,4 +36,4 @@ settingsStore.subscribe((settings) => {
 	foodStore.refresh();
 });
 
-export {foodStore}
+export { foodStore };
diff --git a/frontend/src/lib/store/Energy/monthlyFoodStore.ts b/frontend/src/lib/store/Energy/monthlyFoodStore.ts
index a0eee5c..76557ec 100644
--- a/frontend/src/lib/store/Energy/monthlyFoodStore.ts
+++ b/frontend/src/lib/store/Energy/monthlyFoodStore.ts
@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
 import { main } from "$wails/models";
 import { GetMonthlyFood } from "$wails/main/App";
 import { toast } from "svelte-sonner";
-import { settingsStore } from "../SettingsStore";
+import { settingsStore } from "../settingsStore";
 
 async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
 	let foods: main.AggregatedFood[] = [];
diff --git a/frontend/src/lib/store/Energy/weeklyFoodStore.ts b/frontend/src/lib/store/Energy/weeklyFoodStore.ts
index 63c299e..22eb08b 100644
--- a/frontend/src/lib/store/Energy/weeklyFoodStore.ts
+++ b/frontend/src/lib/store/Energy/weeklyFoodStore.ts
@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
 import { main } from "$wails/models";
 import { GetWeeklyFood } from "$wails/main/App";
 import { toast } from "svelte-sonner";
-import { settingsStore } from "../SettingsStore";
+import { settingsStore } from "../settingsStore";
 
 async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
 	let foods: main.AggregatedFood[] = [];
diff --git a/frontend/src/lib/store/Energy/yearlyFoodStore.ts b/frontend/src/lib/store/Energy/yearlyFoodStore.ts
index 8bee07c..e490405 100644
--- a/frontend/src/lib/store/Energy/yearlyFoodStore.ts
+++ b/frontend/src/lib/store/Energy/yearlyFoodStore.ts
@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
 import { main } from "$wails/models";
 import { GetYearlyFood } from "$wails/main/App";
 import { toast } from "svelte-sonner";
-import { settingsStore } from "../SettingsStore";
+import { settingsStore } from "../settingsStore";
 
 async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
 	let foods: main.AggregatedFood[] = [];