From 3adeb4d1ab09b53731acf5083e8c1a1234c8426c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Majdand=C5=BEi=C4=87?=
 <david.majdandzic@hotmail.com>
Date: Thu, 13 Jun 2024 18:56:07 +0200
Subject: [PATCH] Implement weight graphs

---
 .../Aggregated/AggregatedWeightComp.svelte    | 17 ++++
 .../Aggregated/AggregatedWeightTable.svelte   | 85 +++++++++++++++++++
 .../components/Weight/EmptyWeightComp.svelte  |  2 +-
 src/lib/router/routes/Weight/WDaily.svelte    |  9 +-
 src/lib/router/routes/Weight/WMonthly.svelte  |  9 +-
 src/lib/router/routes/Weight/WWeekly.svelte   |  9 +-
 src/lib/router/routes/Weight/WYearly.svelte   |  9 +-
 7 files changed, 115 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte
 create mode 100644 src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte

diff --git a/src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte b/src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte
new file mode 100644
index 0000000..38bfba6
--- /dev/null
+++ b/src/lib/components/Weight/Aggregated/AggregatedWeightComp.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { AggregatedWeight } from '$lib/database/weight'
+
+	export let item: 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>
diff --git a/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte b/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
new file mode 100644
index 0000000..1b86ac3
--- /dev/null
+++ b/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
@@ -0,0 +1,85 @@
+<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 {
+		CategoryScale,
+		Chart as ChartJS,
+		Legend,
+		LinearScale,
+		LineElement,
+		PointElement,
+		Title,
+		Tooltip
+	} from 'chart.js'
+	import type { AggregatedWeight } from '$lib/database/weight'
+	import AggregatedWeightComp from '$components/Weight/Aggregated/AggregatedWeightComp.svelte'
+
+	ChartJS.register(
+		Title,
+		Tooltip,
+		Legend,
+		LineElement,
+		LinearScale,
+		PointElement,
+		CategoryScale
+	)
+
+	export let items: 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',
+			},
+		]
+	}
+	console.log('aaaaaaaaaa')
+</script>
+
+<template>
+	<Line data="{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>
diff --git a/src/lib/components/Weight/EmptyWeightComp.svelte b/src/lib/components/Weight/EmptyWeightComp.svelte
index 8da8e67..8e96319 100644
--- a/src/lib/components/Weight/EmptyWeightComp.svelte
+++ b/src/lib/components/Weight/EmptyWeightComp.svelte
@@ -15,7 +15,7 @@
 
 		if (event.key == 'Enter') {
 			event.preventDefault()
-			item.weight = parseInt(weight)
+			item.weight = parseFloat(weight)
 
 			const [dbRow, err]: [Weight, Err] = await WeightService.Create(item)
 			weight = ''
diff --git a/src/lib/router/routes/Weight/WDaily.svelte b/src/lib/router/routes/Weight/WDaily.svelte
index 72966c6..1d2fd73 100644
--- a/src/lib/router/routes/Weight/WDaily.svelte
+++ b/src/lib/router/routes/Weight/WDaily.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { dailyFoodStore } from '$lib/store/energy/dailyFoodStore'
-	import { energyStore } from '$lib/store/energy/energyStore'
+	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
+	import { dailyWeightStore } from '$lib/store/weight/dailyWeightStore'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$dailyFoodStore}"
-	                     energyLimit="{$energyStore.limit}"
-	                     energyTarget="{$energyStore.target}" />
+	<AggregatedWeightTable items="{$dailyWeightStore}" />
 </template>
diff --git a/src/lib/router/routes/Weight/WMonthly.svelte b/src/lib/router/routes/Weight/WMonthly.svelte
index 926b123..420d325 100644
--- a/src/lib/router/routes/Weight/WMonthly.svelte
+++ b/src/lib/router/routes/Weight/WMonthly.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { monthlyFoodStore } from '$lib/store/energy/monthlyFoodStore'
-	import { energyStore } from '$lib/store/energy/energyStore'
+	import { monthlyWeightStore } from '$lib/store/weight/monthlyWeightStore'
+	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$monthlyFoodStore}"
-	                     energyLimit="{$energyStore.limit * 30}"
-	                     energyTarget="{$energyStore.target * 30}" />
+	<AggregatedWeightTable items="{$monthlyWeightStore}" />
 </template>
diff --git a/src/lib/router/routes/Weight/WWeekly.svelte b/src/lib/router/routes/Weight/WWeekly.svelte
index 7fa227f..0519dd0 100644
--- a/src/lib/router/routes/Weight/WWeekly.svelte
+++ b/src/lib/router/routes/Weight/WWeekly.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { energyStore } from '$lib/store/energy/energyStore'
-	import { weeklyFoodStore } from '$lib/store/energy/weeklyFoodStore'
+	import { weeklyWeightStore } from '$lib/store/weight/weeklyWeightStore'
+	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$weeklyFoodStore}"
-	                     energyLimit="{$energyStore.limit * 7}"
-	                     energyTarget="{$energyStore.target * 7}" />
+	<AggregatedWeightTable items="{$weeklyWeightStore}" />
 </template>
diff --git a/src/lib/router/routes/Weight/WYearly.svelte b/src/lib/router/routes/Weight/WYearly.svelte
index 8755e0c..575bdca 100644
--- a/src/lib/router/routes/Weight/WYearly.svelte
+++ b/src/lib/router/routes/Weight/WYearly.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
-	import { yearlyFoodStore } from '$lib/store/energy/yearlyFoodStore'
-	import { energyStore } from '$lib/store/energy/energyStore'
+	import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
+	import { yearlyWeightStore } from '$lib/store/weight/yearlyWeightStore'
 </script>
 
 <template>
-	<AggregatedFoodTable items="{$yearlyFoodStore}"
-	                     energyLimit="{$energyStore.limit * 365}"
-	                     energyTarget="{$energyStore.target * 365}" />
+	<AggregatedWeightTable items="{yearlyWeightStore}" />
 </template>