Cartesian dropline support

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }
 

build/ploticon.js

@@ -114,5 +114,11 @@ module.exports = {
  'path': 'm0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z',
  'ascent': 850,
  'descent': -150
+ },
+ 'spikeline': {
+ 'width': 1000,
+ 'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
+ 'ascent': 850,
+ 'descent': -150
  }
 };

src/components/dragelement/unhover.js

@@ -41,6 +41,8 @@ unhover.raw = function unhoverRaw(gd, evt) {
  }
 
  fullLayout._hoverlayer.selectAll('g').remove();
+ fullLayout._hoverlayer.selectAll('line').remove();
+ fullLayout._hoverlayer.selectAll('circle').remove();
  gd._hoverdata = undefined;
 
  if(evt.target && oldhoverdata) {

src/components/drawing/attributes.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+exports.dash = {
+ valType: 'string',
+ // string type usually doesn't take values... this one should really be
+ // a special type or at least a special coercion function, from the GUI
+ // you only get these values but elsewhere the user can supply a list of
+ // dash lengths in px, and it will be honored
+ values: ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'],
+ dflt: 'solid',
+ role: 'style',
+ description: [
+ 'Sets the dash style of lines. Set to a dash type string',
+ '(*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*)',
+ 'or a dash length list in px (eg *5px,10px,2px,2px*).'
+ ].join(' ')
+};

src/components/drawing/index.js

@@ -113,6 +113,17 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
  lineWidth = +lineWidth || 0;
+
+ dash = drawing.dashStyle(dash, lineWidth);
+
+ s.style({
+ 'stroke-dasharray': dash,
+ 'stroke-width': lineWidth + 'px'
+ });
+};
+
+drawing.dashStyle = function(dash, lineWidth) {
+ lineWidth = +lineWidth || 1;
  var dlw = Math.max(lineWidth, 3);
 
  if(dash === 'solid') dash = '';
@@ -127,10 +138,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
  }
  // otherwise user wrote the dasharray themselves - leave it be
 
- s.style({
- 'stroke-dasharray': dash,
- 'stroke-width': lineWidth + 'px'
- });
+ return dash;
 };
 
 drawing.fillGroupStyle = function(s) {

src/components/modebar/buttons.js

@@ -177,17 +177,20 @@ function handleCartesian(gd, ev) {
  astr = button.getAttribute('data-attr'),
  val = button.getAttribute('data-val') || true,
  fullLayout = gd._fullLayout,
- aobj = {};
+ aobj = {},
+ axList = Axes.list(gd, null, true),
+ ax,
+ allEnabled = 'on',
+ i;
 
  if(astr === 'zoom') {
  var mag = (val === 'in') ? 0.5 : 2,
  r0 = (1 + mag) / 2,
- r1 = (1 - mag) / 2,
- axList = Axes.list(gd, null, true);
+ r1 = (1 - mag) / 2;
 
- var ax, axName;
+ var axName;
 
- for(var i = 0; i < axList.length; i++) {
+ for(i = 0; i < axList.length; i++) {
  ax = axList[i];
 
  if(!ax.fixedrange) {
@@ -202,6 +205,12 @@ function handleCartesian(gd, ev) {
  aobj[axName + '.range[0]'] = rangeInitial[0];
  aobj[axName + '.range[1]'] = rangeInitial[1];
  }
+ if(ax._showSpikeInitial !== undefined) {
+ aobj[axName + '.showspikes'] = ax._showSpikeInitial;
+ if(allEnabled === 'on' && !ax._showSpikeInitial) {
+ allEnabled = 'off';
+ }
+ }
  }
  else {
  var rangeNow = [
@@ -219,12 +228,24 @@ function handleCartesian(gd, ev) {
  }
  }
  }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
  else {
  // if ALL traces have orientation 'h', 'hovermode': 'x' otherwise: 'y'
  if(astr === 'hovermode' && (val === 'x' || val === 'y')) {
  val = fullLayout._isHoriz ? 'y' : 'x';
  button.setAttribute('data-val', val);
+ if(val !== 'closest') {
+ fullLayout._cartesianSpikesEnabled = 'off';
+ }
+ } else if(astr === 'hovermode' && val === 'closest') {
+ for(i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ if(allEnabled === 'on' && !ax.showspikes) {
+ allEnabled = 'off';
+ }
+ }
+ fullLayout._cartesianSpikesEnabled = allEnabled;
  }
 
  aobj[astr] = val;
@@ -518,3 +539,38 @@ modeBarButtons.resetViews = {
  // geo subplots.
  }
 };
+
+modeBarButtons.toggleSpikelines = {
+ name: 'toggleSpikelines',
+ title: 'Toggle Spike Lines',
+ icon: Icons.spikeline,
+ attr: '_cartesianSpikesEnabled',
+ val: 'on',
+ click: function(gd) {
+ var fullLayout = gd._fullLayout;
+
+ fullLayout._cartesianSpikesEnabled = fullLayout.hovermode === 'closest' ?
+ (fullLayout._cartesianSpikesEnabled === 'on' ? 'off' : 'on') : 'on';
+
+ var aobj = setSpikelineVisibility(gd);
+
+ aobj.hovermode = 'closest';
+ Plotly.relayout(gd, aobj);
+ }
+};
+
+function setSpikelineVisibility(gd) {
+ var fullLayout = gd._fullLayout,
+ axList = Axes.list(gd, null, true),
+ ax,
+ axName,
+ aobj = {};
+
+ for(var i = 0; i < axList.length; i++) {
+ ax = axList[i];
+ axName = ax._name;
+ aobj[axName + '.showspikes'] = fullLayout._cartesianSpikesEnabled === 'on' ? true : false;
+ }
+
+ return aobj;
+}

src/components/modebar/manage.js

@@ -138,7 +138,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
  addGroup(['hoverClosestGl2d']);
  }
  else if(hasCartesian) {
- addGroup(['hoverClosestCartesian', 'hoverCompareCartesian']);
+ addGroup(['toggleSpikelines', 'hoverClosestCartesian', 'hoverCompareCartesian']);
  }
  else if(hasPie) {
  addGroup(['hoverClosestPie']);

src/components/modebar/modebar.js

@@ -149,7 +149,7 @@ proto.createButton = function(config) {
  button.setAttribute('data-toggle', config.toggle || false);
  if(config.toggle) d3.select(button).classed('active', true);
 
- button.appendChild(this.createIcon(config.icon || Icons.question));
+ button.appendChild(this.createIcon(config.icon || Icons.question, config.name));
  button.setAttribute('data-gravity', config.gravity || 'n');
 
  return button;
@@ -162,7 +162,7 @@ proto.createButton = function(config) {
  * @Param {string} thisIcon.path
  * @Return {HTMLelement}
  */
-proto.createIcon = function(thisIcon) {
+proto.createIcon = function(thisIcon, name) {
  var iconHeight = thisIcon.ascent - thisIcon.descent,
  svgNS = 'http://www.w3.org/2000/svg',
  icon = document.createElementNS(svgNS, 'svg'),
@@ -172,8 +172,12 @@ proto.createIcon = function(thisIcon) {
  icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
  icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
+ var transform = name === 'toggleSpikelines' ?
+ 'matrix(1.5 0 0 -1.5 0 ' + thisIcon.ascent + ')' :
+ 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')';
+
  path.setAttribute('d', thisIcon.path);
- path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+ path.setAttribute('transform', transform);
  icon.appendChild(path);
 
  return icon;

src/components/shapes/attributes.js

@@ -9,11 +9,10 @@
 'use strict';
 
 var annAttrs = require('../annotations/attributes');
-var scatterAttrs = require('../../traces/scatter/attributes');
+var scatterLineAttrs = require('../../traces/scatter/attributes').line;
+var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 
-var scatterLineAttrs = scatterAttrs.line;
-
 module.exports = {
  _isLinkedToArray: 'shape',
 
@@ -151,7 +150,7 @@ module.exports = {
  line: {
  color: scatterLineAttrs.color,
  width: scatterLineAttrs.width,
- dash: scatterLineAttrs.dash,
+ dash: dash,
  role: 'info'
  },
  fillcolor: {

src/plot_api/plot_api.js

@@ -153,6 +153,9 @@ Plotly.plot = function(gd, data, layout, config) {
  makePlotFramework(gd);
  }
 
+ // save initial show spikes once per graph
+ if(graphWasEmpty) Plotly.Axes.saveShowSpikeInitial(gd);
+
  // prepare the data and find the autorange
 
  // generate calcdata, if we need to
@@ -2121,14 +2124,16 @@ function _relayout(gd, aobj) {
  flags.doticks = flags.dolayoutstyle = true;
  }
  /*
- * hovermodeand dragmode don't need any redrawing, since they just
- * affect reaction to user input, everything else, assume full replot.
+ * hovermode, dragmode, and spikes don't need any redrawing, since they just
+ * affect reaction to user input. Everything else, assume full replot.
  * height, width, autosize get dealt with below. Except for the case of
  * of subplots - scenes - which require scene.updateFx to be called.
  */
- else if(['hovermode', 'dragmode'].indexOf(ai) !== -1) flags.domodebar = true;
- else if(['hovermode', 'dragmode', 'height',
- 'width', 'autosize'].indexOf(ai) === -1) {
+ else if(['hovermode', 'dragmode'].indexOf(ai) !== -1 ||
+ ai.indexOf('spike') !== -1) {
+ flags.domodebar = true;
+ }
+ else if(['height', 'width', 'autosize'].indexOf(ai) === -1) {
  flags.doplot = true;
  }