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 · 2024-08-10 14:03:20 +02:00
21 changed files with 215 additions and 30 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/db.go
+++ b/db.go
@@ -3,6 +3,7 @@ package main
 import (
 	"database/sql"
 	"fmt"
+	"log"
 	"time"

 	_ "github.com/mattn/go-sqlite3"
@@ -44,6 +45,58 @@ func (db *DB) Open() error {
 	return nil
 }

+func (db *DB) Init(ddl string) error {
+	if !db.Ready {
+		return fmt.Errorf("database not ready")
+	}
+
+	var rows map[string]struct{} = make(map[string]struct{})
+	// TODO: Maybe make this better one day...
+	var expected = map[string]struct{}{
+		"food":     {},
+		"weight":   {},
+		"settings": {},
+	}
+
+	res, err := db.readConn.Query("SELECT name FROM sqlite_master WHERE type='table';")
+	if err != nil {
+		Error.Printf("%++v", err)
+		return err
+	}
+	defer res.Close()
+	for res.Next() {
+		var name string
+		err := res.Scan(&name)
+		if err != nil {
+			Error.Printf("%++v", err)
+			return err
+		}
+		rows[name] = struct{}{}
+	}
+
+	var needsInit bool
+	for table := range expected {
+		if _, ok := rows[table]; !ok {
+			log.Printf("Table %s not found, initializing", table)
+			needsInit = true
+			break;
+		}
+	}
+
+	if !needsInit {
+		log.Printf("Database already initialized")
+		return nil
+	}
+
+	_, err = db.writeConn.Exec(ddl)
+	if err != nil {
+		Error.Printf("%++v", err)
+		return err
+	}
+
+	return nil
+}
+
 func (db *DB) Close() error {
 	err := db.writeConn.Close()
 	if err != nil {
--- a/food.ddl
+++ b/food.ddl
@@ -5,7 +5,6 @@ create table weight (
 	weight real not null
 );

-
 create index weightDateIdx on weight(date);
 create index weightDailyIdx on weight(strftime('%Y-%m-%d', date));
 create index weightWeeklyIdx on weight(strftime('%Y-%W', date));
--- 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" />
    <title>calorie-counter</title>
 </head>
+
 <body>
    <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/EnergyToday.svelte
+++ b/frontend/src/lib/components/Energy/EnergyToday.svelte
@@ -34,9 +34,10 @@
 		remainingToday = $settingsStore.target;
 		let now = new Date();
 		let todayDate = formatter.format(now);
-		const [day, month, year] = todayDate.split('/');
+		const [day, month, year] = todayDate.split("/");
 		todayDate = `${year}-${month}-${day}`;

+		if ($foodStore) {
 			$foodStore.forEach((food) => {
 				if (food.date.split("T")[0] == todayDate) {
 					remainingToday -= food.energy;
@@ -44,6 +45,7 @@
 					return;
 				}
 			});
+		}
 		remainingToday = Math.round(remainingToday);
 		computeColor();
 	}
--- 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/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -4,6 +4,7 @@
 	import Fa from "svelte-fa";
 	import Settings from "./Settings/Settings.svelte";
 	import EnergyToday from "./Energy/EnergyToday.svelte";
+	import RefreshComponent from "./RefreshComponent.svelte";
 	Fa;

 	type Link = {
@@ -88,6 +89,7 @@
 			<Fa icon={faGear} scale={2} />
 		</button>
 	</div>
+	<RefreshComponent />
 	<EnergyToday />
 </header>

--- a/frontend/src/lib/components/RefreshComponent.svelte
+++ b/frontend/src/lib/components/RefreshComponent.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { dailyFoodStore } from "$lib/store/Energy/dailyFoodStore";
+	import { monthlyFoodStore } from "$lib/store/Energy/monthlyFoodStore";
+	import { weeklyFoodStore } from "$lib/store/Energy/weeklyFoodStore";
+	import { yearlyFoodStore } from "$lib/store/Energy/yearlyFoodStore";
+	import { dailyWeightStore } from "$lib/store/Weight/dailyWeightStore";
+	import { monthlyWeightStore } from "$lib/store/Weight/monthlyWeightStore";
+	import { weeklyWeightStore } from "$lib/store/Weight/weeklyWeightStore";
+	import { yearlyWeightStore } from "$lib/store/Weight/yearlyWeightStore";
+	import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+	import Fa from "svelte-fa";
+	Fa;
+
+	// YES refresh DOES exist FFS
+	function refreshStores() {
+		// @ts-ignore
+		dailyFoodStore.refresh();
+		// @ts-ignore
+		weeklyFoodStore.refresh();
+		// @ts-ignore
+		monthlyFoodStore.refresh();
+		// @ts-ignore
+		yearlyFoodStore.refresh();
+		// @ts-ignore
+		dailyWeightStore.refresh();
+		// @ts-ignore
+		weeklyWeightStore.refresh();
+		// @ts-ignore
+		monthlyWeightStore.refresh();
+		// @ts-ignore
+		yearlyWeightStore.refresh();
+	}
+</script>
+
+<template>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="absolute right-20 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={refreshStores}>
+		<button>
+			<Fa icon={faRefresh} scale={2} />
+		</button>
+	</div>
+</template>
--- 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,8 +94,10 @@ function GenerateColor(): string {
 				break;
 			}
 		}
+		if (isDistinct) {
 			existingColors.push(newColor);
 		}
+	}

 	// We can not reach this point without having a color generated
 	// @ts-ignore
@@ -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);
 }
--- a/main.go
+++ b/main.go
@@ -7,6 +7,7 @@ import (
 	"io"
 	"log"
 	"os"
+	_ "embed"

 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
@@ -39,7 +40,11 @@ var (
 	weightService   *WeightService
 )

+//go:embed food.ddl
+var foodDDL string
+
 // TODO: Embed food.ddl and create DB if no exists
+// TODO: Add averages to graphs (ie. R2) https://stackoverflow.com/questions/60622195/how-to-draw-a-linear-regression-line-in-chart-js
 func main() {
 	dbpath := flag.String("db", "food.db", "Path to the database file")
 	flag.Parse()
@@ -50,6 +55,8 @@ func main() {
 		Error.Printf("%++v", err)
 		os.Exit(1)
 	}
+	defer db.Close()
+	db.Init(foodDDL)

 	settingsService = &SettingsService{db: &db}
 	err = settingsService.LoadSettings()
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
PhatPhuckDave	80fb660677	Add refresh button for aggregate stores	2024-08-10 14:03:20 +02:00
PhatPhuckDave	de461cb031	Fix issue with crashing when having no entries today	2024-08-10 13:51:04 +02:00
PhatPhuckDave	6d684b34ef	Implement DB auto init	2024-08-10 01:03:11 +02:00
PhatPhuckDave	35ca7620f4	Fix DB not closing on exit	2024-08-10 00:43:53 +02:00