From 6eafded1f6ceb9e1e60ffdc4da37203476e21882 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Mon, 4 Sep 2023 20:13:17 +0000
Subject: [PATCH] Added the memory sparkline and tried to CSS them differently.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4449 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/core/client.js b/core/client.js
index a215bac1..e68de5c6 100644
--- a/core/client.js
+++ b/core/client.js
@@ -80,7 +80,7 @@ class TfNavigationElement extends LitElement {
 			let spark_line = document.createElement('tf-sparkline');
 			spark_line.style.display = 'flex';
 			spark_line.style.flexDirection = 'row';
-			spark_line.style.flex = '0 100 10em';
+			spark_line.style.flex = '0 50 5em';
 			spark_line.title = key;
 			if (options) {
 				if (options.max) {
@@ -126,7 +126,7 @@ class TfNavigationElement extends LitElement {
 			<style>
 				${k_global_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 ?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>
@@ -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 id="requests"></span>
 				${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>
 			</div>
 		`;
@@ -310,7 +310,7 @@ class TfSparkLineElement extends LitElement {
 	render_line(line) {
 		if (line?.values?.length >= 2) {
 			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"/>`;
 		}
 	}
@@ -318,7 +318,7 @@ class TfSparkLineElement extends LitElement {
 	render() {
 		let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0;
 		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))}
 				<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">${max}</text>
 			</svg>
@@ -784,12 +784,13 @@ function _receive_websocket_message(message) {
 			};
 			const k_colors = ['#0f0', '#88f', '#ff0', '#f0f', '#0ff', '#f00', '#888'];
 			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 });
 				line.dataset.emoji = {
 					'cpu': '💻',
 					'rpc': '🔁',
 					'store': '💾',
+					'memory': '🐏',
 				}[graph_key];
 				line.append(key, message.stats[key]);
 			}