cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

Spruced up the graphs.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3891 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2022-06-04 16:38:45 +00:00
parent 7b53c95832
commit cf61e68713
1 changed files with 54 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
core/client.js
View File

@ -9,6 +9,7 @@ var gApp = {files: {}};
var gEditor; var gEditor;
var gSplit; var gSplit;
var gGraphs = {}; var gGraphs = {};
var gTimeSeries = {};
var gParentApp; var gParentApp;
var kErrorColor = "#dc322f"; var kErrorColor = "#dc322f";
@ -427,8 +428,27 @@ function receive(message) {
} else if (message && message.action == "stats") { } else if (message && message.action == "stats") {
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 (!gGraphs[key]) { const k_groups = {
var graph = { 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({ chart: new SmoothieChart({
millisPerPixel: 100, millisPerPixel: 100,
minValue: 0, minValue: 0,
@ -436,22 +456,46 @@ function receive(message) {
millisPerLine: 1000, millisPerLine: 1000,
verticalSections: 10, verticalSections: 10,
}, },
tooltip: true,
}), }),
canvas: document.createElement('canvas'), 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.width = 240;
graph.canvas.height = 64; graph.canvas.height = 64;
var div = document.createElement('div'); graph.title.innerText = graph_key;
div.innerText = key; graph.title.style.flex = '0';
div.style.flex = '0'; document.getElementById('graphs').appendChild(graph.title);
document.getElementById('graphs').appendChild(div);
document.getElementById('graphs').appendChild(graph.canvas); document.getElementById('graphs').appendChild(graph.canvas);
graph.chart.streamTo(graph.canvas, 1000); 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]);
} }
} }
} }