diff --git a/frontend/package.json b/frontend/package.json index 6e11a0b..7e5583e 100644 --- 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" } } diff --git a/frontend/package.json.md5 b/frontend/package.json.md5 index d0ba65c..cdea2f0 100644 --- a/frontend/package.json.md5 +++ b/frontend/package.json.md5 @@ -1 +1 @@ -bd9b801d4541f25052f0d4cb72b7d95a \ No newline at end of file +23e2cc3e28f96f9d63ed35c0a34c1dcd \ No newline at end of file diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 2ecb9f7..521376c 100644 --- 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: diff --git a/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte b/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte index fca1f04..90b566d 100644 --- 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, + });