Implement weight graphs

frontend/src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import {main} from '$wails/models'
+
+	export let item: main.AggregatedWeight
+</script>
+
+<template>
+	<tr class="border-b border-gray-200 dark:border-gray-700">
+		<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+		    scope="row">
+			{item.period}
+		</th>
+		<td class="px-6 py-4">
+			{item.amount}
+		</td>
+	</tr>
+</template>

frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { Line } from "svelte-chartjs";
+	import { main } from "$wails/models";
+	import type { ChartData, Point } from "chart.js";
+	import AggregatedWeightComp from "$components/Weight/Aggregated/AggregatedWeightComp.svelte";
+	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.AggregatedWeight[] = [];
+	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",
+			},
+		],
+	};
+</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>
+					</tr>
+				</thead>
+				<tbody>
+					{#each items as f}
+						<AggregatedWeightComp item={f} />
+					{/each}
+				</tbody>
+			</table>
+		</div>
+		<div></div>
+	</div>
+</template>