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

 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

@@ -0,0 +1 @@
+ - Fix `scatter` and `scattergl` hover on axes with period and adjust the unified hover position in respect to mean [[#5836](https://github.com/plotly/plotly.js/pull/5836)]

src/components/fx/hover.js

@@ -1072,8 +1072,11 @@ function createHoverText(hoverData, opts, gd) {
 
         // Position the hover
         var winningPoint = hoverData[0];
-        var ly = (winningPoint.y0 + winningPoint.y1) / 2;
-        var lx = (winningPoint.x0 + winningPoint.x1) / 2;
+        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 legendContainer = container.select('g.legend');
         var tbb = legendContainer.node().getBoundingClientRect();
         lx += xa._offset;

src/traces/scatter/calc.js

@@ -51,23 +51,13 @@ 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/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) {
@@ -71,8 +69,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.orig_x !== undefined ? di.orig_x : di.x;
-            var yLabelVal = (orientation === 'v') ? sizeVal : di.orig_y !== undefined ? di.orig_y : di.y;
+            var xLabelVal = (orientation === 'h') ? sizeVal : di.x;
+            var yLabelVal = (orientation === 'v') ? sizeVal : di.y;
 
             Lib.extendFlat(pointData, {
                 color: getTraceColor(trace, di),

src/traces/scattergl/hover.js

@@ -48,11 +48,9 @@ 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];
             }
@@ -155,19 +153,16 @@ 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: origX ? origX[id] : di.x,
+        xLabelVal: di.x,
 
         y0: yp - rad,
         y1: yp + rad,
-        yLabelVal: origY ? origY[id] : di.y,
+        yLabelVal: di.y,
 
         cd: fakeCd,
         distance: minDist,

test/jasmine/tests/gl2d_click_test.js

@@ -627,6 +627,12 @@ 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({
@@ -641,6 +647,50 @@ 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);
     });
 });