cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Now one graph per stat.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/client.js
View File

@ -8,8 +8,7 @@ var gFiles = {};
var gApp = {files: {}}; var gApp = {files: {}};
var gEditor; var gEditor;
var gSplit; var gSplit;
var gStats = {}; var gGraphs = {};
var gGraph;
var kErrorColor = "#dc322f"; var kErrorColor = "#dc322f";
var kStatusColor = "#fff"; var kStatusColor = "#fff";
@ -159,9 +158,6 @@ function stats() {
closeEditor(); closeEditor();
gSplit = Split(['#statsPane', '#viewPane'], {minSize: 0}); gSplit = Split(['#statsPane', '#viewPane'], {minSize: 0});
document.getElementById("statsPane").style.display = 'flex'; 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) { function guessMode(name) {
@ -453,15 +449,33 @@ function receive(message) {
} }
console.log('error', message); console.log('error', message);
} else if (message && message.action == "stats") { } else if (message && message.action == "stats") {
if (gGraph) {
var now = new Date().getTime(); var now = new Date().getTime();
for (var key of Object.keys(message.stats)) { for (var key of Object.keys(message.stats)) {
if (!gStats[key]) { if (!gGraphs[key]) {
gStats[key] = new TimeSeries(); var graph = {
gGraph.addTimeSeries(gStats[key]); chart: new SmoothieChart({
} grid: {
gStats[key].append(now, message.stats[key]); 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]);
} }
} }
} }

2
core/index.html
View File

@ -47,7 +47,7 @@
<div class="hbox"> <div class="hbox">
<input type="button" id="closeStats" name="closeStats" value="Close" onclick="closeStats()"> <input type="button" id="closeStats" name="closeStats" value="Close" onclick="closeStats()">
</div> </div>
<canvas id="graph" width="320" height="240"></canvas> <div id="graphs"></div>
</div> </div>
<div id="viewPane" class="vbox" style="flex: 1 0 50%; overflow: auto"> <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> <iframe id="document" sandbox="allow-forms allow-scripts allow-top-navigation allow-modals" style="width: 100%; height: 100%; border: 0"></iframe>