Refactor food components

frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { Line } from "svelte-chartjs";
+	import AggregatedFoodComp from "$lib/components/Energy/Aggregated/AggregatedFoodComp.svelte";
+	import { main } from "$wails/models";
+	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: 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)",
+		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} 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>
+				</thead>
+				<tbody>
+					{#each items as f}
+						<AggregatedFoodComp item={f} />
+					{/each}
+				</tbody>
+			</table>
+		</div>
+		<div></div>
+	</div>
+</template>