plotly · jonmmease · Feb 19, 2021 · Feb 13, 2021 · Feb 17, 2021 · Feb 17, 2021
diff --git a/src/lib/svg_text_utils.js b/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,

diff --git a/src/traces/parcats/parcats.js b/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) {

diff --git a/src/traces/parcoords/axisbrush.js b/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) {

diff --git a/src/traces/parcoords/constants.js b/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

diff --git a/src/traces/parcoords/parcoords.js b/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);
 };
diff --git a/src/traces/sankey/render.js b/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);});
 

diff --git a/test/image/baselines/gl2d_parcoords_dark_background.png b/test/image/baselines/gl2d_parcoords_dark_background.png
diff --git a/test/image/baselines/parcats_bad-displayindex.png b/test/image/baselines/parcats_bad-displayindex.png
diff --git a/test/image/baselines/parcats_basic.png b/test/image/baselines/parcats_basic.png
diff --git a/test/image/baselines/parcats_basic_freeform.png b/test/image/baselines/parcats_basic_freeform.png
diff --git a/test/image/baselines/parcats_bundled.png b/test/image/baselines/parcats_bundled.png
diff --git a/test/image/baselines/parcats_bundled_reversed.png b/test/image/baselines/parcats_bundled_reversed.png
diff --git a/test/image/baselines/parcats_colorscale_template.png b/test/image/baselines/parcats_colorscale_template.png
diff --git a/test/image/baselines/parcats_dark.png b/test/image/baselines/parcats_dark.png
diff --git a/test/image/baselines/parcats_grid_subplots.png b/test/image/baselines/parcats_grid_subplots.png
diff --git a/test/image/baselines/parcats_hoveron_color.png b/test/image/baselines/parcats_hoveron_color.png
diff --git a/test/image/baselines/parcats_hoveron_dimension.png b/test/image/baselines/parcats_hoveron_dimension.png
diff --git a/test/image/baselines/parcats_reordered.png b/test/image/baselines/parcats_reordered.png
diff --git a/test/image/baselines/parcats_unbundled.png b/test/image/baselines/parcats_unbundled.png
diff --git a/test/image/mocks/gl2d_parcoords_dark_background.json b/test/image/mocks/gl2d_parcoords_dark_background.json
@@ -0,0 +1,80 @@
+{
+  "layout": {
+    "width": 1184,
+    "height": 400,
+    "title": {"text": "Widget parameters and cost"},
+    "font": {"color": "white"},
+    "paper_bgcolor": "black"
+  },
+
+  "data": [{
+
+    "type": "parcoords",
+
+    "line": {
+      "showscale": true,
+      "reversescale": true,
+      "colorscale": "Jet",
+      "cmin": -4000,
+      "cmax": -100,
+      "color": [-41, -1317, -164, -1856, -79, -931, -191, -2983, -341, -3846, -278, -3019, -523, -2357, -985, -3447, -211, -2842, -458, -4388, -784, -2563, -935, -2253, -313, -3667, -1479, -1030, -632, -623, -1945, -1324, -1221, -878, -947, -1615, -697, -575, -482, -905, -869, -433, -484, -349, -667, -248, -1135, -888, -1019, -223, -2067, -729, -579, -659, -334, -340, -554, -455, -377, -375, -453, -834, -934, -334, -369, -290, -354, -497, -490, -329, -729, -1794, -151, -1162, -3935, -1013, -509, -825, -997, -320, -680, -422, -785, -542, -563, -489, -1283, -680, -78, -450, -514, -449, -548, -661, -641, -503, -570, -257, -394, -450]
+    },
+
+    "dimensions": [
+      {
+        "constraintrange": [100000, 150000],
+        "label": "Block height",
+        "values": [32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 86600, 163400, 162600, 90000, 93100, 163000, 140500, 130000, 100700, 164500, 147700, 121700, 107500, 176600, 133600, 111100, 93100, 72400, 130100, 54500, 182600, 160300, 218100, 66500, 95800, 164800, 107200, 101600, 91100, 91100, 78100, 63300, 75700, 69600, 88500, 115800, 195700, 88900, 74800, 65400, 74900, 115300, 91400, 67800, 85300, 171300, 32000, 227900, 163200, 122899, 112300, 101500, 111199, 73300, 120800, 93100, 117200, 118500, 104800, 108500, 146500, 90300, 32000, 93000, 110700, 103500, 93300, 106300, 118500, 93000, 67600, 51400, 89000, 94000]
+      },
+      {
+        "label": "Block width",
+        "range": [0, 700000],
+        "tickformat": "",
+        "values": [268630, 489543, 379086, 600000, 489543, 268630, 600000, 379086, 268630, 489543, 379086, 600000, 489543, 268630, 600000, 379086, 268630, 489543, 379086, 600000, 489543, 268630, 600000, 379086, 268630, 489543, 436900, 373600, 268630, 439000, 381800, 491200, 402800, 381400, 485600, 600000, 372200, 394700, 383800, 401100, 356500, 313200, 487100, 490700, 432299, 530300, 521500, 456700, 333800, 343200, 394000, 328200, 487700, 383600, 317700, 324600, 482900, 515100, 500100, 562700, 486000, 453400, 352900, 331300, 496200, 469099, 472500, 354700, 507700, 509000, 439300, 525300, 347600, 379000, 432800, 378800, 383200, 523800, 600000, 313600, 497700, 411300, 420000, 381100, 342800, 385900, 268630, 495800, 488000, 446400, 397900, 373300, 385700, 396500, 475700, 510600, 586800, 596000, 407600, 439200]
+      },
+      {
+        "label": "Cylinder material",
+        "tickvals": [0, 0.5, 1, 2, 3],
+        "ticktext": ["A", "AB", "B", "Y", "Z"],
+        "values": [0, 0, 1, 0.5, 2, 3, 3, 0, 1, 1, 2, 2, 3, 0, 0, 1, 2, 2, 3, 3, 0, 1, 1, 2, 3, 3, 3, 0, 2, 3, 1, 0, 1, 3, 1, 0, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 2, 2, 3, 2, 2, 0, 0, 2, 2, 2, 0, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 1, 1, 2, 0, 3, 0, 2, 2, 0, 2, 0, 2, 2, 0, 2, 2, 2, 2, 0, 0, 2, 2, 0, 2, 2, 2]
+      },
+      {
+        "label": "Block material",
+        "tickvals": [0, 1, 2, 3],
+        "range": [-1, 4],
+        "values": [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 1, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+      },
+      {
+        "label": "Total weight",
+        "visible": true,
+        "values": [160, 1324, 252, 1711, 173, 624, 228, 2474, 371, 3103, 312, 2408, 460, 1727, 754, 2457, 227, 1963, 354, 2797, 377, 1327, 462, 1009, 166, 1415, 1118, 1063, 593, 498, 959, 1331, 1146, 645, 921, 1596, 663, 568, 492, 833, 630, 445, 504, 394, 647, 314, 1039, 829, 911, 282, 925, 681, 581, 506, 368, 373, 628, 538, 418, 419, 478, 884, 847, 369, 410, 344, 396, 501, 510, 379, 733, 1649, 239, 1035, 1839, 967, 514, 875, 794, 414, 664, 447, 839, 540, 636, 499, 1059, 743, 173, 473, 519, 465, 623, 726, 631, 521, 643, 323, 424, 472]
+      },
+      {
+        "visible": false,
+        "values": [1125, 9274, 2735, 16920, 2193, 20704, 4814, 34689, 5565, 46554, 5225, 38887, 9746, 37715, 17798, 55250, 5697, 49083, 11226, 81939, 24258, 62488, 27363, 61924, 12511, 106196, 24444, 7443, 9111, 12527, 50738, 9320, 12291, 17571, 9508, 11176, 9142, 7687, 6724, 11219, 17825, 6506, 6367, 4966, 8495, 3860, 12844, 10688, 13026, 4007, 57281, 9790, 7335, 13748, 5358, 5393, 4401, 3769, 5233, 5058, 6047, 6188, 11899, 5297, 5154, 4406, 5061, 7022, 6358, 4721, 7723, 16745, 2651, 14194, 100772, 10504, 7021, 6131, 16730, 2904, 8334, 5968, 5876, 7394, 4454, 6800, 18376, 5204, 2190, 6146, 7013, 6412, 4361, 5082, 8028, 6484, 4504, 3832, 5687, 6174]
+      },
+      {
+        "label": "Assembly penalty weight",
+        "values": [9, 794, 34, 1409, 17, 536, 39, 7133, 115, 9843, 107, 7017, 273, 5131, 1210, 9032, 82, 7312, 252, 16778, 760, 4349, 891, 4228, 123, 10800, 1593, 467, 260, 226, 2940, 803, 689, 420, 422, 1229, 275, 198, 150, 423, 423, 134, 146, 89, 248, 55, 612, 401, 546, 52, 4208, 307, 194, 257, 91, 93, 178, 133, 99, 98, 131, 345, 461, 90, 96, 69, 91, 160, 148, 81, 274, 1332, 31, 667, 11733, 502, 163, 354, 480, 67, 252, 120, 303, 181, 162, 153, 1142, 251, 17, 131, 165, 135, 162, 222, 230, 154, 198, 58, 109, 132]
+      },
+      {
+        "label": "Height st width",
+        "values": [236630, 326876, 347086, 437333, 457543, 105963, 568000, 216420, 236630, 326876, 347086, 437333, 457543, 105963, 568000, 216420, 236630, 326876, 347086, 437333, 457543, 105963, 568000, 216420, 236630, 326876, 350300, 210200, 106030, 349000, 288700, 328200, 262300, 251400, 384900, 435500, 224500, 273000, 276300, 224500, 222900, 202100, 394000, 418300, 302200, 475800, 338900, 296400, 115700, 276700, 298200, 163400, 380500, 282000, 226600, 233500, 404799, 451800, 424400, 493100, 397500, 337600, 157200, 242399, 421400, 403700, 397600, 239400, 416300, 441200, 354000, 354000, 315599, 151100, 269600, 255900, 270900, 422299, 488800, 240300, 376900, 318200, 302800, 262600, 238000, 277400, 122130, 405500, 455999, 353400, 287200, 269800, 292400, 290200, 357200, 417600, 519200, 544600, 318600, 345200]
+      },
+      {
+        "label": "Min height width",
+        "range": [200000, -30000],
+        "constraintrange": [0, 100000],
+        "values": [5137, 113712, -5909, 102666, -16955, 135803, -28000, 124758, 5137, 113712, -5909, 102666, -16955, 135803, -28000, 124758, 5137, 113712, -5909, 102666, -16955, 135803, -28000, 124758, 5137, 113712, 42910, 126039, 135736, 46100, 54920, 113880, 100220, 91860, 52140, 104500, 110480, 82230, 69120, 136490, 97950, 79780, 44390, 23330, 86870, 1469, 130450, 114629, 184720, 32180, 56400, 131980, 58430, 63240, 59330, 58640, 29810, 11790, 25690, 13330, 39900, 70460, 160410, 55770, 25179, 18490, 27650, 79830, 40630, 16900, 41369, 118770, -2760, 190000, 119920, 85020, 73980, 49120, 51200, 41940, 71030, 51970, 75200, 80390, 70520, 69910, 119636, 40720, -16800, 48360, 70910, 66170, 54730, 66650, 70930, 41940, 8919, -8201, 48240, 50080]
+      },
+      {
+        "label": "Min width diameter",
+        "values": [98453, 319366, 234498, 455411, 391333, 147711, 479081, 208910, 124041, 344954, 280876, 501789, 368624, 98453, 429823, 234498, 170419, 391333, 258167, 479081, 319366, 124041, 455411, 280876, 147711, 368624, 315981, 203423, 170419, 318081, 237211, 321023, 258211, 260481, 341011, 429823, 273989, 296489, 285589, 302889, 235581, 214989, 388889, 392489, 334089, 432089, 423289, 358489, 235589, 244989, 223823, 229989, 389489, 262681, 219489, 226389, 312723, 344923, 401889, 464489, 387789, 283223, 254689, 233089, 397989, 370889, 374289, 256489, 409489, 410789, 294711, 380711, 203011, 280789, 288211, 234211, 284989, 353623, 479081, 143423, 399489, 313089, 249823, 282889, 172623, 287689, 170419, 325623, 389789, 348189, 299689, 275089, 215523, 226323, 377489, 412389, 416623, 497789, 309389, 340989]
+      },
+      {
+        "label": "RF block",
+        "values": [1417, 23377, 3376, 33336, 5635, 10812, 6898, 21273, 2484, 35126, 5626, 51096, 7384, 22020, 18912, 52449, 7498, 87528, 11359, 107154, 9197, 18159, 13115, 41120, 4254, 53966, 17129, 14957, 12469, 12882, 19875, 23547, 16325, 15238, 15452, 31817, 18210, 16237, 13815, 24070, 14163, 10748, 16292, 12787, 19559, 10597, 34781, 25859, 23121, 7331, 19298, 17056, 18788, 12009, 8997, 9280, 10990, 9825, 13690, 14547, 15443, 14758, 22429, 9324, 13396, 10915, 12615, 13307, 16842, 12533, 11312, 29347, 2923, 28796, 42332, 12953, 14401, 16151, 23973, 4730, 21716, 13116, 13175, 15085, 8140, 14046, 15629, 13231, 5612, 14571, 14929, 12812, 9048, 10826, 20129, 17258, 12673, 11513, 12391, 14423]
+      }
+    ]
+  }]
+}