Merge pull request #4665 from plotly/spike-hover-congruence

introduce spikesnap mode "hovered data"

Author: antoinerg

src/components/fx/hover.js

@@ -520,7 +520,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
                     if(closestPoints && closestPoints.length) {
                         var tmpPoint;
                         var closestVPoints = closestPoints.filter(function(point) {
-                            return point.xa.showspikes;
+                            return point.xa.showspikes && point.xa.spikesnap !== 'hovered data';
                         });
                         if(closestVPoints.length) {
                             var closestVPt = closestVPoints[0];
@@ -533,7 +533,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
                         }
 
                         var closestHPoints = closestPoints.filter(function(point) {
-                            return point.ya.showspikes;
+                            return point.ya.showspikes && point.ya.spikesnap !== 'hovered data';
                         });
                         if(closestHPoints.length) {
                             var closestHPt = closestHPoints[0];

src/plots/cartesian/layout_attributes.js

@@ -580,7 +580,7 @@ module.exports = {
     },
     spikesnap: {
         valType: 'enumerated',
-        values: ['data', 'cursor'],
+        values: ['data', 'cursor', 'hovered data'],
         dflt: 'data',
         role: 'style',
         editType: 'none',

src/plots/cartesian/layout_defaults.js

@@ -255,7 +255,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         var spikethickness = coerce2('spikethickness', unifiedHover ? 1.5 : undefined);
         var spikedash = coerce2('spikedash', unifiedHover ? 'dot' : undefined);
         var spikemode = coerce2('spikemode', unifiedHover ? 'across' : undefined);
-        var spikesnap = coerce2('spikesnap');
+        var spikesnap = coerce2('spikesnap', unifiedHover ? 'hovered data' : undefined);
         var showSpikes = coerce('showspikes', !!unifiedSpike || !!spikecolor || !!spikethickness || !!spikedash || !!spikemode || !!spikesnap);
 
         if(!showSpikes) {

test/jasmine/tests/hover_label_test.js

@@ -4044,6 +4044,7 @@ describe('hovermode: (x|y)unified', function() {
                 expect(ax.spikethickness).toBe(1.5);
                 expect(ax.spikedash).toBe('dot');
                 expect(ax.spikecolor).toBe('red');
+                expect(ax.spikesnap).toBe('hovered data');
                 expect(gd._fullLayout.yaxis.showspike).toBeFalse;
             })
             .catch(failTest)
@@ -4060,6 +4061,7 @@ describe('hovermode: (x|y)unified', function() {
                 expect(ax.spikethickness).toBe(1.5);
                 expect(ax.spikedash).toBe('dot');
                 expect(ax.spikecolor).toBe('red');
+                expect(ax.spikesnap).toBe('hovered data');
                 expect(gd._fullLayout.yaxis.showspike).toBeFalse;
             })
             .catch(failTest)
@@ -4251,17 +4253,12 @@ describe('hovermode: (x|y)unified', function() {
         Plotly.newPlot(gd, mockCopy)
             .then(function(gd) {
                 _hover(gd, {xval: 1});
-                // assertLabel({title: 'B', items: ['asdf', 'asdf']});
+
                 assertSymbol([
                   ['rgb(0, 255, 0)', '0px', ''],
                   ['rgb(255, 255, 0)', '5px', 'rgb(0, 0, 127)']
                 ]);
             })
-            .then(function() {
-                _hover(gd, {xval: 4});
-                // assertLabel({title: 'E', items: ['asdf', 'asdf']});
-                // assertSymbol([['rgb(168, 140, 33)', '4px', 'rgb(111, 193, 115)']]);
-            })
             .catch(failTest)
             .then(done);
     });

test/jasmine/tests/hover_spikeline_test.js

@@ -298,6 +298,33 @@ describe('spikeline hover', function() {
         .then(done);
     });
 
+    it('does not show spikes if no points are hovered in the spikesnap "hovered data" mode', function(done) {
+        var _mock = makeMock('toaxis', 'x');
+        Plotly.newPlot(gd, _mock)
+        .then(function() {
+            _setSpikedistance(-1);
+        })
+        .then(function() {
+            _hover({xval: 1.5});
+            _assert(
+                [[558, 401, 558, 251], [80, 251, 558, 251]], [[83, 251]]
+            );
+            return Plotly.relayout(gd, 'xaxis.spikesnap', 'hovered data');
+        })
+        .then(function() {
+            _hover({xval: 1.5});
+            _assert([[80, 251, 558, 251]], [[83, 251]]);
+
+            return Plotly.relayout(gd, 'yaxis.spikesnap', 'hovered data');
+        })
+        .then(function() {
+            _hover({xval: 1.5});
+            _assert([], []);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('doesn\'t switch between toaxis and across spikemodes on switching the hovermodes', function(done) {
         var _mock = makeMock('toaxis', 'closest');