Now one graph per stat.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3781 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2022-01-21 03:09:23 +00:00
parent 98de9b037a
commit d470d6c398
2 changed files with 28 additions and 14 deletions

View File

@ -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]);
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]);
}
}
}

View File

@ -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>