Merge pull request #3778 from plotly/fix3776-waterfall-hovermode-closest

Bug fix waterfall hovermode closest decreasing values

Author: archmoj

src/traces/bar/hover.js

@@ -34,6 +34,7 @@ function hoverOnBars(pointData, xval, yval, hovermode) {
     var trace = cd[0].trace;
     var t = cd[0].t;
     var isClosest = (hovermode === 'closest');
+    var isWaterfall = (trace.type === 'waterfall');
     var maxHoverDistance = pointData.maxHoverDistance;
     var maxSpikeDistance = pointData.maxSpikeDistance;
 
@@ -82,10 +83,17 @@ function hoverOnBars(pointData, xval, yval, hovermode) {
     }
 
     function sizeFn(di) {
+        var v = sizeVal;
+        var b = di.b;
+        var s = di[sizeLetter];
+
+        if(isWaterfall) {
+            s += Math.abs(di.rawS || 0);
+        }
+
         // add a gradient so hovering near the end of a
         // bar makes it a little closer match
-        return Fx.inbox(di.b - sizeVal, di[sizeLetter] - sizeVal,
-            maxHoverDistance + (di[sizeLetter] - sizeVal) / (di[sizeLetter] - di.b) - 1);
+        return Fx.inbox(b - v, s - v, maxHoverDistance + (s - v) / (s - b) - 1);
     }
 
     if(trace.orientation === 'h') {

test/image/mocks/waterfall_profit-loss_2018vs2019_rectangle.json

@@ -150,6 +150,7 @@
         "margin": { "l": 150 },
         "height": 800,
         "width": 800,
+        "hovermode": "closest",
         "showlegend": true
     }
 }

test/jasmine/tests/waterfall_test.js

@@ -1257,6 +1257,13 @@ describe('waterfall hover', function() {
             expect(out.style).toEqual([0, '#3D9970', 0, 13.23]);
             assertPos(out.pos, [11.87, 59.33, 52.71, 52.71]);
         });
+
+        it('should return the correct hover point data (case closest - decreasing case)', function() {
+            var out = _hover(gd, 0.8, 4, 'closest');
+
+            expect(out.style).toBeCloseToArray([1, '#FF4136', 1, -9.47]);
+            assertPos(out.pos, [137, 181, 266, 266]);
+        });
     });
 
     describe('text labels', function() {
@@ -1371,6 +1378,7 @@ describe('waterfall hover', function() {
                     [-3.9, 1, 'closest'],
                     [5.9, 1.9, 'closest'],
                     [-3.9, -10, 'x'],
+                    [1, 2.1, 'closest'],
                     [5.9, 19, 'x']
                 ].forEach(function(hoverSpec) {
                     var out = _hover(gd, hoverSpec[0], hoverSpec[1], hoverSpec[2]);
@@ -1382,7 +1390,6 @@ describe('waterfall hover', function() {
                 // then a few that are off the edge so yield nothing
                 [
                     [1, -0.1, 'closest'],
-                    [1, 2.1, 'closest'],
                     [-4.1, 1, 'closest'],
                     [6.1, 1, 'closest'],
                     [-4.1, 1, 'x'],