clarify showspikes and improve spike color contrast

Author: Lexachoc

src/plots/ternary/layout_attributes.js

@@ -63,7 +63,12 @@ var ternaryAxesAttrs = {
         ].join(' ')
     },
     // spikelines
-    showspikes: axesAttrs.showspikes,
+    showspikes: extendFlat({}, axesAttrs.showspikes, {
+        description: [
+            'Determines whether or not spikes (aka droplines) are drawn for this axis.',
+            'Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.',
+        ].join(' ')
+    }),
     spikecolor: axesAttrs.spikecolor,
     spikethickness: axesAttrs.spikethickness,
     spikedash: axesAttrs.spikedash,

src/plots/ternary/layout_defaults.js

@@ -65,6 +65,10 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
         return Lib.coerce(containerIn, containerOut, axAttrs, attr, dflt);
     }
 
+    function coerce2(attr, dflt) {
+        return Lib.coerce2(containerIn, containerOut, axAttrs, attr, dflt);
+    }
+
     coerce('uirevision', ternaryLayoutOut.uirevision);
 
     containerOut.type = 'linear'; // no other types allowed for ternary
@@ -123,11 +127,18 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
     coerce('hoverformat');
     coerce('layer');
 
-    if(coerce('showspikes')) {
-        coerce('spikecolor');
-        coerce('spikethickness');
-        coerce('spikedash');
-        coerce('spikemode');
-        coerce('spikesnap');
+    var spikecolor = coerce2('spikecolor');
+    var spikethickness = coerce2('spikethickness');
+    var spikedash = coerce2('spikedash');
+    var spikemode = coerce2('spikemode');
+    var spikesnap = coerce2('spikesnap');
+    var showSpikes = coerce('showspikes', !!spikecolor || !!spikethickness || !!spikedash || !!spikemode || !!spikesnap);
+
+    if(!showSpikes) {
+        delete containerOut.spikecolor;
+        delete containerOut.spikethickness;
+        delete containerOut.spikedash;
+        delete containerOut.spikemode;
+        delete containerOut.spikesnap;
     }
 }

src/plots/ternary/ternary.js

@@ -179,6 +179,8 @@ proto.drawSpikelines = function (hoverPoint, spikePoint, cursorXVal, cursorYVal)
 
     const span = this.sum - axes[0].min - axes[1].min - axes[2].min;
 
+    const contrastColor = Color.combine(fullLayout[this.id].bgcolor, fullLayout.paper_bgcolor);
+
     let layer;
 
     for(let i = 0; i < axes.length; i++) {
@@ -235,7 +237,11 @@ proto.drawSpikelines = function (hoverPoint, spikePoint, cursorXVal, cursorYVal)
             [this.w * (1 + fc) / 2, this.h * fc, this.w * fc, this.h] // caxis
         ][i];
 
-        const color = axis.spikecolor || selectedPoint.color || axis.color;
+        const pointColor = selectedPoint.color || axis.color;
+        const dfltColor = Color.wcagContrast(pointColor, contrastColor) < 1.5
+                ? Color.contrast(contrastColor)
+                : pointColor;
+        const color = axis.spikecolor || dfltColor;
         const thickness = axis.spikethickness;
         const mode = axis.spikemode;
 

src/types/generated/schema.d.ts

@@ -14752,7 +14752,7 @@ export interface TernaryLayout {
          */
         showline?: boolean;
         /**
-         * Determines whether or not spikes (aka droplines) are drawn for this axis. Note that spikes will never be drawn when `hovermode` is *false*.
+         * Determines whether or not spikes (aka droplines) are drawn for this axis. Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.
          * @default false
          */
         showspikes?: boolean;
@@ -14941,7 +14941,7 @@ export interface TernaryLayout {
          */
         showline?: boolean;
         /**
-         * Determines whether or not spikes (aka droplines) are drawn for this axis. Note that spikes will never be drawn when `hovermode` is *false*.
+         * Determines whether or not spikes (aka droplines) are drawn for this axis. Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.
          * @default false
          */
         showspikes?: boolean;
@@ -15135,7 +15135,7 @@ export interface TernaryLayout {
          */
         showline?: boolean;
         /**
-         * Determines whether or not spikes (aka droplines) are drawn for this axis. Note that spikes will never be drawn when `hovermode` is *false*.
+         * Determines whether or not spikes (aka droplines) are drawn for this axis. Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.
          * @default false
          */
         showspikes?: boolean;

test/jasmine/tests/ternary_test.js

@@ -787,6 +787,30 @@ describe('ternary spikelines', function() {
         .then(done, done.fail);
     });
 
+    it('uses a contrasting default spike color against background', function(done) {
+        var trace = Lib.extendDeep({}, data[0], {
+            marker: {color: 'white'}
+        });
+        var options = {
+            ternary: {
+                sum: 100,
+                bgcolor: '#eee', // light gray
+                aaxis: {showspikes: true}
+            }
+        };
+
+        Plotly.newPlot(gd, [trace], options).then(function() {
+            hoverAt(-35, 49);
+
+            var line = gd.querySelector('.ternary-spikes line');
+            var labelBox = gd.querySelector('.ternary-spikelabel path');
+
+            expect(line.style.stroke).toBe(rgb('#444'));
+            expect(labelBox.style.fill).toBe(rgb('#444'));
+        })
+        .then(done, done.fail);
+    });
+
     it('keeps redrawn spikes behind the hover label', function(done) {
         Plotly.newPlot(gd, data, layout).then(function() {
             hoverAt(-35, 49);
@@ -1002,9 +1026,9 @@ describe('ternary defaults', function() {
     it('defaults spikes off and coerces each enabled axis independently', function() {
         layoutIn = {ternary: {
             aaxis: {showspikes: true},
-            baxis: {showspikes: true, spikecolor: 'red', spikethickness: 2,
+            baxis: {spikecolor: 'red', spikethickness: 2,
                 spikedash: 'dot', spikemode: 'across+marker', spikesnap: 'cursor'},
-            caxis: {spikecolor: 'blue'}
+            caxis: {showspikes: false, spikecolor: 'blue'}
         }};
         supplyLayoutDefaults(layoutIn, layoutOut, fullData);
         var ternary = layoutOut.ternary;
@@ -1013,13 +1037,15 @@ describe('ternary defaults', function() {
         expect(ternary.aaxis.spikemode).toBe('toaxis');
         expect(ternary.aaxis.spikethickness).toBe(3);
         expect(ternary.aaxis.spikedash).toBe('dash');
+        expect(ternary.baxis.showspikes).toBe(true);
         expect(ternary.baxis.spikecolor).toBe('red');
         expect(ternary.baxis.spikethickness).toBe(2);
         expect(ternary.baxis.spikedash).toBe('dot');
         expect(ternary.baxis.spikemode).toBe('across+marker');
         expect(ternary.baxis.spikesnap).toBe('cursor');
         expect(ternary.caxis.showspikes).toBe(false);
         expect(ternary.caxis.spikecolor).toBeUndefined();
+        expect(ternary.caxis.spikethickness).toBeUndefined();
     });
 
     it('should coerce \'min\' values to 0 and delete them for user data if they contradict', function() {

test/plot-schema.json

@@ -10786,7 +10786,7 @@
             "valType": "boolean"
           },
           "showspikes": {
-            "description": "Determines whether or not spikes (aka droplines) are drawn for this axis. Note that spikes will never be drawn when `hovermode` is *false*.",
+            "description": "Determines whether or not spikes (aka droplines) are drawn for this axis. Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.",
             "dflt": false,
             "editType": "plot",
             "valType": "boolean"
@@ -11344,7 +11344,7 @@
             "valType": "boolean"
           },
           "showspikes": {
-            "description": "Determines whether or not spikes (aka droplines) are drawn for this axis. Note that spikes will never be drawn when `hovermode` is *false*.",
+            "description": "Determines whether or not spikes (aka droplines) are drawn for this axis. Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.",
             "dflt": false,
             "editType": "plot",
             "valType": "boolean"
@@ -11908,7 +11908,7 @@
             "valType": "boolean"
           },
           "showspikes": {
-            "description": "Determines whether or not spikes (aka droplines) are drawn for this axis. Note that spikes will never be drawn when `hovermode` is *false*.",
+            "description": "Determines whether or not spikes (aka droplines) are drawn for this axis. Ternary spikes are accompanied by axis value labels formatted according to `hoverformat`.",
             "dflt": false,
             "editType": "plot",
             "valType": "boolean"