Add graphs

src/lib/components/AggregatedFood/AggregatedFoodTable.svelte

@@ -1,12 +1,91 @@
 <script lang="ts">
-
+	import { Line } from 'svelte-chartjs'
 	import type { AggregatedFood } from '$lib/database/food'
 	import AggregatedFoodComp from '$components/AggregatedFood/AggregatedFoodComp.svelte'
+	import type { ChartData, Point } from 'chart.js'
+	import {
+		CategoryScale,
+		Chart as ChartJS,
+		Legend,
+		LinearScale,
+		LineElement,
+		PointElement,
+		Title,
+		Tooltip
+	} from 'chart.js'
+
+	ChartJS.register(
+		Title,
+		Tooltip,
+		Legend,
+		LineElement,
+		LinearScale,
+		PointElement,
+		CategoryScale
+	)
 
 	export let items: 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)',
+		pointBorderWidth: 10,
+		pointHoverRadius: 5,
+		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),
+		datasets: [
+			{
+				...defaultOptions,
+				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',
+			},
+			{
+				...defaultOptions,
+				label: 'Energy',
+				data: reversedItems.map(f => f.energy),
+				borderColor: '#b8ff4d',
+				pointBorderColor: '#b8ff4d',
+			},
+			{
+				...defaultOptions,
+				label: 'Target',
+				data: reversedItems.map(f => energyTarget),
+				borderColor: '#00ff00',
+				pointBorderColor: '#00ff00',
+			},
+			{
+				...defaultOptions,
+				label: 'Limit',
+				data: reversedItems.map(f => energyLimit),
+				borderColor: '#ff0000',
+				pointBorderColor: '#ff0000',
+			}
+		]
+	}
 </script>
 
 <template>
+	<Line data="{data}" />
 	<div class="relative flex flex-col h-screen" 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">

src/lib/ipc.ts

@@ -8,20 +8,22 @@ declare global {
 }
 
 // Function avoids 'window not defined' in SSR
-const invoke = () => window.__TAURI_INVOKE__
+const invoke = () => window.__TAURI_INVOKE__;
 
 export function helloTauri() {
-	return invoke()<string>('hello_tauri')
+    return invoke()<string>("hello_tauri")
 }
 
 export function hash256sum(hashInput: string) {
-	return invoke()<string>('hash256sum', { hashInput })
+    return invoke()<string>("hash256sum", { hashInput })
 }
 
 export function storeSetKey(key: string, value: string) {
-	return invoke()<null>('store_set_key', { key, value })
+    return invoke()<null>("store_set_key", { key,value })
 }
 
 export function storeReadKey(key: string) {
-	return invoke()<string | null>('store_read_key', { key })
+    return invoke()<string | null>("store_read_key", { key })
 }
+
+

src/lib/router/routes/Daily.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
 	import { dailyFoodStore } from '$lib/store/dailyFoodStore'
+	import { energyStore } from '$lib/store/energyStore'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$dailyFoodStore}" />
+	<AggregatedFoodTable items="{$dailyFoodStore}"
+	                     energyLimit="{$energyStore.limit}"
+	                     energyTarget="{$energyStore.target}" />
 </template>

src/lib/router/routes/Monthly.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
 	import { monthlyFoodStore } from '$lib/store/monthlyFoodStore'
+	import { energyStore } from '$lib/store/energyStore'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$monthlyFoodStore}" />
+	<AggregatedFoodTable items="{$monthlyFoodStore}"
+	                     energyLimit="{$energyStore.limit * 30}"
+	                     energyTarget="{$energyStore.target * 30}" />
 </template>

src/lib/router/routes/Weekly.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
+	import { energyStore } from '$lib/store/energyStore'
 	import { weeklyFoodStore } from '$lib/store/weeklyFoodStore'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$weeklyFoodStore}" />
+	<AggregatedFoodTable items="{$weeklyFoodStore}"
+	                     energyLimit="{$energyStore.limit * 7}"
+	                     energyTarget="{$energyStore.target * 7}" />
 </template>

src/lib/router/routes/Yearly.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import AggregatedFoodTable from '$components/AggregatedFood/AggregatedFoodTable.svelte'
 	import { yearlyFoodStore } from '$lib/store/yearlyFoodStore'
+	import { energyStore } from '$lib/store/energyStore'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$yearlyFoodStore}" />
+	<AggregatedFoodTable items="{$yearlyFoodStore}"
+	                     energyLimit="{$energyStore.limit * 365}"
+	                     energyTarget="{$energyStore.target * 365}" />
 </template>

src/lib/store/energyStore.ts

@@ -0,0 +1,20 @@
+import { type Writable, writable } from 'svelte/store'
+
+type EnergyData = {
+	limit: number,
+	target: number
+}
+
+async function createStore(): Promise<Writable<EnergyData>> {
+	const { subscribe, update, set } = writable({
+		limit: 2500,
+		target: 2000
+	})
+	return {
+		subscribe,
+		update,
+		set
+	}
+}
+
+export const energyStore = await createStore()