dave/calorie-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

Implement graphs for average energy values

Browse Source
This commit is contained in:
PhatPhuckDave
2024-08-09 22:36:34 +02:00
parent fce5b8416e
commit a83dc54713
14 changed files with 98 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodComp.svelte
View File

@@ -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>

127
frontend/src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte
View File

@@ -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>
</tr>
<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}
{#each items as f}
<AggregatedFoodComp item={f} />
{/each}
</tbody>
</table>
</div>
<div>
</div>
<div></div>
</div>
</template>

2
frontend/src/lib/components/Header.svelte
View File

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

2
frontend/src/lib/components/Settings/Setting.svelte
View File

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

2
frontend/src/lib/components/Settings/Settings.svelte
View File

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