📈 Updates system metric charts

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
 				),

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;