44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<b>value</b>
|
|
<div id="value"><svg></svg></div>
|
|
|
|
<script type="module">
|
|
import * as d3_module from "https://cdn.jsdelivr.net/npm/d3@7";
|
|
import * as Plot from "https://cdn.skypack.dev/@observablehq/plot@0.4";
|
|
|
|
var current_dataset = [];
|
|
while (true) {
|
|
try {
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(() => controller.abort(), 1000);
|
|
// fetch new data
|
|
await d3.json("/data", {signal: controller.signal}).then(function(data) {
|
|
// then append to list
|
|
current_dataset.push(data);
|
|
// Map to a 10s (n S) sliding window
|
|
// ie find the most recent value, then reduce/filter anything more than 10s earlier than that.
|
|
const most_recent_time = current_dataset[current_dataset.length - 1].time;
|
|
const window_start = Math.max(0, most_recent_time - 10);
|
|
// filter the list
|
|
current_dataset = current_dataset.filter(
|
|
value => value.time >= window_start
|
|
);
|
|
// render dist graph
|
|
var value_graph = Plot.plot({
|
|
x: { grid: true},
|
|
y: { grid: true},
|
|
marks: [
|
|
Plot.line(current_dataset, {x: "time", y: "value", stroke: "red"}),
|
|
]
|
|
});
|
|
var graphNode = document.getElementById("value");
|
|
graphNode.replaceChild(value_graph, graphNode.firstChild);
|
|
});
|
|
clearTimeout(timeoutId);
|
|
} catch (error) {
|
|
console.log(error.name === 'AbortError');
|
|
}
|
|
}
|
|
// }
|
|
</script>
|