From cf61e687137fce6fa1438259ff2a78ee441588cf Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 4 Jun 2022 16:38:45 +0000
Subject: [PATCH] Spruced up the graphs.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3891 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js | 64 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 10 deletions(-)

diff --git a/core/client.js b/core/client.js
index 7cf81cfe..fc7a9596 100644
--- a/core/client.js
+++ b/core/client.js
@@ -9,6 +9,7 @@ var gApp = {files: {}};
 var gEditor;
 var gSplit;
 var gGraphs = {};
+var gTimeSeries = {};
 var gParentApp;
 
 var kErrorColor = "#dc322f";
@@ -427,8 +428,27 @@ function receive(message) {
 	} else if (message && message.action == "stats") {
 		var now = new Date().getTime();
 		for (var key of Object.keys(message.stats)) {
-			if (!gGraphs[key]) {
-				var graph = {
+			const k_groups = {
+				rpc_in: {group: 'rpc', name: 'in'},
+				rpc_out: {group: 'rpc', name: 'out'},
+
+				memory_percent: {group: 'memory', name: 'total'},
+				js_malloc_percent: {group: 'memory', name: 'js'},
+				sqlite3_memory_percent: {group: 'memory', name: 'sql'},
+				tls_malloc_percent: {group: 'memory', name: 'tls'},
+				uv_malloc_percent: {group: 'memory', name: 'uv'},
+
+				socket_count: {group: 'socket', name: 'total'},
+				socket_open_count: {group: 'socket', name: 'open'},
+
+				import_count: {group: 'functions', name: 'imports'},
+				export_count: {group: 'functions', name: 'exports'},
+			};
+			const k_colors = ['#0f0', '#88f', '#ff0', '#f0f', '#0ff'];
+			let graph_key = k_groups[key]?.group || key;
+			let graph = gGraphs[graph_key];
+			if (!graph) {
+				graph = {
 					chart: new SmoothieChart({
 							millisPerPixel: 100,
 							minValue: 0,
@@ -436,22 +456,46 @@ function receive(message) {
 								millisPerLine: 1000,
 								verticalSections: 10,
 							},
+							tooltip: true,
 						}),
 					canvas: document.createElement('canvas'),
-					timeseries: new TimeSeries(),
+					title: document.createElement('div'),
+					series: [],
 				};
-				gGraphs[key] = graph;
+				gGraphs[graph_key] = graph;
 				graph.canvas.width = 240;
 				graph.canvas.height = 64;
-				var div = document.createElement('div');
-				div.innerText = key;
-				div.style.flex = '0';
-				document.getElementById('graphs').appendChild(div);
+				graph.title.innerText = graph_key;
+				graph.title.style.flex = '0';
+				document.getElementById('graphs').appendChild(graph.title);
 				document.getElementById('graphs').appendChild(graph.canvas);
 				graph.chart.streamTo(graph.canvas, 1000);
-				graph.chart.addTimeSeries(graph.timeseries, {lineWidth: 2});
 			}
-			gGraphs[key].timeseries.append(now, message.stats[key]);
+
+			let timeseries = gTimeSeries[key];
+			if (!timeseries) {
+				let is_multi = key != graph_key || graph.series.length > 1;
+				timeseries = new TimeSeries();
+				gTimeSeries[key] = timeseries;
+				graph.chart.addTimeSeries(timeseries, {lineWidth: 2, strokeStyle: is_multi ? k_colors[graph.series.length] : '#fff'});
+				graph.series.push(k_groups[key]?.name || key);
+				if (is_multi) {
+					while (graph.title.firstChild) {
+						graph.title.removeChild(graph.title.firstChild);
+					}
+					function makeColoredText(text, color) {
+						let element = document.createElement('span');
+						element.style.color = color;
+						element.innerText = text;
+						return element;
+					}
+					graph.title.appendChild(makeColoredText(graph_key + ':', '#fff'));
+					for (let series of graph.series) {
+						graph.title.appendChild(makeColoredText(' ' + series, k_colors[graph.series.indexOf(series)]));
+					}
+				}
+			}
+			timeseries.append(now, message.stats[key]);
 		}
 	}
 }