Implement graphs for average energy values

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>

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>
+						<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}" />
+						<AggregatedFoodComp item={f} />
 					{/each}
 				</tbody>
 			</table>
 		</div>
-		<div>
-		</div>
+		<div></div>
 	</div>
 </template>

frontend/src/lib/components/Header.svelte

@@ -43,7 +43,7 @@
 		});
 	}
 
-	let showModal = true;
+	let showModal = false;
 </script>
 
 <header

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";
 

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";
 

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>

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>

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>

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>

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[] = [];

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 };

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[] = [];

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[] = [];

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[] = [];