tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

Added the memory sparkline and tried to CSS them differently.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4449 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-09-04 20:13:17 +00:00
parent 7b440b720e
commit 6eafded1f6
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
core/client.js
View File

@ -80,7 +80,7 @@ class TfNavigationElement extends LitElement {
let spark_line = document.createElement('tf-sparkline'); let spark_line = document.createElement('tf-sparkline');
spark_line.style.display = 'flex'; spark_line.style.display = 'flex';
spark_line.style.flexDirection = 'row'; spark_line.style.flexDirection = 'row';
spark_line.style.flex = '0 100 10em'; spark_line.style.flex = '0 50 5em';
spark_line.title = key; spark_line.title = key;
if (options) { if (options) {
if (options.max) { if (options.max) {
@ -126,7 +126,7 @@ class TfNavigationElement extends LitElement {
<style> <style>
${k_global_style} ${k_global_style}
</style> </style>
<div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px"> <div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center">
<span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span> <span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span>
<span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span> <span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span>
<a accesskey="h" data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a> <a accesskey="h" data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
@ -136,7 +136,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 style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
<span id="requests"></span> <span id="requests"></span>
${this.render_permissions()} ${this.render_permissions()}
<span style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0">${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])}</span> <span style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0">${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [html`<span style="font-size: xx-small">${x.dataset.emoji}</span>`, x])}</span>
<span style="flex: 0 0; white-space: nowrap">${this.render_login()}</span> <span style="flex: 0 0; white-space: nowrap">${this.render_login()}</span>
</div> </div>
`; `;
@ -310,7 +310,7 @@ class TfSparkLineElement extends LitElement {
render_line(line) { render_line(line) {
if (line?.values?.length >= 2) { if (line?.values?.length >= 2) {
let max = Math.max(this.max, ...line.values); let max = Math.max(this.max, ...line.values);
let points = [].concat(...line.values.map((x, i) => [100.0 * i / (line.values.length - 1), 10.0 - 10.0 * (x - this.min) / (max - this.min)])); let points = [].concat(...line.values.map((x, i) => [50.0 * i / (line.values.length - 1), 10.0 - 10.0 * (x - this.min) / (max - this.min)]));
return svg`<polyline points=${points.join(' ')} stroke=${line.style} fill="none"/>`; return svg`<polyline points=${points.join(' ')} stroke=${line.style} fill="none"/>`;
} }
} }
@ -318,7 +318,7 @@ class TfSparkLineElement extends LitElement {
render() { render() {
let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0; let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0;
return html` return html`
<svg style="width-auto: object-fit: cover; margin: 0; padding: 0; background: #000" viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <svg style="max-width: 7.5em; max-height: 1.5em; margin: 0; padding: 0; background: #000" viewBox="0 0 50 10" xmlns="http://www.w3.org/2000/svg">
${this.lines.map(x => this.render_line(x))} ${this.lines.map(x => this.render_line(x))}
<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">${max}</text> <text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">${max}</text>
</svg> </svg>
@ -784,12 +784,13 @@ function _receive_websocket_message(message) {
}; };
const k_colors = ['#0f0', '#88f', '#ff0', '#f0f', '#0ff', '#f00', '#888']; const k_colors = ['#0f0', '#88f', '#ff0', '#f0f', '#0ff', '#f00', '#888'];
let graph_key = k_groups[key]?.group || key; let graph_key = k_groups[key]?.group || key;
if (graph_key == 'cpu' || graph_key == 'rpc' || graph_key == 'store') { if (['cpu', 'rpc', 'store', 'memory'].indexOf(graph_key) != -1) {
let line = document.getElementsByTagName('tf-navigation')[0].get_spark_line(graph_key, { max: 100 }); let line = document.getElementsByTagName('tf-navigation')[0].get_spark_line(graph_key, { max: 100 });
line.dataset.emoji = { line.dataset.emoji = {
'cpu': '💻', 'cpu': '💻',
'rpc': '🔁', 'rpc': '🔁',
'store': '💾', 'store': '💾',
'memory': '🐏',
}[graph_key]; }[graph_key];
line.append(key, message.stats[key]); line.append(key, message.stats[key]);
} }