Skip to content

Commit fed26bb

Browse files
archmojarchmoj
committed
combine colors for pathbar - correct pathbar test - add depthfade reversed option
1 parent aa52dd5 commit fed26bb

13 files changed

+82
-47
lines changed

‎src/traces/treemap/attributes.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,19 @@ module.exports = {
140140
colors: sunburstAttrs.marker.colors,
141141

142142
depthfade: {
143-
valType: 'boolean',
143+
valType: 'enumerated',
144+
values: [true, false, 'reversed'],
144145
editType: 'style',
145146
role: 'style',
146147
description: [
147-
'Fades headers towards the background.',
148+
'Fades headers towards the background. Background color with opacity of 0.75',
149+
'is used as the destination fading color.',
148150
'When `marker.colors` are not set within the trace it is defaulted to *false*;',
149151
'otherwise it is defaulted to *true*.',
150-
'This option is not available when having a `colorscale`.'
152+
'The *reversed* option could be used to invert the direction of fade',
153+
'in which the top elements within hierarchy drawn with fully saturated colors',
154+
'while the leaves would be faded towards the background color',
155+
'This option is not available when a `colorscale` is present.'
151156
].join(' ')
152157
},
153158

@@ -225,7 +230,7 @@ module.exports = {
225230
dflt: 1,
226231
description: [
227232
'Sets the opacity of the pathbar.',
228-
'This option is not available when having a `colorscale`.'
233+
'This option is not available when a `colorscale` is present.'
229234
].join(' ')
230235
},
231236

‎src/traces/treemap/plot.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,6 @@ function plotOne(gd, cd, element, transitionOpts) {
9191
return pt.data.depth - entry.data.depth < maxDepth;
9292
};
9393

94-
// copy
95-
trace._backgroundColor = fullLayout.paper_bgcolor;
96-
9794
var gs = fullLayout._size;
9895
var domain = trace.domain;
9996

@@ -151,13 +148,15 @@ function plotOne(gd, cd, element, transitionOpts) {
151148
return {};
152149
};
153150

154-
trace._entryDepth = entry.data.depth;
155-
156151
// N.B. handle multiple-root special case
157152
if(cd0.hasMultipleRoots && isRoot) {
158153
maxDepth++;
159154
}
155+
160156
trace._maxDepth = maxDepth;
157+
trace._backgroundColor = fullLayout.paper_bgcolor;
158+
trace._entryDepth = entry.data.depth;
159+
trace._atMultipleRoot = isRoot;
161160

162161
var cenX = -vpw / 2 + gs.l + gs.w * (domain.x[1] + domain.x[0]) / 2;
163162
var cenY = -vph / 2 + gs.t + gs.h * (1 - (domain.y[1] + domain.y[0]) / 2);

‎src/traces/treemap/style.js

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,39 +35,48 @@ function styleOne(s, pt, trace, opts) {
3535
var ptNumber = cdi.i;
3636
var lineColor;
3737
var lineWidth;
38-
var opacity;
3938
var fillColor = cdi.color;
4039

4140
if(hovered) {
4241
lineColor = trace._hovered.marker.line.color;
4342
lineWidth = trace._hovered.marker.line.width;
44-
opacity = trace._hovered.marker.opacity;
4543
} else {
4644
var isRoot = helpers.isHierarchyRoot(pt);
4745

48-
if(!pt.onPathbar && !trace._hasColorscale && trace.marker.depthfade) {
49-
var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 0.75), fillColor);
50-
51-
// option 1 | using the height from the top
52-
var maxDepth = helpers.getMaxDepth(trace);
53-
var n;
54-
if(isFinite(maxDepth)) {
55-
if(helpers.isLeaf(pt)) {
56-
n = 0;
57-
} else {
58-
n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
59-
}
46+
if(!trace._hasColorscale) {
47+
if(pt.onPathbar) {
48+
// Combining colors with the background color.
49+
// Better not to have transparent segments.
50+
// Also this helps pathbar texts appear nicely below previous segments.
51+
fillColor = Color.combine(Color.addOpacity(trace._backgroundColor, 1 - trace.pathbar.opacity), fillColor);
6052
} else {
61-
n = pt.data.height + 1;
62-
}
53+
var depthfade = trace.marker.depthfade;
54+
if(depthfade) {
55+
var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 0.75), fillColor);
56+
var n;
6357

64-
// option 2 | using depth form the bottom
65-
// var n = pt.data.depth - trace._entryDepth + 1;
58+
if(depthfade === true) {
59+
var maxDepth = helpers.getMaxDepth(trace);
60+
if(isFinite(maxDepth)) {
61+
if(helpers.isLeaf(pt)) {
62+
n = 0;
63+
} else {
64+
n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
65+
}
66+
} else {
67+
n = pt.data.height + 1;
68+
}
69+
} else { // i.e. case of depthfade === 'reversed'
70+
n = pt.data.depth - trace._entryDepth;
71+
if(!trace._atMultipleRoot) n++;
72+
}
6673

67-
if(n > 0) {
68-
for(var i = 0; i < n; i++) {
69-
var ratio = 0.5 * i / n;
70-
fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
74+
if(n > 0) {
75+
for(var i = 0; i < n; i++) {
76+
var ratio = 0.5 * i / n;
77+
fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
78+
}
79+
}
7180
}
7281
}
7382
}
@@ -79,14 +88,12 @@ function styleOne(s, pt, trace, opts) {
7988
lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
8089
lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
8190
}
82-
83-
opacity = pt.onPathbar ? trace.pathbar.opacity : null;
8491
}
8592

8693
s.style('stroke-width', lineWidth)
8794
.call(Color.fill, fillColor)
8895
.call(Color.stroke, lineColor)
89-
.style('opacity', opacity);
96+
.style('opacity', null);
9097
}
9198

9299
module.exports = {

‎test/image/baselines/treemap_level-depth.png

13 Bytes
Loading

‎test/image/baselines/treemap_pad_mirror.png

4.98 KB
Loading

‎test/image/baselines/treemap_pad_transpose.png

6.23 KB
Loading

‎test/image/baselines/treemap_textposition.png

8.33 KB
Loading

‎test/image/baselines/treemap_transpose_nopad.png

5.12 KB
Loading

‎test/image/mocks/treemap_pad_mirror.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"pad": 0
1515
},
1616
"marker": {
17+
"depthfade": "reversed",
1718
"pad": {
1819
"t": 16,
1920
"l": 8,
@@ -103,6 +104,7 @@
103104
"pad": 0
104105
},
105106
"marker": {
107+
"depthfade": "reversed",
106108
"pad": {
107109
"t": 16,
108110
"l": 8,
@@ -404,7 +406,7 @@
404406
"annotations": [
405407
{
406408
"showarrow": false,
407-
"text": "base",
409+
"text": "base<br>depthfade: 'reversed'",
408410
"font": {
409411
"size": 16
410412
},
@@ -415,7 +417,7 @@
415417
},
416418
{
417419
"showarrow": false,
418-
"text": "flip y axis",
420+
"text": "flip y axis<br>depthfade: 'reversed'",
419421
"font": {
420422
"size": 16
421423
},

‎test/image/mocks/treemap_pad_transpose.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"pad": 0
1515
},
1616
"marker": {
17+
"depthfade": "reversed",
1718
"pad": {
1819
"t": 16,
1920
"l": 8,
@@ -103,6 +104,7 @@
103104
"pad": 0
104105
},
105106
"marker": {
107+
"depthfade": "reversed",
106108
"pad": {
107109
"t": 16,
108110
"l": 8,
@@ -375,7 +377,7 @@
375377
"annotations": [
376378
{
377379
"showarrow": false,
378-
"text": "base",
380+
"text": "base<br>depthfade: 'reversed'",
379381
"font": {
380382
"color": "white",
381383
"size": 16
@@ -387,7 +389,7 @@
387389
},
388390
{
389391
"showarrow": false,
390-
"text": "flip y axis",
392+
"text": "flip y axis<br>depthfade: 'reversed'",
391393
"font": {
392394
"color": "white",
393395
"size": 16

‎test/image/mocks/treemap_textposition.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,7 @@
232232
"family": "Times New Roman"
233233
}
234234
},
235+
"marker": { "depthfade": "reversed" },
235236
"text": [
236237
"A L P H A",
237238
"B R A V O",
@@ -444,6 +445,7 @@
444445
"pathbar": {
445446
"visible": false
446447
},
448+
"marker": { "depthfade": "reversed" },
447449
"text": [
448450
"A L P H A",
449451
"B R A V O",
@@ -660,6 +662,7 @@
660662
"family": "Times New Roman"
661663
}
662664
},
665+
"marker": { "depthfade": "reversed" },
663666
"text": [
664667
"A L P H A",
665668
"B R A V O",

‎test/image/mocks/treemap_transpose_nopad.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"pad": 0
1818
},
1919
"marker": {
20+
"depthfade": "reversed",
2021
"pad": {
2122
"t": 0,
2223
"l": 0,
@@ -108,6 +109,7 @@
108109
"pad": 0
109110
},
110111
"marker": {
112+
"depthfade": "reversed",
111113
"pad": {
112114
"t": 0,
113115
"l": 0,
@@ -371,7 +373,7 @@
371373
"annotations": [
372374
{
373375
"showarrow": false,
374-
"text": "square",
376+
"text": "square<br>depthfade: 'reversed'",
375377
"font": {
376378
"size": 16
377379
},
@@ -382,7 +384,7 @@
382384
},
383385
{
384386
"showarrow": false,
385-
"text": "transposed",
387+
"text": "transposed<br>depthfade: 'reversed'",
386388
"font": {
387389
"size": 16
388390
},

‎test/jasmine/tests/treemap_test.js

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1200,8 +1200,8 @@ describe('Test treemap restyle:', function() {
12001200
var mock = {
12011201
data: [{
12021202
type: 'treemap',
1203-
labels: ['Root', 'A', 'B', 'b', 'b2', 'b3'],
1204-
parents: ['', 'Root', 'Root', 'B', 'b', 'b2'],
1203+
labels: ['Root', 'A', 'B', 'b', ],
1204+
parents: ['', 'Root', 'Root', 'B'],
12051205
level: 'b'
12061206
}]
12071207
};
@@ -1211,11 +1211,14 @@ describe('Test treemap restyle:', function() {
12111211
var layer = d3.select(gd).select('.treemaplayer');
12121212

12131213
var opacities = [];
1214+
var fillColors = [];
12141215
layer.selectAll('path.surface').each(function() {
12151216
opacities.push(this.style.opacity);
1217+
fillColors.push(this.style.fill);
12161218
});
12171219

1218-
expect(opacities).toEqual(exp, msg);
1220+
expect(opacities).toEqual(exp[0], msg);
1221+
expect(fillColors).toEqual(exp[1], msg);
12191222

12201223
// editType:style
12211224
if(msg !== 'base') {
@@ -1226,17 +1229,29 @@ describe('Test treemap restyle:', function() {
12261229
}
12271230

12281231
Plotly.plot(gd, mock)
1229-
.then(_assert('base', ['', '', '', '1', '1']))
1232+
.then(_assert('base', [
1233+
['', '', ''], // opacity
1234+
['rgb(255, 127, 14)', 'rgb(255, 127, 14)', 'rgb(255, 255, 255)'] // fill
1235+
]))
12301236
.then(function() {
12311237
spyOn(Plots, 'doCalcdata').and.callThrough();
12321238
spyOn(gd._fullData[0]._module, 'plot').and.callThrough();
12331239
})
12341240
.then(_restyle({'pathbar.opacity': 0.2}))
1235-
.then(_assert('lower pathbar.opacity', ['', '', '', '0.2', '0.2']))
1241+
.then(_assert('lower pathbar.opacity', [
1242+
['', '', ''], // opacity
1243+
['rgb(255, 127, 14)', 'rgb(255, 229, 207)', 'rgb(255, 255, 255)'] // fill
1244+
]))
12361245
.then(_restyle({'pathbar.opacity': 0.8}))
1237-
.then(_assert('raise pathbar.opacity', ['', '', '', '0.8', '0.8']))
1246+
.then(_assert('raise pathbar.opacity', [
1247+
['', '', ''], // opacity
1248+
['rgb(255, 127, 14)', 'rgb(255, 153, 62)', 'rgb(255, 255, 255)'] // fill
1249+
]))
12381250
.then(_restyle({'pathbar.opacity': null}))
1239-
.then(_assert('back to dflt', ['', '', '', '1', '1']))
1251+
.then(_assert('back to dflt', [
1252+
['', '', ''], // opacity
1253+
['rgb(255, 127, 14)', 'rgb(255, 127, 14)', 'rgb(255, 255, 255)'] // fill
1254+
]))
12401255
.catch(failTest)
12411256
.then(done);
12421257
});

0 commit comments

Comments
 (0)