From 10c0e28ecdf60b7ba71da72ef3bf4fc64feb9dda Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Fri, 2 Aug 2024 18:29:36 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88=20Updates=20system=20metric=20char?=
 =?UTF-8?q?ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/stores/analytics.ts               |  5 ++++
 .../system/metrics/SystemMetrics.svelte       | 30 +++++++------------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/src/lib/stores/analytics.ts b/app/src/lib/stores/analytics.ts
index f00f8b2..14c8299 100644
--- a/app/src/lib/stores/analytics.ts
+++ b/app/src/lib/stores/analytics.ts
@@ -5,6 +5,7 @@ let analytics_data = {
 	uptime: <number[]>[],
 	free_heap: <number[]>[],
 	total_heap: <number[]>[],
+	used_heap: <number[]>[],
 	min_free_heap: <number[]>[],
 	max_alloc_heap: <number[]>[],
 	fs_used: <number[]>[],
@@ -30,6 +31,10 @@ function createAnalytics() {
 				total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
 					-maxAnalyticsData
 				),
+				used_heap: [
+					...analytics_data.used_heap,
+					(content.total_heap - content.free_heap) / 1000
+				].slice(-maxAnalyticsData),
 				min_free_heap: [...analytics_data.min_free_heap, content.min_free_heap / 1000].slice(
 					-maxAnalyticsData
 				),
diff --git a/app/src/routes/system/metrics/SystemMetrics.svelte b/app/src/routes/system/metrics/SystemMetrics.svelte
index e819964..74d9cd9 100644
--- a/app/src/routes/system/metrics/SystemMetrics.svelte
+++ b/app/src/routes/system/metrics/SystemMetrics.svelte
@@ -69,7 +69,7 @@
 				},
 				elements: {
 					point: {
-						radius: 1
+						radius: 0
 					}
 				},
 				scales: {
@@ -111,19 +111,12 @@
 				labels: $analytics.uptime,
 				datasets: [
 					{
-						label: 'Free Heap',
+						label: 'Used Heap',
 						borderColor: daisyColor('--p'),
 						backgroundColor: daisyColor('--p', 50),
 						borderWidth: 2,
-						data: $analytics.free_heap,
-						yAxisID: 'y'
-					},
-					{
-						label: 'Max Alloc Heap',
-						borderColor: daisyColor('--s'),
-						backgroundColor: daisyColor('--s', 50),
-						borderWidth: 2,
-						data: $analytics.max_alloc_heap,
+						data: $analytics.used_heap,
+                        fill:true,
 						yAxisID: 'y'
 					}
 				]
@@ -142,7 +135,7 @@
 				},
 				elements: {
 					point: {
-						radius: 1
+						radius: 0
 					}
 				},
 				scales: {
@@ -189,6 +182,7 @@
 						backgroundColor: daisyColor('--p', 50),
 						borderWidth: 2,
 						data: $analytics.fs_used,
+                        fill:true,
 						yAxisID: 'y'
 					}
 				]
@@ -207,7 +201,7 @@
 				},
 				elements: {
 					point: {
-						radius: 1
+						radius: 0
 					}
 				},
 				scales: {
@@ -272,7 +266,7 @@
 				},
 				elements: {
 					point: {
-						radius: 1
+						radius: 0
 					}
 				},
 				scales: {
@@ -308,9 +302,7 @@
 				}
 			}
 		});
-		setInterval(() => {
-			updateData(), 2000;
-		});
+		setInterval(updateData, 500);
 	});
 
 	function updateData() {
@@ -321,8 +313,8 @@
 		cpuChart.update('none');
 
 		heapChart.data.labels = $analytics.uptime;
-		heapChart.data.datasets[0].data = $analytics.free_heap;
-		heapChart.data.datasets[1].data = $analytics.max_alloc_heap;
+		heapChart.data.datasets[0].data = $analytics.used_heap;
+		heapChart.options.scales.y.max = Math.max($analytics.total_heap[0]);
 		heapChart.update('none');
 
 		filesystemChart.data.labels = $analytics.uptime;