Merge pull request #5843 from plotly/revert-5836-fix5822-hover-position

Revert " Fix scatter and scattergl hover on axes with period and adjust the unified hover position in respect to mean"

Author: archmoj

draftlogs/5836_fix.md

@@ -1072,11 +1072,8 @@ function createHoverText(hoverData, opts, gd) {
 
         // Position the hover
         var winningPoint = hoverData[0];
-        var ly = axLetter === 'y' ?
-            (winningPoint.y0 + winningPoint.y1) / 2 : Lib.mean(hoverData.map(function(c) {return (c.y0 + c.y1) / 2;}));
-        var lx = axLetter === 'x' ?
-            (winningPoint.x0 + winningPoint.x1) / 2 : Lib.mean(hoverData.map(function(c) {return (c.x0 + c.x1) / 2;}));
-
+        var ly = (winningPoint.y0 + winningPoint.y1) / 2;
+        var lx = (winningPoint.x0 + winningPoint.x1) / 2;
         var legendContainer = container.select('g.legend');
         var tbb = legendContainer.node().getBoundingClientRect();
         lx += xa._offset;

src/components/fx/hover.js

@@ -51,13 +51,23 @@ function calc(gd, trace) {
         calcAxisExpansion(gd, trace, xa, ya, x, y, ppad);
     }
 
+    var hasPeriodX = !!trace.xperiodalignment;
+    var hasPeriodY = !!trace.yperiodalignment;
+
     for(i = 0; i < serieslen; i++) {
         var cdi = cd[i] = {};
         var xValid = isNumeric(x[i]);
         var yValid = isNumeric(y[i]);
         if(xValid && yValid) {
             cdi[xAttr] = x[i];
             cdi[yAttr] = y[i];
+
+            if(hasPeriodX) {
+                cdi.orig_x = origX[i]; // used by hover
+            }
+            if(hasPeriodY) {
+                cdi.orig_y = origY[i]; // used by hover
+            }
         } else if(stackGroupOpts && (isV ? xValid : yValid)) {
             // if we're stacking we need to hold on to all valid positions
             // even with invalid sizes

src/traces/scatter/calc.js

@@ -28,12 +28,14 @@ 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) {
@@ -69,8 +71,8 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
             // the normalized individual sizes, so that's what I'm doing here
             // for now.
             var sizeVal = orientation && (di.sNorm || di.s);
-            var xLabelVal = (orientation === 'h') ? sizeVal : di.x;
-            var yLabelVal = (orientation === 'v') ? sizeVal : di.y;
+            var xLabelVal = (orientation === 'h') ? sizeVal : di.orig_x !== undefined ? di.orig_x : di.x;
+            var yLabelVal = (orientation === 'v') ? sizeVal : di.orig_y !== undefined ? di.orig_y : di.y;
 
             Lib.extendFlat(pointData, {
                 color: getTraceColor(trace, di),

src/traces/scatter/hover.js

@@ -48,9 +48,11 @@ function hoverPoints(pointData, xval, yval, hovermode) {
         for(i = 0; i < ids.length; i++) {
             ptx = x[ids[i]];
             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);
                 dxy = Math.sqrt(dx * dx + dy * dy);
                 id = ids[i];
             }
@@ -153,16 +155,19 @@ function calcHover(pointData, x, y, trace) {
     var fakeCd = {};
     fakeCd[pointData.index] = di;
 
+    var origX = trace._origX;
+    var origY = trace._origY;
+
     var pointData2 = Lib.extendFlat({}, pointData, {
         color: getTraceColor(trace, di),
 
         x0: xp - rad,
         x1: xp + rad,
-        xLabelVal: di.x,
+        xLabelVal: origX ? origX[id] : di.x,
 
         y0: yp - rad,
         y1: yp + rad,
-        yLabelVal: di.y,
+        yLabelVal: origY ? origY[id] : di.y,
 
         cd: fakeCd,
         distance: minDist,

src/traces/scattergl/hover.js

@@ -627,12 +627,6 @@ describe('hover with (x|y)period positioning', function() {
 
     it('@gl shows hover info for scattergl', function(done) {
         Plotly.newPlot(gd, require('@mocks/gl2d_period_positioning.json'))
-        .then(function() {
-            return Plotly.restyle(gd, {
-                xperiodalignment: 'start',
-                yperiodalignment: 'start'
-            });
-        })
         .then(function() { _hover(100, 255); })
         .then(function() {
             assertHoverLabelContent({
@@ -647,50 +641,6 @@ describe('hover with (x|y)period positioning', function() {
                 nums: '(Jan 2006, Jun 1, 1970)'
             });
         })
-
-        .then(function() {
-            return Plotly.restyle(gd, {
-                xperiodalignment: 'middle',
-                yperiodalignment: 'middle'
-            });
-        })
-        .then(function() { _hover(100, 255); })
-        .then(function() { _hover(100, 255); })
-        .then(function() {
-            assertHoverLabelContent({
-                name: '',
-                nums: '(Jul 2001, Jan 16, 1970)'
-            });
-        })
-        .then(function() { _hover(470, 45); })
-        .then(function() {
-            assertHoverLabelContent({
-                name: '',
-                nums: '(Jul 2006, Jun 16, 1970)'
-            });
-        })
-
-        .then(function() {
-            return Plotly.restyle(gd, {
-                xperiodalignment: 'end',
-                yperiodalignment: 'end'
-            });
-        })
-        .then(function() { _hover(100, 255); })
-        .then(function() {
-            assertHoverLabelContent({
-                name: '',
-                nums: '(Jan 2002, Feb 1, 1970)'
-            });
-        })
-        .then(function() { _hover(470, 45); })
-        .then(function() {
-            assertHoverLabelContent({
-                name: '',
-                nums: '(Jan 2007, Jul 1, 1970)'
-            });
-        })
-
         .then(done, done.fail);
     });
 });