fix hover on scatter and scattergl with periods

Author: archmoj

src/components/fx/hover.js

@@ -1934,7 +1934,10 @@ function getCoord(axLetter, winningPoint, fullLayout) {
     var val = winningPoint[axLetter + 'Val'];
 
     if(ax.type === 'category') val = ax._categoriesMap[val];
-    else if(ax.type === 'date') val = ax.d2c(val);
+    else if(ax.type === 'date') {
+        var period = winningPoint[axLetter + 'Period'];
+        val = ax.d2c(period !== undefined ? period : val);
+    }
 
     var cd0 = winningPoint.cd[winningPoint.index];
     if(cd0 && cd0.t && cd0.t.posLetter === ax._id) {

src/traces/scatter/hover.js

@@ -28,14 +28,12 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
             var rad = Math.max(3, di.mrc || 0);
             var kink = 1 - 1 / rad;
             var dxRaw = Math.abs(xa.c2p(di.x) - xpx);
-            if(di.orig_x !== undefined) dxRaw += xa.c2p(di.orig_x) - xa.c2p(di.x);
             return (dxRaw < rad) ? (kink * dxRaw / rad) : (dxRaw - rad + kink);
         };
         var dy = function(di) {
             var rad = Math.max(3, di.mrc || 0);
             var kink = 1 - 1 / rad;
             var dyRaw = Math.abs(ya.c2p(di.y) - ypx);
-            if(di.orig_y !== undefined) dyRaw += ya.c2p(di.orig_y) - ya.c2p(di.y);
             return (dyRaw < rad) ? (kink * dyRaw / rad) : (dyRaw - rad + kink);
         };
         var dxy = function(di) {
@@ -89,6 +87,9 @@ 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/hover.js

@@ -41,42 +41,43 @@ function hoverPoints(pointData, xval, yval, hovermode) {
 
     // pick the id closest to the point
     // note that point possibly may not be found
-    var id, ptx, pty, i, dx, dy, dist, dxy;
+    var k, closestId, ptx, pty, i, dx, dy, dist, dxy;
 
     var minDist = maxDistance;
     if(hovermode === 'x') {
         for(i = 0; i < ids.length; i++) {
-            ptx = x[ids[i]];
+            k = ids[i];
+            ptx = x[k];
             dx = Math.abs(xa.c2p(ptx) - xpx);
-            if(trace._origX && trace._origX[i] !== undefined) dx += xa.c2p(trace._origX[i]) - xa.c2p(ptx);
             if(dx < minDist) {
                 minDist = dx;
-                dy = ya.c2p(y[ids[i]]) - ypx;
-                if(trace._origY && trace._origY[i] !== undefined) dy += ya.c2p(trace._origY[i]) - ya.c2p(pty);
+                pty = y[k];
+                dy = ya.c2p(pty) - ypx;
                 dxy = Math.sqrt(dx * dx + dy * dy);
-                id = ids[i];
+                closestId = ids[i];
             }
         }
     } else {
         for(i = ids.length - 1; i > -1; i--) {
-            ptx = x[ids[i]];
-            pty = y[ids[i]];
+            k = ids[i];
+            ptx = x[k];
+            pty = y[k];
             dx = xa.c2p(ptx) - xpx;
             dy = ya.c2p(pty) - ypx;
 
             dist = Math.sqrt(dx * dx + dy * dy);
             if(dist < minDist) {
                 minDist = dxy = dist;
-                id = ids[i];
+                closestId = k;
             }
         }
     }
 
-    pointData.index = id;
+    pointData.index = closestId;
     pointData.distance = minDist;
     pointData.dxy = dxy;
 
-    if(id === undefined) return [pointData];
+    if(closestId === undefined) return [pointData];
 
     return [calcHover(pointData, x, y, trace)];
 }
@@ -176,6 +177,9 @@ 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;

test/jasmine/tests/hover_label_test.js

@@ -5407,6 +5407,52 @@ describe('hovermode: (x|y)unified', function() {
         });
     });
 
+    it('two end positioned scatter period', function(done) {
+        var fig = {
+            data: [{
+                x: [
+                    '1970-01-01',
+                    '1970-07-01',
+                    '1971-01-01'
+                ],
+                xperiod: 'M6',
+                xperiodalignment: 'end',
+                y: [1, 2, 3]
+            }, {
+                x: [
+                    '1970-01-01',
+                    '1970-07-01',
+                    '1971-01-01',
+                ],
+                xperiod: 'M6',
+                xperiodalignment: 'end',
+                y: [11, 12, 13]
+            }],
+            layout: {
+                showlegend: false,
+                width: 600,
+                height: 400,
+                hovermode: 'x unified'
+            }
+        };
+
+        Plotly.newPlot(gd, fig)
+        .then(function(gd) {
+            _hover(gd, { xpx: 200, ypx: 200 });
+            assertLabel({title: 'Jul 1, 1970', items: [
+                'trace 0 : 2',
+                'trace 1 : 12'
+            ]});
+
+            _hover(gd, { xpx: 400, ypx: 200 });
+            assertLabel({title: 'Jan 1, 1971', items: [
+                'trace 0 : 3',
+                'trace 1 : 13'
+            ]});
+        })
+        .then(done, done.fail);
+    });
+
     it('period with hover distance -1 include closest not farthest', function(done) {
         Plotly.newPlot(gd, {
             data: [