Merge pull request plotly#5506 from plotly/parcoords_text_shadow

Parcoords: Use paper background color for text shadow for better dark mode

Author: jonmmease

src/lib/svg_text_utils.js

@@ -755,6 +755,16 @@ function alignHTMLWith(_base, container, options) {
     };
 }
 
+exports.makeTextShadow = function(offset, color) {
+    var x = offset + 'px ';
+    var y = offset + 'px ';
+    var b = '1px ';
+    return x + y + b + color + ', ' +
+        '-' + x + '-' + y + b + color + ', ' +
+        x + '-' + y + b + color + ', ' +
+        '-' + x + y + b + color;
+};
+
 /*
  * Editable title
  * @param {d3.selection} context: the element being edited. Normally text,

src/traces/parcats/parcats.js

@@ -238,11 +238,7 @@ function performPlot(parcatsModels, graphDiv, layout, svg) {
             })
         .attr('alignment-baseline', 'middle')
 
-        .style('text-shadow',
-            paperColor + ' -1px  1px 2px, ' +
-            paperColor + ' 1px  1px 2px, ' +
-            paperColor + '  1px -1px 2px, ' +
-            paperColor + ' -1px -1px 2px')
+        .style('text-shadow', svgTextUtils.makeTextShadow(1, paperColor))
         .style('fill', 'rgb(0, 0, 0)')
         .attr('x',
             function(d) {

src/traces/parcoords/axisbrush.js

@@ -354,7 +354,7 @@ function attachDragBehavior(selection) {
 
 function startAsc(a, b) { return a[0] - b[0]; }
 
-function renderAxisBrush(axisBrush) {
+function renderAxisBrush(axisBrush, paperColor) {
     var background = axisBrush.selectAll('.background').data(repeat);
 
     background.enter()
@@ -378,7 +378,7 @@ function renderAxisBrush(axisBrush) {
         .classed('highlight-shadow', true)
         .attr('x', -c.bar.width / 2)
         .attr('stroke-width', c.bar.width + c.bar.strokeWidth)
-        .attr('stroke', c.bar.strokeColor)
+        .attr('stroke', paperColor)
         .attr('opacity', c.bar.strokeOpacity)
         .attr('stroke-linecap', 'butt');
 
@@ -402,15 +402,15 @@ function renderAxisBrush(axisBrush) {
         .call(styleHighlight);
 }
 
-function ensureAxisBrush(axisOverlays) {
+function ensureAxisBrush(axisOverlays, paperColor) {
     var axisBrush = axisOverlays.selectAll('.' + c.cn.axisBrush)
         .data(repeat, keyFun);
 
     axisBrush.enter()
         .append('g')
         .classed(c.cn.axisBrush, true);
 
-    renderAxisBrush(axisBrush);
+    renderAxisBrush(axisBrush, paperColor);
 }
 
 function getBrushExtent(brush) {

src/traces/parcoords/constants.js

@@ -20,7 +20,6 @@ module.exports = {
         snapDuration: 150, // tween duration in ms for brush snap for ordinal axes
         snapRatio: 0.25, // ratio of bar extension relative to the distance between two adjacent ordinal values
         snapClose: 0.01, // fraction of inter-value distance to snap to the closer one, even if you're not over it
-        strokeColor: 'white', // Color of the filter bar side lines
         strokeOpacity: 1, // Filter bar side stroke opacity
         strokeWidth: 1, // Filter bar side stroke width in pixels
         handleHeight: 8, // Height of the filter bar vertical resize areas on top and bottom

src/traces/parcoords/parcoords.js

@@ -433,6 +433,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
     var fullLayout = gd._fullLayout;
     var svg = fullLayout._toppaper;
     var glContainer = fullLayout._glcontainer;
+    var paperColor = gd._fullLayout.paper_bgcolor;
 
     calcAllTicks(cdModule);
 
@@ -451,6 +452,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .each(function(d) {
             // FIXME: figure out how to handle multiple instances
             d.viewModel = vm[0];
+            d.viewModel.paperColor = paperColor;
             d.model = d.viewModel ? d.viewModel.model : null;
         });
 
@@ -647,7 +649,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .attr('stroke-width', '1px');
 
     axis.selectAll('text')
-        .style('text-shadow', '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff')
+        .style('text-shadow', svgTextUtils.makeTextShadow(1, paperColor))
         .style('cursor', 'default');
 
     var axisHeading = axisOverlays.selectAll('.' + c.cn.axisHeading)
@@ -749,5 +751,5 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .text(function(d) { return extremeText(d, false); })
         .each(function(d) { Drawing.font(d3.select(this), d.model.rangeFont); });
 
-    brush.ensureAxisBrush(axisOverlays);
+    brush.ensureAxisBrush(axisOverlays, paperColor);
 };

src/traces/sankey/render.js

@@ -15,6 +15,7 @@ var keyFun = gup.keyFun;
 var repeat = gup.repeat;
 var unwrap = gup.unwrap;
 var interpolateNumber = require('d3-interpolate').interpolateNumber;
+var svgTextUtils = require('../../lib/svg_text_utils');
 
 var Registry = require('../../registry');
 
@@ -1024,7 +1025,7 @@ module.exports = function(gd, svg, calcData, layout, callbacks) {
 
     nodeLabel
         .style('text-shadow', function(d) {
-            return d.horizontal ? '-1px 1px 1px #fff, 1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff' : 'none';
+            return d.horizontal ? svgTextUtils.makeTextShadow(1, '#fff') : 'none';
         })
         .each(function(d) {Drawing.font(nodeLabel, d.textFont);});