timeseries-discrete demo. close #939.

leeoniya · leeoniya · commit e579947241a4 · 2024-04-01T22:19:22.000-05:00
diff --git a/demos/index.html b/demos/index.html
@@ -80,6 +80,7 @@ <h1>μPlot Demos</h1>
 	<a href="gradients.html">Gradient fills &amp; strokes (vt &amp; hz, scale-affixed &amp; data-relative)</a>
 	<a href="scales-dir-ori.html">Scale direction &amp; orientation (e.g. rotation, inversion)</a>
 	<a href="y-scale-drag.html">Draggable y scales via axes</a>
+	<a href="timeseries-discrete.html">Discrete &amp; shifted series w/sync</a>
 	<a href="update-cursor-select-resize.html">Maintains location of cursor/select/hoverPts during resize (test)</a>
 
 	<a href="months-ru.html">Russian month names on date/time axis</a>
diff --git a/demos/timeseries-discrete.html b/demos/timeseries-discrete.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>TimeSeries + Discrete</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="stylesheet" href="../dist/uPlot.min.css">
+	</head>
+	<body>
+		<script type="module">
+			import uPlot from "../dist/uPlot.esm.js";
+
+			let fromTs = 1704067200;
+			let stepTs = 15;
+			let numSteps = 50;
+
+			let xVals = Array.from({length: numSteps}, (v, i) => fromTs + stepTs * i);
+
+			// floats
+			let data1 = [
+				xVals,
+				Array.from({length: numSteps}, (v, i) => Math.random() * 100),
+			];
+
+			const opts1 = {
+				width: 1920,
+				height: 600,
+				padding: [5,10,0,0],
+				cursor: {
+					y: false,
+					sync: {
+						key: '_'
+					}
+				},
+				axes: [
+					{
+						size: 10,
+						gap: 0,
+						values: (u, splits) => splits.map(v => null),
+					}
+				],
+				series: [
+					{},
+					{
+						stroke: "red",
+					},
+				],
+			};
+
+			let u = new uPlot(opts1, data1, document.body);
+
+
+			// discretes
+			let data2 = [
+				xVals,
+				Array.from({length: numSteps}, (v, i) => Math.random() > 0.5 ? 0 : 1),
+				Array.from({length: numSteps}, (v, i) => Math.random() > 0.2 ? 0 : 1),
+				Array.from({length: numSteps}, (v, i) => Math.random() > 0.1 ? 0 : 1),
+			];
+
+			let fmtVal = (u, v, seriesIdx) => v == null ? null : v - (seriesIdx - 1) * 2;
+
+			const opts2 = {
+				width: 1920,
+				height: 200,
+				padding: [5,10,0,0],
+				cursor: {
+					y: false,
+					sync: {
+						key: '_'
+					}
+				},
+				scales: {
+					y: {
+						range: [0, 5],
+					}
+				},
+				axes: [
+					{},
+					{
+						splits: (u) => [0,2,4],
+						values: (u, splits) => splits.map((v, i) => `DEV${i + 1}`),
+					},
+				],
+				series: [
+					{},
+					{
+						stroke: "green",
+						paths: uPlot.paths.stepped({align: 1}),
+						value: fmtVal,
+					},
+					{
+						stroke: "blue",
+						paths: uPlot.paths.stepped({align: 1}),
+						value: fmtVal,
+					},
+					{
+						stroke: "magenta",
+						paths: uPlot.paths.stepped({align: 1}),
+						value: fmtVal,
+					},
+				],
+			};
+
+			let u2 = new uPlot(opts2, data2.map((vals, seriesIdx) => {
+				if (seriesIdx == 0)
+					return vals;
+
+				return vals.map(v => v + (seriesIdx - 1) * 2);
+			}), document.body);
+
+			// combine legends
+			setTimeout(() => {
+				let tr = u.root.querySelector('.u-series:nth-child(2)');
+				u2.root.querySelector('.u-legend tbody').insertBefore(tr, u2.root.querySelector('.u-series:nth-child(2)'));
+				u.root.querySelector('.u-legend').style.display = 'none';
+			});
+		</script>
+	</body>
+</html>
