Merge pull request #7503 from Lexachoc/fix-hover-histogram

fix hover event not triggered on consecutive empty bins (count=0) with `hovermode:'x'` for histogram

Author: camdecoster

draftlogs/7503_fix.md

@@ -0,0 +1 @@
+Fix hover event not triggered on consecutive empty bins (count=0) with `hovermode:'x'` for histogram [[#7503](https://github.com/plotly/plotly.js/pull/7503)], with thanks to @Lexachoc for the contribution!

src/components/fx/hover.js

@@ -2283,7 +2283,8 @@ function hoverChanged(gd, evt, oldhoverdata) {
 
         if(oldPt.curveNumber !== newPt.curveNumber ||
             String(oldPt.pointNumber) !== String(newPt.pointNumber) ||
-            String(oldPt.pointNumbers) !== String(newPt.pointNumbers)
+            String(oldPt.pointNumbers) !== String(newPt.pointNumbers) ||
+            oldPt.binNumber !== newPt.binNumber
         ) {
             return true;
         }

test/jasmine/tests/hover_label_test.js

@@ -1188,7 +1188,7 @@ describe('hover info', function() {
                 });
             })
             .then(done, done.fail);
-        });
+        });        
 
         it('will show a category range if you ask nicely', function(done) {
             var gd = createGraphDiv();
@@ -1217,6 +1217,41 @@ describe('hover info', function() {
             })
             .then(done, done.fail);
         });
+
+        it('will update when switching from one empty bin to another', done => {
+            const gd = createGraphDiv();
+
+            Plotly
+                .newPlot(
+                    gd,
+                    [{
+                        x: [
+                            0.025,0.025,0.025,0.025,0.025,
+                            0.075,0.075,0.075,0.075,0.075,
+                            0.125,0.125,0.125,0.125,0.125,0.125,
+                            0.175,0.175,0.175,0.175,
+                            0.475,0.475,0.475
+                        ],
+                        xbins: { start: 0, end: 0.5, size: 0.10 },
+                        type: 'histogram'
+                    }],
+                    {
+                        hovermode: 'x',
+                        width: 500,
+                        height: 400,
+                        margin: {l: 0, t: 0, r: 0, b: 0}
+                    }
+                )
+                .then(() => {
+                    let hoverData;
+                    gd.on('plotly_hover', e => { hoverData = e; });
+                    _hoverNatural(gd, 250, 200);
+                    expect(hoverData.points[0].binNumber).toBe(2)
+                    _hoverNatural(gd, 300, 200);
+                    expect(hoverData.points[0].binNumber).toBe(3)
+                })
+                .then(done, done.fail);
+        });
     });
 
     ['candlestick', 'ohlc'].forEach(function(type) {