Skip to content

Commit c755979

Browse files
committed
parcoords: Use paper_bgcolor constraint border and text shadows to support dark modes
1 parent ef92fe6 commit c755979

File tree

4 files changed

+38
-7
lines changed

4 files changed

+38
-7
lines changed

src/traces/parcoords/axisbrush.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ function attachDragBehavior(selection) {
354354

355355
function startAsc(a, b) { return a[0] - b[0]; }
356356

357-
function renderAxisBrush(axisBrush) {
357+
function renderAxisBrush(axisBrush, paperColor) {
358358
var background = axisBrush.selectAll('.background').data(repeat);
359359

360360
background.enter()
@@ -378,7 +378,7 @@ function renderAxisBrush(axisBrush) {
378378
.classed('highlight-shadow', true)
379379
.attr('x', -c.bar.width / 2)
380380
.attr('stroke-width', c.bar.width + c.bar.strokeWidth)
381-
.attr('stroke', c.bar.strokeColor)
381+
.attr('stroke', paperColor)
382382
.attr('opacity', c.bar.strokeOpacity)
383383
.attr('stroke-linecap', 'butt');
384384

@@ -402,15 +402,15 @@ function renderAxisBrush(axisBrush) {
402402
.call(styleHighlight);
403403
}
404404

405-
function ensureAxisBrush(axisOverlays) {
405+
function ensureAxisBrush(axisOverlays, paperColor) {
406406
var axisBrush = axisOverlays.selectAll('.' + c.cn.axisBrush)
407407
.data(repeat, keyFun);
408408

409409
axisBrush.enter()
410410
.append('g')
411411
.classed(c.cn.axisBrush, true);
412412

413-
renderAxisBrush(axisBrush);
413+
renderAxisBrush(axisBrush, paperColor);
414414
}
415415

416416
function getBrushExtent(brush) {

src/traces/parcoords/constants.js

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

src/traces/parcoords/parcoords.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -435,6 +435,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
435435
var svg = fullLayout._toppaper;
436436
var glContainer = fullLayout._glcontainer;
437437
var plotGlPixelRatio = gd._context.plotGlPixelRatio;
438+
var paperColor = gd._fullLayout.paper_bgcolor;
438439

439440
calcAllTicks(cdModule);
440441

@@ -454,6 +455,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
454455
// FIXME: figure out how to handle multiple instances
455456
d.viewModel = vm[0];
456457
d.viewModel.plotGlPixelRatio = plotGlPixelRatio;
458+
d.viewModel.paperColor = paperColor;
457459
d.model = d.viewModel ? d.viewModel.model : null;
458460
});
459461

@@ -650,7 +652,12 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
650652
.attr('stroke-width', '1px');
651653

652654
axis.selectAll('text')
653-
.style('text-shadow', '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff')
655+
.style('text-shadow',
656+
paperColor + ' 1px 1px 1px #fff, ' +
657+
paperColor + ' -1px -1px 1px #fff, ' +
658+
paperColor + ' 1px -1px 1px #fff, ' +
659+
paperColor + ' -1px 1px 1px #fff'
660+
)
654661
.style('cursor', 'default');
655662

656663
var axisHeading = axisOverlays.selectAll('.' + c.cn.axisHeading)
@@ -752,5 +759,5 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
752759
.text(function(d) { return extremeText(d, false); })
753760
.each(function(d) { Drawing.font(d3.select(this), d.model.rangeFont); });
754761

755-
brush.ensureAxisBrush(axisOverlays);
762+
brush.ensureAxisBrush(axisOverlays, paperColor);
756763
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"layout": {
3+
"width": 284,
4+
"height": 400,
5+
"font": {"color": "white"},
6+
"paper_bgcolor": "black"
7+
},
8+
9+
"data": [
10+
{
11+
"type" : "parcoords",
12+
"dimensions" : [
13+
{
14+
"label" : "Dimension A",
15+
"constraintrange": [1.75, 3.25],
16+
"values" : [4, 3, 2, 1, 0]
17+
},
18+
{
19+
"label" : "Dimension B",
20+
"values" : [0, 1, 2, 3, 4]
21+
}
22+
]
23+
}
24+
]
25+
}

0 commit comments

Comments
 (0)