allow cursor & drag sync using scales instead of coords. close #215

leeoniya · May 26, 2020 · 0b9b87a · 0b9b87a
1 parent 4381a07
commit 0b9b87a
Show file tree

Hide file tree

Showing 6 changed files with 290 additions and 112 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -70,7 +70,8 @@ <h2>Drawing</h2>
 	<h2>Zooming</h2>
 	<a href="zoom-variations.html">Different zoom variants (adaptive, uni/omnidirectional)</a>
 	<a href="zoom-fetch.html">Fetch &amp; update data on zoom</a>
-	<a href="zoom-ranger.html">Secondary sync'd overview chart for zoom ranging</a>
+	<a href="zoom-ranger.html">Secondary sync'd overview chart for x-axis zoom ranging</a>
+	<a href="zoom-ranger-xy.html">Secondary sync'd overview chart for x/y-axis zoom ranging</a>
 	<a href="zoom-touch.html">Pinch zooming/panning plugin</a>
 	<a href="zoom-wheel.html">Mouswheel zooming plugin</a>
 

diff --git a/demos/sync-cursor.html b/demos/sync-cursor.html
@@ -87,6 +87,12 @@ <h2 id="wait">Loading lib....</h2>
 					sync: {
 						key: "moo",
 						setSeries: true,
+						scales: ["x", "y"],
+					},
+					drag: {
+						x: true,
+						y: true,
+						uni: Infinity
 					},
 				};
 
@@ -121,7 +127,7 @@ <h2 id="wait">Loading lib....</h2>
 						{
 							values: (u, vals, space) => vals.map(v => +v.toFixed(1) + "%"),
 						},
-					],
+					]
 				};
 
 				let uplot1 = new uPlot(opts, data[0], document.body);

diff --git a/demos/zoom-ranger-xy.html b/demos/zoom-ranger-xy.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Zoom Ranger XY</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="stylesheet" href="../dist/uPlot.min.css">
+		<style>
+			.uplot {
+				display: block;
+				width: 800px;
+			}
+
+			.uplot .select {
+				background: rgba(127,0,256,0.3);
+			}
+		</style>
+	</head>
+	<body>
+		<script src="../dist/uPlot.iife.js"></script>
+		<script>
+			var loop = 100;
+
+			let data = [
+				Array(loop),
+				Array(loop),
+			];
+
+			for (var i = 0; i < loop; i++) {
+				let x = 2 * Math.PI * i / loop;
+				let y = Math.sin(x);
+
+				data[0][i] = x;
+				data[1][i] = y;
+			}
+
+			let initXmin = 1;
+			let initXmax = 4.5;
+
+			const rangerOpts = {
+				width: 800,
+				height: 100,
+				cursor: {
+					points: {
+						show: false,
+					},
+					drag: {
+						setScale: false,
+						x: true,
+						y: true,
+						uni: 10
+					},
+					sync: {
+						key: "moo",
+						scales: ["x", "y"]
+					}
+				},
+				legend: {
+					show: false
+				},
+				scales: {
+					x: {
+						time: false,
+					},
+				},
+				series: [
+					{},
+					{
+						stroke: "rgba(0,0,0,0.8)",
+					}
+				],
+				hooks: {
+					ready: [
+						uRanger => {
+							let left = Math.round(uRanger.valToPos(initXmin, 'x'));
+							let width = Math.round(uRanger.valToPos(initXmax, 'x')) - left;
+							let height = uRanger.bbox.height / devicePixelRatio;
+							uRanger.setSelect({left, width, height}, false);
+						}
+					]
+				}
+			};
+
+			let uRanger = new uPlot(rangerOpts, data, document.body);
+
+			const zoomedOpts = {
+			//	title: "Zoomed Area",
+				width: 800,
+				height: 400,
+				cursor: {
+					drag: {
+						x: true,
+						y: true,
+						uni: 40
+					},
+					sync: {
+						key: "moo",
+						scales: ["x", "y"]
+					}
+				},
+				scales: {
+					x: {
+						time: false,
+						min: initXmin,
+						max: initXmax,
+					},
+				},
+				series: [
+					{
+						label: "x",
+					},
+					{
+						label: "sin(x)",
+						stroke: "purple",
+					}
+				]
+			};
+
+			let uZoomed = new uPlot(zoomedOpts, data, document.body);
+		</script>
+	</body>
+</html>
diff --git a/demos/zoom-ranger.html b/demos/zoom-ranger.html
@@ -34,13 +34,11 @@
 			let initXmin = 1;
 			let initXmax = 4.5;
 
-			let viaRanger = false;
-			let viaZoom = false;
-
 			const rangerOpts = {
 				width: 800,
 				height: 100,
 				cursor: {
+					y: false,
 					points: {
 						show: false,
 					},
@@ -49,6 +47,9 @@
 						x: true,
 						y: false,
 					},
+					sync: {
+						key: "moo"
+					}
 				},
 				legend: {
 					show: false
@@ -65,22 +66,11 @@
 					}
 				],
 				hooks: {
-					setSelect: [
-						uRanger => {
-							if (!viaZoom) {
-								viaRanger = true;
-								let min = uRanger.posToVal(uRanger.select.left, 'x');
-								let max = uRanger.posToVal(uRanger.select.left + uRanger.select.width, 'x');
-								uZoomed.setScale('x', {min, max});
-								viaRanger = false;
-							}
-						}
-					],
 					ready: [
 						uRanger => {
 							let left = Math.round(uRanger.valToPos(initXmin, 'x'));
 							let width = Math.round(uRanger.valToPos(initXmax, 'x')) - left;
-							let height = uRanger.root.querySelector(".over").getBoundingClientRect().height;
+							let height = uRanger.bbox.height / devicePixelRatio;
 							uRanger.setSelect({left, width, height}, false);
 						}
 					]
@@ -93,6 +83,15 @@
 			//	title: "Zoomed Area",
 				width: 800,
 				height: 400,
+				cursor: {
+					drag: {
+						x: true,
+						y: false
+					},
+					sync: {
+						key: "moo"
+					}
+				},
 				scales: {
 					x: {
 						time: false,
@@ -108,20 +107,7 @@
 						label: "sin(x)",
 						stroke: "red",
 					}
-				],
-				hooks: {
-					setScale: [
-						(uZoomed, key) => {
-							if (key == 'x' && !viaRanger) {
-								viaZoom = true;
-								let left = Math.round(uRanger.valToPos(uZoomed.scales.x.min, 'x'));
-								let right = Math.round(uRanger.valToPos(uZoomed.scales.x.max, 'x'));
-								uRanger.setSelect({left, width: right - left});
-								viaZoom = false;
-							}
-						}
-					]
-				}
+				]
 			};
 
 			let uZoomed = new uPlot(zoomedOpts, data, document.body);

diff --git a/dist/uPlot.d.ts b/dist/uPlot.d.ts
@@ -115,6 +115,8 @@ declare class uPlot {
 declare namespace uPlot {
 	export type AlignedData = readonly (number | null)[][];
 
+	export type SyncScales = [string, string];
+
 	export type MinMax = [number, number];
 
 	export interface DateNames {
@@ -245,6 +247,8 @@ declare namespace uPlot {
 			key: string;
 			/** determines if series toggling and focus via cursor is synced across charts */
 			setSeries?: boolean; // true
+			/** sets the x and y scales to sync by values. null will sync by relative (%) position */
+			scales?: SyncScales; // [xScaleKey, null]
 		};
 
 		/** focus series closest to cursor */