Add spikecolor, spikethickness, spikedash and spikemode

Move 'dash' function to lib for re-use
Use dynamic contrast color based on same logic as hovertext contrast text

Author: rpaskowitz

src/components/drawing/index.js

@@ -113,19 +113,8 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 
 drawing.dashLine = function(s, dash, lineWidth) {
     lineWidth = +lineWidth || 0;
-    var dlw = Math.max(lineWidth, 3);
-
-    if(dash === 'solid') dash = '';
-    else if(dash === 'dot') dash = dlw + 'px,' + dlw + 'px';
-    else if(dash === 'dash') dash = (3 * dlw) + 'px,' + (3 * dlw) + 'px';
-    else if(dash === 'longdash') dash = (5 * dlw) + 'px,' + (5 * dlw) + 'px';
-    else if(dash === 'dashdot') {
-        dash = (3 * dlw) + 'px,' + dlw + 'px,' + dlw + 'px,' + dlw + 'px';
-    }
-    else if(dash === 'longdashdot') {
-        dash = (5 * dlw) + 'px,' + (2 * dlw) + 'px,' + dlw + 'px,' + (2 * dlw) + 'px';
-    }
-    // otherwise user wrote the dasharray themselves - leave it be
+
+    dash = Lib.dash(dash, lineWidth);
 
     s.style({
         'stroke-dasharray': dash,

src/lib/index.js

@@ -636,3 +636,31 @@ lib.numSeparate = function(value, separators, separatethousands) {
 
     return x1 + x2;
 };
+
+/**
+ * Accepts a named dash style or stroke-dasharray string
+ * and returns a dasharray representing the named type.
+ *
+ * @param   {string} dash named dash format, or dasharray
+ * @param   {number} lineWidth width of the line, used to scale the dashes
+ *
+ * @returns {string} SVG stroke-dasharray formatted string
+ */
+lib.dash = function(dash, lineWidth) {
+    lineWidth = +lineWidth || 1;
+    var dlw = Math.max(lineWidth, 3);
+
+    if(dash === 'solid') dash = '';
+    else if(dash === 'dot') dash = dlw + 'px,' + dlw + 'px';
+    else if(dash === 'dash') dash = (3 * dlw) + 'px,' + (3 * dlw) + 'px';
+    else if(dash === 'longdash') dash = (5 * dlw) + 'px,' + (5 * dlw) + 'px';
+    else if(dash === 'dashdot') {
+        dash = (3 * dlw) + 'px,' + dlw + 'px,' + dlw + 'px,' + dlw + 'px';
+    }
+    else if(dash === 'longdashdot') {
+        dash = (5 * dlw) + 'px,' + (2 * dlw) + 'px,' + dlw + 'px,' + (2 * dlw) + 'px';
+    }
+    // otherwise user wrote the dasharray themselves - leave it be
+
+    return dash;
+};

src/plots/cartesian/axis_defaults.js

@@ -100,6 +100,10 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     containerOut.cleanRange();
 
     coerce('showspikes');
+    coerce('spikecolor');
+    coerce('spikethickness');
+    coerce('spikedash');
+    coerce('spikemode');
 
     handleTickValueDefaults(containerIn, containerOut, coerce, axType);
     handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options);

src/plots/cartesian/graph_interact.js

@@ -857,73 +857,95 @@ function createDroplines(hoverData, opts) {
         yAnchoredBase = yEdge - outerBBox.top,
         xBase = c0.ya.anchor === 'free' ? xFreeBase : xAnchoredBase,
         yBase = c0.xa.anchor === 'free' ? yFreeBase : yAnchoredBase,
-        color = c0.color;
+        xColor = c0.xa.spikecolor ? c0.xa.spikecolor : c0.color,
+        yColor = c0.ya.spikecolor ? c0.ya.spikecolor : c0.color,
+        xContrastColor = tinycolor(xColor).getBrightness() > 128 ?
+                '#000' : Color.background,
+        yContrastColor = tinycolor(yColor).getBrightness() > 128 ?
+                '#000' : Color.background,
+        xThickness = c0.xa.spikethickness,
+        yThickness = c0.ya.spikethickness,
+        xDash = Lib.dash(c0.xa.spikedash, xThickness),
+        yDash = Lib.dash(c0.xa.spikedash, yThickness),
+        xMarker = c0.xa.spikemode.indexOf('marker') !== -1,
+        yMarker = c0.ya.spikemode.indexOf('marker') !== -1,
+        xSpikeLine = c0.xa.spikemode.indexOf('toaxis') !== -1 || c0.xa.spikemode.indexOf('across') !== -1,
+        ySpikeLine = c0.ya.spikemode.indexOf('toaxis') !== -1 || c0.ya.spikemode.indexOf('across') !== -1,
+        xEndSpike = c0.xa.spikemode.indexOf('across') !== -1 ? xBase + xLength : xPoint,
+        yEndSpike = c0.ya.spikemode.indexOf('across') !== -1 ? yBase - yLength : yPoint;
 
     // Remove old dropline items
     container.selectAll('line.dropline').remove();
     container.selectAll('circle.dropline').remove();
 
 
     if(c0.ya.showspikes) {
-        // Background horizontal Line (to y-axis)
-        container.append('line')
-            .attr('x1', xBase)
-            .attr('x2', xPoint)
-            .attr('y1', yPoint)
-            .attr('y2', yPoint)
-            .attr('stroke-width', 5)
-            .attr('stroke', '#fff')
-            .attr('class', 'dropline');
-
-        // Foreground horizontal line (to y-axis)
-        container.append('line')
-            .attr('x1', xBase)
-            .attr('x2', xPoint)
-            .attr('y1', yPoint)
-            .attr('y2', yPoint)
-            .attr('stroke-width', 3)
-            .attr('stroke', color)
-            .attr('stroke-dasharray', '5,5')
-            .attr('class', 'dropline');
-
+        if(ySpikeLine) {
+            // Background horizontal Line (to y-axis)
+            container.append('line')
+                .attr('x1', xBase)
+                .attr('x2', xEndSpike)
+                .attr('y1', yPoint)
+                .attr('y2', yPoint)
+                .attr('stroke-width', yThickness + 2)
+                .attr('stroke', yContrastColor)
+                .attr('class', 'dropline');
+
+            // Foreground horizontal line (to y-axis)
+            container.append('line')
+                .attr('x1', xBase)
+                .attr('x2', xEndSpike)
+                .attr('y1', yPoint)
+                .attr('y2', yPoint)
+                .attr('stroke-width', yThickness)
+                .attr('stroke', yColor)
+                .attr('stroke-dasharray', yDash)
+                .attr('class', 'dropline');
+        }
         // Y axis marker
-        container.append('circle')
-            .attr('cx', xBase)
-            .attr('cy', yPoint)
-            .attr('r', 3)
-            .attr('fill', color)
-            .attr('class', 'dropline');
+        if(yMarker) {
+            container.append('circle')
+                .attr('cx', xAnchoredBase)
+                .attr('cy', yPoint)
+                .attr('r', yThickness)
+                .attr('fill', yColor)
+                .attr('class', 'dropline');
+        }
     }
 
     if(c0.xa.showspikes) {
+        if(xSpikeLine) {
         // Background vertical line (to x-axis)
-        container.append('line')
-            .attr('x1', xPoint)
-            .attr('x2', xPoint)
-            .attr('y1', yPoint)
-            .attr('y2', yBase)
-            .attr('stroke-width', 5)
-            .attr('stroke', '#fff')
-            .attr('class', 'dropline');
-
-        // Foreground vertical line (to x-axis)
-        container.append('line')
-            .attr('x1', xPoint)
-            .attr('x2', xPoint)
-            .attr('y1', yPoint)
-            .attr('y2', yBase)
-            .attr('stroke-width', 3)
-            .attr('stroke', color)
-            .attr('stroke-dasharray', '5,5')
-            .attr('class', 'dropline');
+            container.append('line')
+                .attr('x1', xPoint)
+                .attr('x2', xPoint)
+                .attr('y1', yEndSpike)
+                .attr('y2', yBase)
+                .attr('stroke-width', xThickness + 2)
+                .attr('stroke', xContrastColor)
+                .attr('class', 'dropline');
+
+            // Foreground vertical line (to x-axis)
+            container.append('line')
+                .attr('x1', xPoint)
+                .attr('x2', xPoint)
+                .attr('y1', yEndSpike)
+                .attr('y2', yBase)
+                .attr('stroke-width', xThickness)
+                .attr('stroke', xColor)
+                .attr('stroke-dasharray', xDash)
+                .attr('class', 'dropline');
+        }
 
         // X axis marker
-        container.append('circle')
-            .attr('cx', xPoint)
-            .attr('cy', yBase)
-            .attr('r', 3)
-            .attr('fill', color)
-            .attr('class', 'dropline');
+        if(xMarker) {
+            container.append('circle')
+                .attr('cx', xPoint)
+                .attr('cy', yAnchoredBase)
+                .attr('r', xThickness)
+                .attr('fill', xColor)
+                .attr('class', 'dropline');
+        }
     }
 }
 

src/plots/cartesian/layout_attributes.js

@@ -246,13 +246,57 @@ module.exports = {
     },
     showspikes: {
         valType: 'boolean',
-        dflt: false,
+        dflt: true,
         role: 'style',
         description: [
             'Determines whether or not spikes (aka droplines) are drawn for this axis.',
             'Note: This only takes affect when hovermode = closest'
         ].join(' ')
     },
+    spikecolor: {
+        valType: 'color',
+        dflt: null,
+        role: 'style',
+        description: 'Sets the spike color. If undefined, will use the series color'
+    },
+    spikethickness: {
+        valType: 'number',
+        dflt: 3,
+        role: 'style',
+        description: 'Sets the width (in px) of the zero line.'
+    },
+    spikedash: {
+        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: 'dash',
+        role: 'style',
+        description: [
+            'Sets the style of the lines. Set to a dash string type',
+            'or a dash length in px.'
+        ].join(' ')
+    },
+    spikemode: {
+        valType: 'flaglist',
+        flags: ['toaxis', 'across', 'marker'],
+        extras: ['none'],
+        role: 'style',
+        dflt: 'toaxis',
+        description: [
+            'Determines the drawing mode for the spike line',
+            'If *toaxis*, the line is drawn from the data point to the axis the ',
+            'series is plotted on.',
+
+            'If *across*, the line is drawn across the entire plot area, and',
+            'supercedes *toaxis*.',
+
+            'If *marker*, then a marker dot is drawn on the axis the series is',
+            'plotted on'
+        ].join(' ')
+    },
     tickfont: extendFlat({}, fontAttrs, {
         description: 'Sets the tick font.'
     }),