Add linear regression to temporal graphs

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",
+		"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"
 	},
 	"dependencies": {
 		"autoprefixer": "^10.4.20",
 		"chart.js": "^4.4.3",
+		"regression": "^2.0.1",
 		"svelte-chartjs": "^3.1.5"
 	}
 }

frontend/package.json.md5

@@ -1 +1 @@
-bd9b801d4541f25052f0d4cb72b7d95a
+23e2cc3e28f96f9d63ed35c0a34c1dcd

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:

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>

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>

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;
@@ -109,5 +111,10 @@ function LerpColor(color1: Color, color2: Color, t: number): Color {
 	return { h, s, l };
 }
 
-export { GenerateColor, LerpColor, RemoveExistingColors };
+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 };