cory/tildefriends
4
5
Fork 1
Code Issues 31 Pull Requests 1 Actions Releases 24 Wiki Activity

Added spark line emojis and fixed some things about their rendering.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4269 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-04-29 19:46:33 +00:00
parent 9ef3a3aca0
commit 5052dc04f2
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/client.js
View File

@ -133,7 +133,7 @@ class TfNavigationElement extends LitElement {
<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
<span id="requests"></span>
${this.render_permissions()}
<span>${Object.values(this.spark_lines)}</span>
<span>${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])}</span>
<span id="permissions"></span>
<span style="float: right">${this.render_login()}</span>
</div>
@ -250,7 +250,7 @@ class TfSparkLineElement extends LitElement {
render_line(line) {
if (line?.values?.length >= 2) {
let points = [].concat(...line.values.map((x, i) => [i * 100 / (line.values.length - 1), 10 - 10 * (x - this.min) / (this.max - this.min)]));
let points = [].concat(...line.values.map((x, i) => [100.0 * i / (line.values.length - 1), 10.0 - 10.0 * (x - this.min) / (this.max - this.min)]));
return svg`
<polyline points=${points.join(' ')} stroke=${line.style} fill="none"/>
`;
@ -259,7 +259,7 @@ class TfSparkLineElement extends LitElement {
render() {
return html`
<svg style="width: 10em; height: 1em; vertical-align: bottom; margin: 0; padding: 0" viewPort="0 0 100 10" xmlns="http://www.w3.org/2000/svg">
<svg style="width: 10em; height: 1.5em; vertical-align: bottom; margin: 0; padding: 0; background: #000" viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
${this.lines.map(x => this.render_line(x))}
</svg>
`;
@ -741,8 +741,8 @@ function _receive_websocket_message(message) {
tls_malloc_percent: {group: 'memory', name: 'tls'},
uv_malloc_percent: {group: 'memory', name: 'uv'},
messages_stored: {group: 'stored', name: 'messages'},
blobs_stored: {group: 'stored', name: 'blobs'},
messages_stored: {group: 'store', name: 'messages'},
blobs_stored: {group: 'store', name: 'blobs'},
socket_count: {group: 'socket', name: 'total'},
socket_open_count: {group: 'socket', name: 'open'},
@ -803,8 +803,14 @@ function _receive_websocket_message(message) {
}
timeseries.append(now, message.stats[key]);
if (graph_key == 'cpu' || graph_key == 'rpc' || graph_key == 'stored') {
document.getElementsByTagName('tf-navigation')[0].get_spark_line(graph_key, { max: 100 }).append(key, message.stats[key]);
if (graph_key == 'cpu' || graph_key == 'rpc' || graph_key == 'store') {
let line = document.getElementsByTagName('tf-navigation')[0].get_spark_line(graph_key, { max: 100 });
line.dataset.emoji = {
'cpu': '💻',
'rpc': '🔁',
'store': '💾',
}[graph_key];
line.append(key, message.stats[key]);
}
}
} else if (message &&