From d470d6c3981a98cf1e46acbdbe86c4a3ebbaa498 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Fri, 21 Jan 2022 03:09:23 +0000
Subject: [PATCH] Now one graph per stat.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3781 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js  | 40 +++++++++++++++++++++++++++-------------
 core/index.html |  2 +-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/core/client.js b/core/client.js
index 71ea3f3a..bfde453f 100644
--- a/core/client.js
+++ b/core/client.js
@@ -8,8 +8,7 @@ var gFiles = {};
 var gApp = {files: {}};
 var gEditor;
 var gSplit;
-var gStats = {};
-var gGraph;
+var gGraphs = {};
 
 var kErrorColor = "#dc322f";
 var kStatusColor = "#fff";
@@ -159,9 +158,6 @@ function stats() {
 	closeEditor();
 	gSplit = Split(['#statsPane', '#viewPane'], {minSize: 0});
 	document.getElementById("statsPane").style.display = 'flex';
-	gGraph = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 10000, verticalSections: 6 } });
-	gStats = {};
-	gGraph.streamTo(document.getElementById('graph'), 10000);
 }
 
 function guessMode(name) {
@@ -453,15 +449,33 @@ function receive(message) {
 		}
 		console.log('error', message);
 	} else if (message && message.action == "stats") {
-		if (gGraph) {
-			var now = new Date().getTime();
-			for (var key of Object.keys(message.stats)) {
-				if (!gStats[key]) {
-					gStats[key] = new TimeSeries();
-					gGraph.addTimeSeries(gStats[key]);
-				}
-				gStats[key].append(now, message.stats[key]);
+		var now = new Date().getTime();
+		for (var key of Object.keys(message.stats)) {
+			if (!gGraphs[key]) {
+				var graph = {
+					chart: new SmoothieChart({
+							grid: {
+								strokeStyle: 'rgb(125, 0, 0)',
+								fillStyle: 'rgb(60, 0, 0)',
+								lineWidth: 1,
+								millisPerLine: 15000,
+								verticalSections: 6,
+							},
+						}),
+					canvas: document.createElement('canvas'),
+					timeseries: new TimeSeries(),
+				};
+				gGraphs[key] = graph;
+				graph.canvas.width = '320';
+				graph.canvas.width = '240';
+				var div = document.createElement('div');
+				div.innerText = key;
+				document.getElementById('graphs').appendChild(div);
+				document.getElementById('graphs').appendChild(graph.canvas);
+				graph.chart.streamTo(graph.canvas, 1000);
+				graph.chart.addTimeSeries(graph.timeseries);
 			}
+			gGraphs[key].timeseries.append(now, message.stats[key]);
 		}
 	}
 }
diff --git a/core/index.html b/core/index.html
index 5f7eaf89..35105e8d 100644
--- a/core/index.html
+++ b/core/index.html
@@ -47,7 +47,7 @@
 				<div class="hbox">
 					<input type="button" id="closeStats" name="closeStats" value="Close" onclick="closeStats()">
 				</div>
-				<canvas id="graph" width="320" height="240"></canvas>
+				<div id="graphs"></div>
 			</div>
 			<div id="viewPane" class="vbox" style="flex: 1 0 50%; overflow: auto">
 				<iframe id="document" sandbox="allow-forms allow-scripts allow-top-navigation allow-modals" style="width: 100%; height: 100%; border: 0"></iframe>