add draggable y scales demo (#902)

leeoniya · leeoniya · commit 631b4bb00b4f · 2023-12-16T18:59:06.000-06:00
diff --git a/demos/index.html b/demos/index.html
@@ -79,6 +79,7 @@ <h1>μPlot Demos</h1>
 	<a href="line-paths.html">Bars, stepped &amp; smooth lines</a>
 	<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="months-ru.html">Russian month names on date/time axis</a>
 	<a href="add-del-series.html">Dynamically add or delete series</a>
diff --git a/demos/y-scale-drag.html b/demos/y-scale-drag.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Draggable y scales</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";
+
+		const opts = {
+			width: 600,
+			height: 350,
+			hooks: {
+				init: [
+					u => {
+						let axisEls = u.root.querySelectorAll('.u-axis');
+
+						for (let i = 0; i < axisEls.length; i++) {
+							if (i > 0) {
+								let el = axisEls[i];
+
+								el.addEventListener('mousedown', e => {
+									let y0 = e.clientY;
+									let scaleKey = u.axes[i].scale;
+									let scale = u.scales[scaleKey];
+									let { min, max } = scale;
+									let unitsPerPx = (max - min) / (u.bbox.height / uPlot.pxRatio);
+
+									let mousemove = e => {
+										let dy = e.clientY - y0;
+										let shiftyBy = dy * unitsPerPx;
+
+										u.setScale(scaleKey, {
+											min: min + shiftyBy,
+											max: max + shiftyBy,
+										});
+									};
+
+									let mouseup = e => {
+										document.removeEventListener('mousemove', mousemove);
+										document.removeEventListener('mousemove', mouseup);
+									};
+
+									document.addEventListener('mousemove', mousemove);
+									document.addEventListener('mouseup', mouseup);
+								});
+
+							}
+						}
+					},
+				]
+			},
+			scales: {
+				x: {
+					time: false,
+				},
+			/*
+				'meter': {
+					auto: false,
+					min: 0,
+					max: 5,
+				},
+				'km/h': {
+					auto: false,
+					min: 0,
+					max: 10,
+				}
+			*/
+			},
+			series: [
+				{},
+				{
+					label: 'Price',
+					stroke: 'red',
+					scale: 'meter',
+				},
+				{
+					label: 'Amount',
+					stroke: 'blue',
+					scale: 'km/h',
+				}
+			],
+			axes: [
+				{},
+				{
+					scale: 'meter',
+					label: 'km/h'
+				},
+				{
+					scale: 'km/h',
+					label: 'meter'
+				}
+			],
+		};
+
+		const data = [
+			[0, 1, 2, 3, 4],
+			[1, 3, 2, 4, 3],
+			[6, 8, 3, 7, 9],
+		];
+
+		let u = new uPlot(opts, data, document.body)
+	</script>
+</body>
+</html>
