Sparkline graph tweaks. Minor cleanup.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4281 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-05-03 22:47:00 +00:00
parent 74323c22f9
commit e9d83262c4
2 changed files with 7 additions and 20 deletions

View File

@ -221,6 +221,7 @@ class TfSparkLineElement extends LitElement {
this.min = 0; this.min = 0;
this.max = 1.0; this.max = 1.0;
this.lines = []; this.lines = [];
this.k_values_max = 100;
} }
append(key, value) { append(key, value) {
@ -236,23 +237,22 @@ class TfSparkLineElement extends LitElement {
line = { line = {
name: key, name: key,
style: k_colors[this.lines.length % k_colors.length], style: k_colors[this.lines.length % k_colors.length],
values: [], values: Array(this.k_values_max).fill(0),
}; };
this.lines.push(line); this.lines.push(line);
} }
line.values.push(value); if (line.values.length >= this.k_values_max) {
if (line.values.length > 100) {
line.values.shift(); line.values.shift();
} }
line.values.push(value);
this.requestUpdate(); this.requestUpdate();
} }
render_line(line) { render_line(line) {
if (line?.values?.length >= 2) { if (line?.values?.length >= 2) {
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)])); let max = Math.max(this.max, ...line.values);
return svg` 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)]));
<polyline points=${points.join(' ')} stroke=${line.style} fill="none"/> return svg`<polyline points=${points.join(' ')} stroke=${line.style} fill="none"/>`;
`;
} }
} }
@ -834,18 +834,6 @@ function _receive_websocket_message(message) {
} }
} }
function keyEvent(event) {
send({
event: "key",
type: event.type,
which: event.which,
keyCode: event.keyCode,
charCode: event.charCode,
character: String.fromCharCode(event.keyCode || event.which),
altKey: event.altKey,
});
}
function setStatusMessage(message, color) { function setStatusMessage(message, color) {
document.getElementsByTagName('tf-navigation')[0].status = {message: message, color: color}; document.getElementsByTagName('tf-navigation')[0].status = {message: message, color: color};
} }

View File

@ -34,7 +34,6 @@
</div> </div>
<div id="files_content"> <div id="files_content">
<tf-files id="files_list"></tf-files> <tf-files id="files_list"></tf-files>
<ul id="files"></ul>
<br> <br>
<div><button id="new_file_button">New File</button></div> <div><button id="new_file_button">New File</button></div>
<div><button id="remove_file_button">Remove File</button></div> <div><button id="remove_file_button">Remove File</button></div>