Add linear regression to temporal graphs

Auto focus input element after inserting food
Improve and fix issues with color generation
2024-08-10 20:08:27 +02:00 · 2024-08-10 19:39:36 +02:00 · 2024-08-10 19:36:26 +02:00 · 2024-08-10 19:36:17 +02:00 · 2024-08-10 19:22:19 +02:00
15 changed files with 100 additions and 20 deletions
--- a/app.go
+++ b/app.go
@@ -2,6 +2,7 @@ package main

 import (
 	"context"
+	"os"
 )

 // App struct
@@ -135,3 +136,8 @@ func (a *App) SetSetting(key string, value int64) WailsGenericAck {
 	}
 	return WailsGenericAck{Success: true}
 }
+
+//region other
+func (a *App) Close() {
+	os.Exit(0)
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8"/>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>calorie-counter</title>
 </head>
+
 <body>
-<div id="app"></div>
-<script src="./src/main.ts" type="module"></script>
+    <div id="app"></div>
+    <script src="./src/main.ts" type="module"></script>
 </body>
+
 </html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,10 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"devDependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.5.2",
+		"@fortawesome/free-brands-svg-icons": "^6.5.2",
+		"@fortawesome/free-regular-svg-icons": "^6.5.2",
+		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@sveltejs/vite-plugin-svelte": "^1.0.1",
 		"@tsconfig/svelte": "^3.0.0",
 		"svelte": "^3.49.0",
@@ -21,15 +25,12 @@
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.4.0",
 		"typescript": "^4.6.4",
-		"vite": "^3.0.7",
-		"@fortawesome/fontawesome-svg-core": "^6.5.2",
-		"@fortawesome/free-brands-svg-icons": "^6.5.2",
-		"@fortawesome/free-regular-svg-icons": "^6.5.2",
-		"@fortawesome/free-solid-svg-icons": "^6.5.2"
+		"vite": "^3.0.7"
 	},
 	"dependencies": {
 		"autoprefixer": "^10.4.20",
 		"chart.js": "^4.4.3",
+		"regression": "^2.0.1",
 		"svelte-chartjs": "^3.1.5"
 	}
 }
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-bd9b801d4541f25052f0d4cb72b7d95a
+23e2cc3e28f96f9d63ed35c0a34c1dcd
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
      chart.js:
        specifier: ^4.4.3
        version: 4.4.3
+      regression:
+        specifier: ^2.0.1
+        version: 2.0.1
      svelte-chartjs:
        specifier: ^3.1.5
        version: 3.1.5(chart.js@4.4.3)(svelte@3.59.2)
@@ -714,6 +717,9 @@ packages:
    resolution: {integrity: sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==}
    engines: {node: '>=8'}

+  regression@2.0.1:
+    resolution: {integrity: sha512-A4XYsc37dsBaNOgEjkJKzfJlE394IMmUPlI/p3TTI9u3T+2a+eox5Pr/CPUqF0eszeWZJPAc6QkroAhuUpWDJQ==}
+
  resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@@ -1512,6 +1518,8 @@ snapshots:

  regexparam@2.0.2: {}

+  regression@2.0.1: {}
+
  resolve-from@4.0.0: {}

  resolve@1.22.8:
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,9 +1,30 @@
 <script lang="ts">
 	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
-	import { Toaster } from 'svelte-sonner'
+	import { Close } from "$wails/main/App";
+	import { Toaster } from "svelte-sonner";
+	import * as srouter from "svelte-spa-router";
+	import { location } from "svelte-spa-router";
+
+	function keyDown(event: KeyboardEvent) {
+		if (event.ctrlKey && event.key == "r") {
+			window.location.reload();
+		}
+		if (event.ctrlKey && event.key == "w") {
+			Close();
+		}
+		if (event.ctrlKey && event.key == "Tab") {
+			if ($location == "/") {
+				srouter.replace("/Weight");
+			} else if ($location == "/Weight") {
+				srouter.replace("/");
+			}
+		}
+	}
 </script>

+<svelte:window on:keydown={keyDown} />
+
 <Toaster />
 <template>
 	<Header />
--- a/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
+++ b/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
@@ -3,6 +3,7 @@
 	import AggregatedFoodComp from "$lib/components/Energy/Aggregated/AggregatedFoodComp.svelte";
 	import { main } from "$wails/models";
 	import type { ChartData, Point } from "chart.js";
+	import regression from "regression";
 	import {
 		CategoryScale,
 		Chart as ChartJS,
@@ -13,6 +14,7 @@
 		Title,
 		Tooltip,
 	} from "chart.js";
+	import { CalculateR2 } from "$lib/utils";

 	ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);

@@ -32,7 +34,7 @@
 		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
 		pointHoverBorderWidth: 2,
 		pointRadius: 1,
-		pointHitRadius: 10,
+		pointHitRadius: 20,
 	};
 	const data: ChartData<"line", (number | Point)[]> = {
 		labels: reversedItems.map((f) => f.period),
@@ -74,6 +76,14 @@
 			},
 		],
 	};
+	data.datasets.push({
+		...defaultOptions,
+		label: "R2",
+		data: CalculateR2(reversedItems.map((f, i) => [i, f.energy])),
+		borderColor: "#04d1d1",
+		pointBorderColor: "#04d1d1",
+		pointRadius: 0,
+	});
 </script>

 <template>
--- a/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
+++ b/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
@@ -19,6 +19,7 @@
 	let per100: string = "";
 	let per100Edited: boolean = false;
 	let per100Element: HTMLTableCellElement;
+	let nameElement: HTMLTableCellElement;

 	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
 		name = name.trim();
@@ -26,7 +27,7 @@
 		description = description.trim();
 		per100 = per100.trim();

-		if (!per100Edited && event.currentTarget === per100Element) per100Edited = true;
+		if (!per100Edited && event.currentTarget == per100Element) per100Edited = true;

 		if (event.key == "Enter") {
 			event.preventDefault();
@@ -48,6 +49,7 @@
 			}

 			foodStore.update((value) => [res.data, ...value]);
+			nameElement.focus();
 		}

 		if (!per100Edited)
@@ -75,6 +77,7 @@
 			contenteditable="true"
 			autofocus
 			on:keydown={update}
+			bind:this={nameElement}
 		>
 		</td>
 		<td
--- a/frontend/src/lib/components/Energy/FoodTable.svelte
+++ b/frontend/src/lib/components/Energy/FoodTable.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { GenerateColor } from "$lib/utils";
+	import { GenerateColor, RemoveExistingColors } from "$lib/utils";
 	import { main } from "$wails/models";
 	import EmptyFoodComp from "./EmptyFoodComp.svelte";
 	import FoodComp from "./FoodComp.svelte";

 	export let items: main.Food[] = [];
+	RemoveExistingColors();

 	let minCal = 1e5;
 	let maxCal = 0;
--- a/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
+++ b/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
@@ -13,6 +13,7 @@
 		Title,
 		Tooltip,
 	} from "chart.js";
+	import { CalculateR2 } from "$lib/utils";

 	ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);

@@ -44,6 +45,14 @@
 			},
 		],
 	};
+	data.datasets.push({
+		...defaultOptions,
+		label: "R2",
+		data: CalculateR2(reversedItems.map((f, i) => [i, f.amount])),
+		borderColor: "#04d1d1",
+		pointBorderColor: "#04d1d1",
+		pointRadius: 0,
+	});
 </script>

 <template>
--- a/frontend/src/lib/components/Weight/WeightTable.svelte
+++ b/frontend/src/lib/components/Weight/WeightTable.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { GenerateColor } from "$lib/utils";
+	import { GenerateColor, RemoveExistingColors } from "$lib/utils";
 	import EmptyWeightComp from "$components/Weight/EmptyWeightComp.svelte";
 	import WeightComp from "$components/Weight/WeightComp.svelte";
 	import { main } from "$wails/models";

 	export let items: main.Weight[] = [];
+	RemoveExistingColors();

 	const dateColors: Map<string, string> = new Map<string, string>();

--- a/frontend/src/lib/router/routes/Weight/Weight.svelte
+++ b/frontend/src/lib/router/routes/Weight/Weight.svelte
@@ -4,7 +4,6 @@

 	let forceUpdate = false;
 	weightStore.subscribe(() => {
-		console.log("updte");
 		forceUpdate = !forceUpdate;
 	});
 </script>
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,5 +1,7 @@
 import { cubicOut } from "svelte/easing";
 import type { TransitionConfig } from "svelte/transition";
+import regression from "regression";
+import type { ChartData, Point } from "chart.js";

 type FlyAndScaleParams = {
 	y?: number;
@@ -68,8 +70,11 @@ function GenerateRandomHSL(): Color {

 const existingColors: Color[] = [];

+function RemoveExistingColors() {
+	existingColors.length = 0;
+}
 function GenerateColor(): string {
-	const minDistance = 15;
+	const minDistance = 5;

 	let newColor: Color;
 	let isDistinct = false;
@@ -89,7 +94,9 @@ function GenerateColor(): string {
 				break;
 			}
 		}
-		existingColors.push(newColor);
+		if (isDistinct) {
+			existingColors.push(newColor);
+		}
 	}

 	// We can not reach this point without having a color generated
@@ -104,5 +111,10 @@ function LerpColor(color1: Color, color2: Color, t: number): Color {
 	return { h, s, l };
 }

-export { GenerateColor, LerpColor };
+function CalculateR2(input: [number, number][]): number[] {
+	const reg = regression.linear(input);
+	return reg.points.map((point: [number, number]) => point[1]);
+}
+
+export { GenerateColor, LerpColor, RemoveExistingColors, CalculateR2 };
 export type { Color };
--- a/frontend/wailsjs/go/main/App.d.ts
+++ b/frontend/wailsjs/go/main/App.d.ts
@@ -2,6 +2,8 @@
 // This file is automatically generated. DO NOT EDIT
 import {main} from '../models';

+export function Close():Promise<void>;
+
 export function CreateFood(arg1:main.Food):Promise<main.WailsFood1>;

 export function CreateWeight(arg1:main.Weight):Promise<main.WailsWeight1>;
--- a/frontend/wailsjs/go/main/App.js
+++ b/frontend/wailsjs/go/main/App.js
@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT

+export function Close() {
+  return window['go']['main']['App']['Close']();
+}
+
 export function CreateFood(arg1) {
  return window['go']['main']['App']['CreateFood'](arg1);
 }
Author	SHA1	Message	Date
PhatPhuckDave	b291fec8a0	Add linear regression to temporal graphs	2024-08-10 20:08:27 +02:00
PhatPhuckDave	d290cae3f7	Auto focus input element after inserting food	2024-08-10 19:39:36 +02:00
PhatPhuckDave	376201373e	Improve and fix issues with color generation	2024-08-10 19:36:26 +02:00
PhatPhuckDave	84002d1856	Implement ctrl-tab navigation between weight and energy	2024-08-10 19:36:17 +02:00
PhatPhuckDave	3118069297	Implement refresh on ctrl-r and close on ctrl-w	2024-08-10 19:22:19 +02:00