scatters with period ranges

Author: archmoj

src/traces/scatter/calc.js

@@ -18,8 +18,10 @@ function calc(gd, trace) {
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
     var origX = xa.makeCalcdata(trace, 'x');
     var origY = ya.makeCalcdata(trace, 'y');
-    var x = alignPeriod(trace, xa, 'x', origX).vals;
-    var y = alignPeriod(trace, ya, 'y', origY).vals;
+    var xObj = alignPeriod(trace, xa, 'x', origX);
+    var yObj = alignPeriod(trace, ya, 'y', origY);
+    var x = xObj.vals;
+    var y = yObj.vals;
 
     var serieslen = trace._length;
     var cd = new Array(serieslen);
@@ -64,9 +66,13 @@ function calc(gd, trace) {
 
             if(hasPeriodX) {
                 cdi.orig_x = origX[i]; // used by hover
+                cdi.xEnd = xObj.ends[i];
+                cdi.xStart = xObj.starts[i];
             }
             if(hasPeriodY) {
                 cdi.orig_y = origY[i]; // used by hover
+                cdi.yEnd = yObj.ends[i];
+                cdi.yStart = yObj.starts[i];
             }
         } else if(stackGroupOpts && (isV ? xValid : yValid)) {
             // if we're stacking we need to hold on to all valid positions

src/traces/scatter/hover.js

@@ -18,29 +18,54 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var hoveron = trace.hoveron || '';
     var minRad = (trace.mode.indexOf('markers') !== -1) ? 3 : 0.5;
 
+    var xPeriod = !!trace.xperiodalignment;
+    var yPeriod = !!trace.yperiodalignment;
+
     // look for points to hover on first, then take fills only if we
     // didn't find a point
+
     if(hoveron.indexOf('points') !== -1) {
+        // dx and dy are used in compare modes - here we want to always
+        // prioritize the closest data point, at least as long as markers are
+        // the same size or nonexistent, but still try to prioritize small markers too.
         var dx = function(di) {
-            // dx and dy are used in compare modes - here we want to always
-            // prioritize the closest data point, at least as long as markers are
-            // the same size or nonexistent, but still try to prioritize small markers too.
+            if(xPeriod) {
+                var x0 = xa.c2p(di.xStart);
+                var x1 = xa.c2p(di.xEnd);
+
+                return (
+                    xpx >= Math.min(x0, x1) &&
+                    xpx <= Math.max(x0, x1)
+                ) ? 0 : Infinity;
+            }
+
             var rad = Math.max(3, di.mrc || 0);
             var kink = 1 - 1 / rad;
             var dxRaw = Math.abs(xa.c2p(di.x) - xpx);
             return (dxRaw < rad) ? (kink * dxRaw / rad) : (dxRaw - rad + kink);
         };
         var dy = function(di) {
+            if(yPeriod) {
+                var y0 = ya.c2p(di.yStart);
+                var y1 = ya.c2p(di.yEnd);
+
+                return (
+                    ypx >= Math.min(y0, y1) &&
+                    ypx <= Math.max(y0, y1)
+                ) ? 0 : Infinity;
+            }
+
             var rad = Math.max(3, di.mrc || 0);
             var kink = 1 - 1 / rad;
             var dyRaw = Math.abs(ya.c2p(di.y) - ypx);
             return (dyRaw < rad) ? (kink * dyRaw / rad) : (dyRaw - rad + kink);
         };
+
+        // scatter points: d.mrc is the calculated marker radius
+        // adjust the distance so if you're inside the marker it
+        // always will show up regardless of point size, but
+        // prioritize smaller points
         var dxy = function(di) {
-            // scatter points: d.mrc is the calculated marker radius
-            // adjust the distance so if you're inside the marker it
-            // always will show up regardless of point size, but
-            // prioritize smaller points
             var rad = Math.max(minRad, di.mrc || 0);
             var dx = xa.c2p(di.x) - xpx;
             var dy = ya.c2p(di.y) - ypx;
@@ -87,9 +112,6 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
                 hovertemplate: trace.hovertemplate
             });
 
-            if(di.orig_x !== undefined) pointData.xPeriod = di.x;
-            if(di.orig_y !== undefined) pointData.yPeriod = di.y;
-
             fillText(di, trace, pointData);
             Registry.getComponentMethod('errorbars', 'hoverInfo')(di, trace, pointData);
 

src/traces/scattergl/calc.js

@@ -31,13 +31,23 @@ module.exports = function calc(gd, trace) {
 
     var origX = xa.makeCalcdata(trace, 'x');
     var origY = ya.makeCalcdata(trace, 'y');
-    var x = alignPeriod(trace, xa, 'x', origX).vals;
-    var y = alignPeriod(trace, ya, 'y', origY).vals;
+    var xObj = alignPeriod(trace, xa, 'x', origX);
+    var yObj = alignPeriod(trace, ya, 'y', origY);
+    var x = xObj.vals;
+    var y = yObj.vals;
     trace._x = x;
     trace._y = y;
 
-    if(trace.xperiodalignment) trace._origX = origX;
-    if(trace.yperiodalignment) trace._origY = origY;
+    if(trace.xperiodalignment) {
+        trace._origX = origX;
+        trace._xStarts = xObj.starts;
+        trace._xEnds = xObj.ends;
+    }
+    if(trace.yperiodalignment) {
+        trace._origY = origY;
+        trace._yStarts = yObj.starts;
+        trace._yEnds = yObj.ends;
+    }
 
     // we need hi-precision for scatter2d,
     // regl-scatter2d uses NaNs for bad/missing values

src/traces/scattergl/hover.js

@@ -45,14 +45,39 @@ function hoverPoints(pointData, xval, yval, hovermode) {
 
     var minDist = maxDistance;
     if(hovermode === 'x') {
+        var xPeriod = !!trace.xperiodalignment;
+        var yPeriod = !!trace.yperiodalignment;
+
         for(i = 0; i < ids.length; i++) {
             k = ids[i];
             ptx = x[k];
+
             dx = Math.abs(xa.c2p(ptx) - xpx);
+            if(xPeriod) {
+                var x0 = xa.c2p(trace._xStarts[k]);
+                var x1 = xa.c2p(trace._xEnds[k]);
+
+                dx = (
+                    xpx >= Math.min(x0, x1) &&
+                    xpx <= Math.max(x0, x1)
+                ) ? 0 : Infinity;
+            }
+
             if(dx < minDist) {
                 minDist = dx;
                 pty = y[k];
                 dy = ya.c2p(pty) - ypx;
+
+                if(yPeriod) {
+                    var y0 = ya.c2p(trace._yStarts[k]);
+                    var y1 = ya.c2p(trace._yEnds[k]);
+
+                    dy = (
+                        ypx >= Math.min(y0, y1) &&
+                        ypx <= Math.max(y0, y1)
+                    ) ? 0 : Infinity;
+                }
+
                 dxy = Math.sqrt(dx * dx + dy * dy);
                 closestId = ids[i];
             }
@@ -177,9 +202,6 @@ function calcHover(pointData, x, y, trace) {
         hovertemplate: di.ht
     });
 
-    if(origX) pointData2.xPeriod = di.x;
-    if(origY) pointData2.yPeriod = di.y;
-
     if(di.htx) pointData2.text = di.htx;
     else if(di.tx) pointData2.text = di.tx;
     else if(trace.text) pointData2.text = trace.text;