Merge pull request #5648 from plotly/v2-spike-defaults

New spike defaults in plotly.js v2

Author: archmoj

src/components/fx/layout_attributes.js

@@ -93,7 +93,7 @@ module.exports = {
     spikedistance: {
         valType: 'integer',
         min: -1,
-        dflt: 20,
+        dflt: -1,
         editType: 'none',
         description: [
             'Sets the default distance (in pixels) to look for data to draw',

src/components/fx/layout_defaults.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var Lib = require('../../lib');
-var isUnifiedHover = require('./helpers').isUnifiedHover;
 var layoutAttributes = require('./layout_attributes');
 var handleHoverModeDefaults = require('./hovermode_defaults');
 var handleHoverLabelDefaults = require('./hoverlabel_defaults');
@@ -14,7 +13,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
     var hoverMode = handleHoverModeDefaults(layoutIn, layoutOut);
     if(hoverMode) {
         coerce('hoverdistance');
-        coerce('spikedistance', isUnifiedHover(hoverMode) ? -1 : undefined);
+        coerce('spikedistance');
     }
 
     var dragMode = coerce('dragmode');

src/plots/cartesian/layout_attributes.js

@@ -603,7 +603,7 @@ module.exports = {
     spikesnap: {
         valType: 'enumerated',
         values: ['data', 'cursor', 'hovered data'],
-        dflt: 'data',
+        dflt: 'hovered data',
         editType: 'none',
         description: 'Determines whether spikelines are stuck to the cursor or to the closest datapoints.'
     },

src/plots/cartesian/layout_defaults.js

@@ -253,7 +253,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', unifiedHover ? 'hovered data' : undefined);
+        var spikesnap = coerce2('spikesnap');
         var showSpikes = coerce('showspikes', !!unifiedSpike || !!spikecolor || !!spikethickness || !!spikedash || !!spikemode || !!spikesnap);
 
         if(!showSpikes) {

test/jasmine/tests/hover_spikeline_test.js

@@ -22,13 +22,17 @@ describe('spikeline hover', function() {
 
     function makeMock(spikemode, hovermode) {
         var _mock = Lib.extendDeep({}, require('@mocks/19.json'));
+        _mock.layout.xaxis.spikesnap = 'data';
         _mock.layout.xaxis.showspikes = true;
         _mock.layout.xaxis.spikemode = spikemode;
+        _mock.layout.yaxis.spikesnap = 'data';
         _mock.layout.yaxis.showspikes = true;
         _mock.layout.yaxis.spikemode = spikemode + '+marker';
+        _mock.layout.xaxis2.spikesnap = 'data';
         _mock.layout.xaxis2.showspikes = true;
         _mock.layout.xaxis2.spikemode = spikemode;
         _mock.layout.hovermode = hovermode;
+
         return _mock;
     }
 
@@ -293,9 +297,6 @@ describe('spikeline hover', function() {
     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(
@@ -352,6 +353,7 @@ describe('spikeline hover', function() {
 
     it('increase the range of search for points to draw the spikelines on spikedistance change', function(done) {
         var _mock = makeMock('toaxis', 'closest');
+        _mock.layout.spikedistance = 20;
 
         Plotly.newPlot(gd, _mock).then(function() {
             _hover({xval: 1.6, yval: 2.6});
@@ -391,28 +393,28 @@ describe('spikeline hover', function() {
         Plotly.newPlot(gd, _mock).then(function() {
             _hover({xval: 1.6, yval: 2.6});
             _assert(
-                [],
-                []
+                [[557, 401, 557, 250], [80, 250, 557, 250]],
+                [[83, 250]]
             );
 
             _hover({xval: 26, yval: 36}, 'x2y2');
             _assert(
-                [],
+                [[820, 220, 820, 167]],
                 []
             );
 
-            _setSpikedistance(-1);
+            _setSpikedistance(20);
         })
         .then(function() {
             _hover({xval: 1.6, yval: 2.6});
             _assert(
-                [[557, 401, 557, 250], [80, 250, 557, 250]],
-                [[83, 250]]
+                [],
+                []
             );
 
             _hover({xval: 26, yval: 36}, 'x2y2');
             _assert(
-                [[820, 220, 820, 167]],
+                [],
                 []
             );
         })
@@ -447,6 +449,8 @@ describe('spikeline hover', function() {
         var mockCopy = Lib.extendDeep({}, mock);
         mockCopy.layout.xaxis.showspikes = true;
         mockCopy.layout.yaxis.showspikes = true;
+        mockCopy.layout.xaxis.spikesnap = 'data';
+        mockCopy.layout.yaxis.spikesnap = 'data';
         mockCopy.layout.spikedistance = -1;
         mockCopy.layout.hovermode = 'closest';
 
@@ -498,6 +502,7 @@ describe('spikeline hover', function() {
                 ]
             }],
             layout: {
+                spikedistance: 20,
                 hovermode: 'x',
                 xaxis: { showspikes: true },
                 yaxis: { showspikes: true },
@@ -567,6 +572,7 @@ describe('spikeline hover', function() {
         return {
             width: 600, height: 600, margin: {l: 100, r: 100, t: 100, b: 100},
             showlegend: false,
+            spikedistance: 20,
             xaxis: {range: [-0.5, 1.5], showspikes: true, spikemode: 'toaxis+marker'},
             yaxis: {range: [-1, 3], showspikes: true, spikemode: 'toaxis+marker'},
             hovermode: 'x',
@@ -825,9 +831,9 @@ describe('spikeline hover', function() {
                     data: [makeData(type, 'xaxis', x, data)],
                     layout: {
                         spikedistance: -1,
-                        xaxis: {showspikes: true},
-                        yaxis: {showspikes: true},
-                        zaxis: {showspikes: true},
+                        xaxis: {showspikes: true, spikesnap: 'data'},
+                        yaxis: {showspikes: true, spikesnap: 'data'},
+                        zaxis: {showspikes: true, spikesnap: 'data'},
                         title: {text: trace.type},
                         width: 400, height: 400
                     }