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"> <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> </script>
<template> <template>

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

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { Line } from 'svelte-chartjs' import { Line } from "svelte-chartjs";
import type { AggregatedFood } from '$lib/database/food' import AggregatedFoodComp from "$components/Energy/AggregatedFood/AggregatedFoodComp.svelte";
import AggregatedFoodComp from '$components/Energy/AggregatedFood/AggregatedFoodComp.svelte' import { main } from "$wails/models";
import type { ChartData, Point } from 'chart.js' import type { ChartData, Point } from "chart.js";
import { import {
CategoryScale, CategoryScale,
Chart as ChartJS, Chart as ChartJS,
@@ -10,109 +10,92 @@
LinearScale, LinearScale,
LineElement, LineElement,
PointElement, PointElement,
Title,
Tooltip
} from 'chart.js'
ChartJS.register(
Title, Title,
Tooltip, Tooltip,
Legend, } from "chart.js";
LineElement,
LinearScale,
PointElement,
CategoryScale
)
export let items: AggregatedFood[] = [] ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
export let energyTarget: number = 2000
export let energyLimit: number = 2500 export let items: main.AggregatedFood[] = [];
let reversedItems = items.slice().reverse() export let energyTarget: number = 2000;
export let energyLimit: number = 2500;
let reversedItems = items.slice().reverse();
const defaultOptions = { const defaultOptions = {
backgroundColor: 'rgba(225, 204,230, .3)', backgroundColor: "rgba(225, 204,230, .3)",
borderColor: 'rgb(205, 130, 158)', borderColor: "rgb(205, 130, 158)",
pointBorderColor: 'rgb(205, 130, 158)', pointBorderColor: "rgb(205, 130, 158)",
pointBackgroundColor: 'rgb(255, 255, 255)', pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10, pointBorderWidth: 10,
pointHoverRadius: 5, pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(0, 157, 123)', pointHoverBackgroundColor: "rgb(0, 157, 123)",
pointHoverBorderColor: 'rgba(220, 220, 220, 1)', pointHoverBorderColor: "rgba(220, 220, 220, 1)",
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10 pointHitRadius: 10,
} };
const data: ChartData<'line', (number | Point)[]> = { const data: ChartData<"line", (number | Point)[]> = {
labels: reversedItems.map(f => f.period), labels: reversedItems.map((f) => f.period),
datasets: [ datasets: [
{ {
...defaultOptions, ...defaultOptions,
label: 'Amount', label: "Amount",
data: reversedItems.map(f => f.amount), data: reversedItems.map((f) => f.amount),
borderColor: '#ff4dff', borderColor: "#ff4dff",
pointBorderColor: '#ff4dff', pointBorderColor: "#ff4dff",
}, },
{ {
...defaultOptions, ...defaultOptions,
label: 'AvgPer100', label: "AvgPer100",
data: reversedItems.map(f => f.avgPer100), data: reversedItems.map((f) => f.avgPer100),
borderColor: '#ffb84d', borderColor: "#ffb84d",
pointBorderColor: '#ffb84d', pointBorderColor: "#ffb84d",
}, },
{ {
...defaultOptions, ...defaultOptions,
label: 'Energy', label: "Energy",
data: reversedItems.map(f => f.energy), data: reversedItems.map((f) => f.energy),
borderColor: '#b8ff4d', borderColor: "#b8ff4d",
pointBorderColor: '#b8ff4d', pointBorderColor: "#b8ff4d",
}, },
{ {
...defaultOptions, ...defaultOptions,
label: 'Target', label: "Target",
data: reversedItems.map(f => energyTarget), data: reversedItems.map((f) => energyTarget),
borderColor: '#00ff00', borderColor: "#00ff00",
pointBorderColor: '#00ff00', pointBorderColor: "#00ff00",
}, },
{ {
...defaultOptions, ...defaultOptions,
label: 'Limit', label: "Limit",
data: reversedItems.map(f => energyLimit), data: reversedItems.map((f) => energyLimit),
borderColor: '#ff0000', borderColor: "#ff0000",
pointBorderColor: '#ff0000', pointBorderColor: "#ff0000",
} },
] ],
} };
</script> </script>
<template> <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 flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg"> <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"> <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"> <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr> <tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> <th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
Period <th class="px-6 py-3" scope="col"> Amount </th>
</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"> <th class="px-6 py-3" scope="col"> Energy </th>
Amount </tr>
</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> </thead>
<tbody> <tbody>
{#each items as f} {#each items as f}
<AggregatedFoodComp item="{f}" /> <AggregatedFoodComp item={f} />
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<div> <div></div>
</div>
</div> </div>
</template> </template>

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

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

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { settingsStore } from "$lib/store/SettingsStore"; import { settingsStore } from "$lib/store/settingsStore";
import { SetSetting } from "$wails/main/App"; import { SetSetting } from "$wails/main/App";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { settingsStore } from "$lib/store/SettingsStore"; import { settingsStore } from "$lib/store/settingsStore";
import Modal from "../Modal.svelte"; import Modal from "../Modal.svelte";
import Setting from "./Setting.svelte"; import Setting from "./Setting.svelte";

11
frontend/src/lib/router/routes/Daily.svelte
View File

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

11
frontend/src/lib/router/routes/Monthly.svelte
View File

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

11
frontend/src/lib/router/routes/Weekly.svelte
View File

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

11
frontend/src/lib/router/routes/Yearly.svelte
View File

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

2
frontend/src/lib/store/Energy/dailyFoodStore.ts
View File

@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { GetDailyFood } from "$wails/main/App"; import { GetDailyFood } from "$wails/main/App";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { settingsStore } from "../SettingsStore"; import { settingsStore } from "../settingsStore";
async function createStore(): Promise<Writable<main.AggregatedFood[]>> { async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
let foods: main.AggregatedFood[] = []; let foods: main.AggregatedFood[] = [];

4
frontend/src/lib/store/Energy/foodStore.ts
View File

@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { GetFood } from "$wails/main/App"; import { GetFood } from "$wails/main/App";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { settingsStore } from "../SettingsStore"; import { settingsStore } from "../settingsStore";
async function createStore(): Promise<Writable<main.Food[]>> { async function createStore(): Promise<Writable<main.Food[]>> {
let foods: main.Food[] = []; let foods: main.Food[] = [];
@@ -36,4 +36,4 @@ settingsStore.subscribe((settings) => {
foodStore.refresh(); foodStore.refresh();
}); });
export {foodStore} export { foodStore };

2
frontend/src/lib/store/Energy/monthlyFoodStore.ts
View File

@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { GetMonthlyFood } from "$wails/main/App"; import { GetMonthlyFood } from "$wails/main/App";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { settingsStore } from "../SettingsStore"; import { settingsStore } from "../settingsStore";
async function createStore(): Promise<Writable<main.AggregatedFood[]>> { async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
let foods: main.AggregatedFood[] = []; let foods: main.AggregatedFood[] = [];

2
frontend/src/lib/store/Energy/weeklyFoodStore.ts
View File

@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { GetWeeklyFood } from "$wails/main/App"; import { GetWeeklyFood } from "$wails/main/App";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { settingsStore } from "../SettingsStore"; import { settingsStore } from "../settingsStore";
async function createStore(): Promise<Writable<main.AggregatedFood[]>> { async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
let foods: main.AggregatedFood[] = []; let foods: main.AggregatedFood[] = [];

2
frontend/src/lib/store/Energy/yearlyFoodStore.ts
View File

@@ -2,7 +2,7 @@ import { type Writable, writable } from "svelte/store";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { GetYearlyFood } from "$wails/main/App"; import { GetYearlyFood } from "$wails/main/App";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { settingsStore } from "../SettingsStore"; import { settingsStore } from "../settingsStore";
async function createStore(): Promise<Writable<main.AggregatedFood[]>> { async function createStore(): Promise<Writable<main.AggregatedFood[]>> {
let foods: main.AggregatedFood[] = []; let foods: main.AggregatedFood[] = [];