Skip to content

Commit

Permalink
tweaks and pokes for zoom-variations
Browse files Browse the repository at this point in the history
  • Loading branch information
leeoniya committed May 15, 2020
1 parent f982140 commit 188e521
Show file tree
Hide file tree
Showing 8 changed files with 110 additions and 108 deletions.
8 changes: 8 additions & 0 deletions demos/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
font-size: 24px;
}

h2 {
font-size: 18px;
}

a {
display: block;
padding: 4px;
Expand Down Expand Up @@ -57,16 +61,20 @@ <h1>μPlot Demos</h1>
<a href="add-del-series.html">Dynamically add or delete series</a>
<a href="scroll-sync.html">Sync chart position when inside a scrollable container</a>

<h2>Drawing</h2>
<a href="trendlines.html">Trendlines from zoomed range &amp; zoom snapping</a>
<a href="candlestick-ohlc.html">OHLC plugin &amp; legend-as-tooltip plugin</a>
<a href="draw-hooks.html">Draw hooks &amp; (custom points)</a>
<a href="multi-bars.html">Multi-series bars plugin</a>

<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-touch.html">Pinch zooming/panning plugin</a>
<a href="zoom-wheel.html">Mouswheel zooming plugin</a>

<h2>Junk</h2>
<a href="line-smoothing.html">Line smoothing (custom paths)</a>
<a href="stacked-series.html">Pseudo-stacked series</a>
</body>
Expand Down
117 changes: 58 additions & 59 deletions demos/zoom-variations.html
Original file line number Diff line number Diff line change
@@ -1,61 +1,60 @@
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Zoom Variations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="../dist/uPlot.min.css">
<style>
.uplot {
display: inline-block;
width: 400px;
}
</style>
</head>

<body>
<script src="../dist/uPlot.iife.js"></script>
<script>
let xs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
let vals = [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let data = [
xs,
xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)])
];

const opts = (title, dragOpts) => ({
title: title,
width: 400,
height: 200,
scales: {
x: {
time: false,
},
},
cursor: {
drag: dragOpts
},
series: [
{},
{
stroke: "purple"
}
],
});

let variations = [
['X only', { x: true, y: false }],
['Y only', { x: false, y: true }],
['X or Y (adaptive)', { x: true, y: true, uni: Infinity }],
['X or Y (omni)', { x: true, y: true }],
['X or Y (adaptive + omni)', { x: true, y: true, uni: 50 }],
];

variations.forEach((variation) => new uPlot(opts(...variation), data, document.body));
</script>
</body>

</html>
<head>
<meta charset="utf-8">
<title>Zoom Variations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="../dist/uPlot.min.css">
<style>
.uplot {
display: inline-block;
margin-bottom: 20px;
}
</style>
</head>
<body>
<script src="../dist/uPlot.iife.js"></script>
<script>
let xs = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
let vals = [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10];

let data = [
xs,
xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)])
];

let variations = [
['X only', { x: true, y: false }],
['Y only', { x: false, y: true }],
['X or Y (adaptive)', { x: true, y: true, uni: Infinity }],
['X or Y (omni)', { x: true, y: true }],
['X or Y (adaptive + omni)', { x: true, y: true, uni: 50 }],
];

variations.forEach(([title, dragOpts]) => {
let opts = {
title: title,
width: 600,
height: 400,
scales: {
x: {
time: false,
},
},
cursor: {
drag: dragOpts
},
series: [
{},
{
stroke: "purple"
}
],
};

let u = new uPlot(opts, data, document.body);
});
</script>
</body>
</html>
22 changes: 10 additions & 12 deletions dist/uPlot.cjs.js
Original file line number Diff line number Diff line change
Expand Up @@ -2360,22 +2360,18 @@ function uPlot(opts, data, then) {
var uni = drag.uni;

if (uni != null) {
var xDistance = abs(mouseLeft0 - mouseLeft1);
var yDistance = abs(mouseTop0 - mouseTop1);
var dx = abs(mouseLeft0 - mouseLeft1);
var dy = abs(mouseTop0 - mouseTop1);

if (xDistance < uni)
{ dragX = false; }
if (yDistance < uni)
{ dragY = false; }
dragX = dx >= uni;
dragY = dy >= uni;

// neither x or y passed the threshold, we are in the magenta box (#219). In this
// scenario, we choose a unidirectional zoom based on which point is furthest from
// the origin M0
// force unidirectionality when both are under uni limit
if (!dragX && !dragY) {
if (xDistance > yDistance)
{ dragX = true; }
else
if (dy > dx)
{ dragY = true; }
else
{ dragX = true; }
}
}

Expand All @@ -2384,6 +2380,7 @@ function uPlot(opts, data, then) {
var maxX = max(mouseLeft0, mouseLeft1);
setStylePx(selectDiv, LEFT, select[LEFT] = minX);
setStylePx(selectDiv, WIDTH, select[WIDTH] = maxX - minX);

if (uni != null && !dragY) {
setStylePx(selectDiv, TOP, select[TOP] = 0);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = plotHgtCss);
Expand All @@ -2395,6 +2392,7 @@ function uPlot(opts, data, then) {
var maxY = max(mouseTop0, mouseTop1);
setStylePx(selectDiv, TOP, select[TOP] = minY);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = maxY - minY);

if (uni != null && !dragX) {
setStylePx(selectDiv, LEFT, select[LEFT] = 0);
setStylePx(selectDiv, WIDTH, select[WIDTH] = plotWidCss);
Expand Down
3 changes: 3 additions & 0 deletions dist/uPlot.esm.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,11 @@ declare namespace uPlot {
/** determines vt/hz cursor dragging to set selection & setScale (zoom) */
drag?: {
setScale?: boolean; // true
/** toggles dragging in along x */
x?: boolean; // true
/** toggles dragging in along y */
y?: boolean; // false
/** when x & y are true, sets an upper drag limit in CSS px for adaptive/unidirectional behavior */
uni?: number; // null
};

Expand Down
22 changes: 10 additions & 12 deletions dist/uPlot.esm.js
Original file line number Diff line number Diff line change
Expand Up @@ -2352,22 +2352,18 @@ function uPlot(opts, data, then) {
let uni = drag.uni;

if (uni != null) {
let xDistance = abs(mouseLeft0 - mouseLeft1);
let yDistance = abs(mouseTop0 - mouseTop1);
let dx = abs(mouseLeft0 - mouseLeft1);
let dy = abs(mouseTop0 - mouseTop1);

if (xDistance < uni)
dragX = false;
if (yDistance < uni)
dragY = false;
dragX = dx >= uni;
dragY = dy >= uni;

// neither x or y passed the threshold, we are in the magenta box (#219). In this
// scenario, we choose a unidirectional zoom based on which point is furthest from
// the origin M0
// force unidirectionality when both are under uni limit
if (!dragX && !dragY) {
if (xDistance > yDistance)
dragX = true;
else
if (dy > dx)
dragY = true;
else
dragX = true;
}
}

Expand All @@ -2376,6 +2372,7 @@ function uPlot(opts, data, then) {
let maxX = max(mouseLeft0, mouseLeft1);
setStylePx(selectDiv, LEFT, select[LEFT] = minX);
setStylePx(selectDiv, WIDTH, select[WIDTH] = maxX - minX);

if (uni != null && !dragY) {
setStylePx(selectDiv, TOP, select[TOP] = 0);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = plotHgtCss);
Expand All @@ -2387,6 +2384,7 @@ function uPlot(opts, data, then) {
let maxY = max(mouseTop0, mouseTop1);
setStylePx(selectDiv, TOP, select[TOP] = minY);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = maxY - minY);

if (uni != null && !dragX) {
setStylePx(selectDiv, LEFT, select[LEFT] = 0);
setStylePx(selectDiv, WIDTH, select[WIDTH] = plotWidCss);
Expand Down
22 changes: 10 additions & 12 deletions dist/uPlot.iife.js
Original file line number Diff line number Diff line change
Expand Up @@ -2361,22 +2361,18 @@ var uPlot = (function () {
var uni = drag.uni;

if (uni != null) {
var xDistance = abs(mouseLeft0 - mouseLeft1);
var yDistance = abs(mouseTop0 - mouseTop1);
var dx = abs(mouseLeft0 - mouseLeft1);
var dy = abs(mouseTop0 - mouseTop1);

if (xDistance < uni)
{ dragX = false; }
if (yDistance < uni)
{ dragY = false; }
dragX = dx >= uni;
dragY = dy >= uni;

// neither x or y passed the threshold, we are in the magenta box (#219). In this
// scenario, we choose a unidirectional zoom based on which point is furthest from
// the origin M0
// force unidirectionality when both are under uni limit
if (!dragX && !dragY) {
if (xDistance > yDistance)
{ dragX = true; }
else
if (dy > dx)
{ dragY = true; }
else
{ dragX = true; }
}
}

Expand All @@ -2385,6 +2381,7 @@ var uPlot = (function () {
var maxX = max(mouseLeft0, mouseLeft1);
setStylePx(selectDiv, LEFT, select[LEFT] = minX);
setStylePx(selectDiv, WIDTH, select[WIDTH] = maxX - minX);

if (uni != null && !dragY) {
setStylePx(selectDiv, TOP, select[TOP] = 0);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = plotHgtCss);
Expand All @@ -2396,6 +2393,7 @@ var uPlot = (function () {
var maxY = max(mouseTop0, mouseTop1);
setStylePx(selectDiv, TOP, select[TOP] = minY);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = maxY - minY);

if (uni != null && !dragX) {
setStylePx(selectDiv, LEFT, select[LEFT] = 0);
setStylePx(selectDiv, WIDTH, select[WIDTH] = plotWidCss);
Expand Down
2 changes: 1 addition & 1 deletion dist/uPlot.iife.min.js

Large diffs are not rendered by default.

22 changes: 10 additions & 12 deletions src/uPlot.js
Original file line number Diff line number Diff line change
Expand Up @@ -1617,22 +1617,18 @@ export default function uPlot(opts, data, then) {
let uni = drag.uni;

if (uni != null) {
let xDistance = abs(mouseLeft0 - mouseLeft1);
let yDistance = abs(mouseTop0 - mouseTop1);
let dx = abs(mouseLeft0 - mouseLeft1);
let dy = abs(mouseTop0 - mouseTop1);

if (xDistance < uni)
dragX = false;
if (yDistance < uni)
dragY = false;
dragX = dx >= uni;
dragY = dy >= uni;

// neither x or y passed the threshold, we are in the magenta box (#219). In this
// scenario, we choose a unidirectional zoom based on which point is furthest from
// the origin M0
// force unidirectionality when both are under uni limit
if (!dragX && !dragY) {
if (xDistance > yDistance)
dragX = true;
else
if (dy > dx)
dragY = true;
else
dragX = true;
}
}

Expand All @@ -1641,6 +1637,7 @@ export default function uPlot(opts, data, then) {
let maxX = max(mouseLeft0, mouseLeft1);
setStylePx(selectDiv, LEFT, select[LEFT] = minX);
setStylePx(selectDiv, WIDTH, select[WIDTH] = maxX - minX);

if (uni != null && !dragY) {
setStylePx(selectDiv, TOP, select[TOP] = 0);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = plotHgtCss);
Expand All @@ -1652,6 +1649,7 @@ export default function uPlot(opts, data, then) {
let maxY = max(mouseTop0, mouseTop1);
setStylePx(selectDiv, TOP, select[TOP] = minY);
setStylePx(selectDiv, HEIGHT, select[HEIGHT] = maxY - minY);

if (uni != null && !dragX) {
setStylePx(selectDiv, LEFT, select[LEFT] = 0);
setStylePx(selectDiv, WIDTH, select[WIDTH] = plotWidCss);
Expand Down

0 comments on commit 188e521

Please sign in to comment.