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

0 commit comments

Comments
 (0)