Skip to content

Commit 0012fa1

Browse files
archmojarchmoj
committed
make the opacity logic slightly more user-friendly by applying leaf.opacity instead of branch.opacity which also help having an API similar to sunburst
1 parent ca4b385 commit 0012fa1

14 files changed

+80
-48
lines changed

Diff for: ‎src/traces/treemap/attributes.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -145,10 +145,9 @@ module.exports = {
145145
role: 'style',
146146
min: 0,
147147
max: 1,
148-
dflt: 1,
149148
description: [
150-
'Sets the opacity for the sectors. With colorscale',
151-
'it is defaulted to 1; otherwise it is defaulted to 0.5'
149+
'Sets the opacity of the branches i.e. based on the hierarchy height.',
150+
'With colorscale it is defaulted to 1; otherwise it is defaulted to 0.7'
152151
].join(' ')
153152
},
154153

@@ -162,16 +161,16 @@ module.exports = {
162161
})
163162
),
164163

165-
branch: {
164+
leaf: {
166165
opacity: {
167166
valType: 'number',
168167
editType: 'style',
169168
role: 'style',
170169
min: 0,
171170
max: 1,
171+
dflt: 1,
172172
description: [
173-
'Sets the opacity of the leaves i.e. based on the hierarchy height.',
174-
'With colorscale it is defaulted to 1; otherwise it is defaulted to 0.7'
173+
'Sets the opacity of the leaves.'
175174
].join(' ')
176175
},
177176
editType: 'plot'

Diff for: ‎src/traces/treemap/defaults.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
8585
if(withColorscale) {
8686
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
8787
}
88-
coerce('marker.opacity');
89-
coerce('branch.opacity', withColorscale ? 1 : 0.7);
88+
coerce('marker.opacity', withColorscale ? 1 : 0.7);
89+
coerce('leaf.opacity');
9090

9191
traceOut._hovered = {
9292
marker: {

Diff for: ‎src/traces/treemap/style.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
var d3 = require('d3');
1212
var Color = require('../../components/color');
1313
var Lib = require('../../lib');
14+
var helpers = require('../sunburst/helpers');
1415

1516
function style(gd) {
1617
gd._fullLayout._treemaplayer.selectAll('.trace').each(function(cd) {
@@ -42,7 +43,7 @@ function styleOne(s, pt, trace, opts) {
4243
} else {
4344
lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
4445
lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
45-
opacity = trace.marker.opacity * Math.pow(trace.branch.opacity, pt.height);
46+
opacity = helpers.isLeaf(pt) ? trace.leaf.opacity : Math.pow(trace.marker.opacity, pt.height);
4647
}
4748

4849
s.style('stroke-width', lineWidth)

Diff for: ‎test/image/baselines/treemap_packages_colorscale_allone.png

-3.57 KB
Loading

Diff for: ‎test/image/baselines/treemap_packings.png

-174 Bytes
Loading

Diff for: ‎test/image/baselines/treemap_pad_transpose.png

-3.52 KB
Loading

Diff for: ‎test/image/baselines/treemap_transpose_nopad.png

261 Bytes
Loading

Diff for: ‎test/image/baselines/treemap_values_colorscale.png

355 Bytes
Loading

Diff for: ‎test/image/mocks/treemap_packages_colorscale_allone.json

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,39 @@
11
{
22
"data": [
33
{
4-
"type": "treemap",
5-
"count": "leaves+branches",
4+
"type": "treemap",
5+
"count": "leaves+branches",
66
"maxdepth": 3,
7-
"textinfo": "label+percent parent",
8-
"tiling": {
7+
"textinfo": "label+percent parent",
8+
"tiling": {
99
"packing": "slice-dice"
1010
},
1111
"pathbar": {
1212
"side": "bottom"
13-
},
13+
},
1414
"marker": {
15-
"opacity": 0.8,
15+
"opacity": 0.9,
1616
"line": {
1717
"color": "#777"
1818
},
19-
"colorscale": [[0, "#FFF"], [0.01, "#FF0"], [0.1, "#F00"], [1, "#000"]],
19+
"colorscale": [
20+
[
21+
0,
22+
"#FFF"
23+
],
24+
[
25+
0.01,
26+
"#FF0"
27+
],
28+
[
29+
0.1,
30+
"#F00"
31+
],
32+
[
33+
1,
34+
"#000"
35+
]
36+
],
2037
"showscale": true
2138
},
2239
"level": "1. gl-mesh3d",

Diff for: ‎test/image/mocks/treemap_packings.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"Uniform",
7373
"Uniform"
7474
],
75-
"branch": {
75+
"leaf": {
7676
"opacity": 0.85
7777
},
7878
"marker": {
@@ -162,7 +162,7 @@
162162
"Uniform",
163163
"Uniform"
164164
],
165-
"branch": {
165+
"leaf": {
166166
"opacity": 0.85
167167
},
168168
"marker": {
@@ -252,7 +252,7 @@
252252
"Uniform",
253253
"Uniform"
254254
],
255-
"branch": {
255+
"leaf": {
256256
"opacity": 0.85
257257
},
258258
"marker": {
@@ -342,7 +342,7 @@
342342
"Uniform",
343343
"Uniform"
344344
],
345-
"branch": {
345+
"leaf": {
346346
"opacity": 0.85
347347
},
348348
"marker": {
@@ -432,7 +432,7 @@
432432
"Uniform",
433433
"Uniform"
434434
],
435-
"branch": {
435+
"leaf": {
436436
"opacity": 0.85
437437
},
438438
"marker": {
@@ -522,7 +522,7 @@
522522
"Uniform",
523523
"Uniform"
524524
],
525-
"branch": {
525+
"leaf": {
526526
"opacity": 0.85
527527
},
528528
"marker": {

Diff for: ‎test/image/mocks/treemap_pad_mirror.json

+4-12
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@
1313
"packing": "slice-dice",
1414
"pad": 0
1515
},
16-
"branch": {
17-
"opacity": 0.8
18-
},
1916
"marker": {
17+
"opacity": 0.8,
2018
"pad": {
2119
"t": 16,
2220
"l": 8,
@@ -105,10 +103,8 @@
105103
"flip": "y",
106104
"pad": 0
107105
},
108-
"branch": {
109-
"opacity": 0.8
110-
},
111106
"marker": {
107+
"opacity": 0.8,
112108
"pad": {
113109
"t": 16,
114110
"l": 8,
@@ -197,10 +193,8 @@
197193
"flip": "x",
198194
"pad": 0
199195
},
200-
"branch": {
201-
"opacity": 0.8
202-
},
203196
"marker": {
197+
"opacity": 0.8,
204198
"pad": {
205199
"t": 16,
206200
"l": 8,
@@ -289,10 +283,8 @@
289283
"flip": "x+y",
290284
"pad": 0
291285
},
292-
"branch": {
293-
"opacity": 0.8
294-
},
295286
"marker": {
287+
"opacity": 0.8,
296288
"pad": {
297289
"t": 16,
298290
"l": 8,

Diff for: ‎test/image/mocks/treemap_pad_transpose.json

+18-4
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@
1313
"packing": "dice-slice",
1414
"pad": 0
1515
},
16+
"leaf": {
17+
"opacity": 0.7
18+
},
1619
"marker": {
17-
"opacity": 0.9,
1820
"pad": {
1921
"t": 16,
2022
"l": 8,
@@ -103,8 +105,10 @@
103105
"flip": "y",
104106
"pad": 0
105107
},
108+
"leaf": {
109+
"opacity": 0.7
110+
},
106111
"marker": {
107-
"opacity": 0.9,
108112
"pad": {
109113
"t": 16,
110114
"l": 8,
@@ -193,8 +197,10 @@
193197
"flip": "x",
194198
"pad": 0
195199
},
200+
"leaf": {
201+
"opacity": 0.7
202+
},
196203
"marker": {
197-
"opacity": 0.9,
198204
"pad": {
199205
"t": 16,
200206
"l": 8,
@@ -283,8 +289,10 @@
283289
"flip": "x+y",
284290
"pad": 0
285291
},
292+
"leaf": {
293+
"opacity": 0.7
294+
},
286295
"marker": {
287-
"opacity": 0.9,
288296
"pad": {
289297
"t": 16,
290298
"l": 8,
@@ -363,6 +371,12 @@
363371
"layout": {
364372
"width": 1200,
365373
"height": 800,
374+
"paper_bgcolor": "darkblue",
375+
"treemapcolorway": [
376+
"#ff0",
377+
"#f00",
378+
"#0f0"
379+
],
366380
"shapes": [
367381
{ "type": "circle", "layer": "below", "x0": 0.075, "x1": 0.925, "y0": 0.0, "y1": 0.8},
368382
{ "type": "rect", "layer": "below", "x0": 0.02, "x1": 0.48, "y0": 0.02, "y1": 0.48 },

Diff for: ‎test/image/mocks/treemap_transpose_nopad.json

+12-4
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@
1616
"squarifyratio": 1,
1717
"pad": 0
1818
},
19+
"leaf": {
20+
"opacity": 0.5
21+
},
1922
"marker": {
20-
"opacity": 0.5,
2123
"pad": {
2224
"t": 0,
2325
"l": 0,
@@ -108,8 +110,10 @@
108110
"squarifyratio": 1.618034,
109111
"pad": 0
110112
},
113+
"leaf": {
114+
"opacity": 0.5
115+
},
111116
"marker": {
112-
"opacity": 0.5,
113117
"pad": {
114118
"t": 0,
115119
"l": 0,
@@ -200,8 +204,10 @@
200204
"squarifyratio": 1,
201205
"pad": 0
202206
},
207+
"leaf": {
208+
"opacity": 0.5
209+
},
203210
"marker": {
204-
"opacity": 0.5,
205211
"pad": {
206212
"t": 0,
207213
"l": 0,
@@ -292,8 +298,10 @@
292298
"squarifyratio": 1.618034,
293299
"pad": 0
294300
},
301+
"leaf": {
302+
"opacity": 0.5
303+
},
295304
"marker": {
296-
"opacity": 0.5,
297305
"pad": {
298306
"t": 0,
299307
"l": 0,

Diff for: ‎test/jasmine/tests/treemap_test.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -785,13 +785,12 @@ describe('Test treemap restyle:', function() {
785785
.then(done);
786786
});
787787

788-
it('should be able to restyle *marker.opacity*', function(done) {
788+
it('should be able to restyle *leaf.opacity*', function(done) {
789789
var mock = {
790790
data: [{
791791
type: 'treemap',
792792
labels: ['Root', 'A', 'B', 'b'],
793-
parents: ['', 'Root', 'Root', 'B'],
794-
pathbar: { visible: false }
793+
parents: ['', 'Root', 'Root', 'B']
795794
}]
796795
};
797796

@@ -820,9 +819,11 @@ describe('Test treemap restyle:', function() {
820819
spyOn(Plots, 'doCalcdata').and.callThrough();
821820
spyOn(gd._fullData[0]._module, 'plot').and.callThrough();
822821
})
823-
.then(_restyle({'marker.opacity': 0.5}))
824-
.then(_assert('lower marker.opacity', ['0.245', '0.5', '0.35', '0.5']))
825-
.then(_restyle({'marker.opacity': null}))
822+
.then(_restyle({'leaf.opacity': 0.3}))
823+
.then(_assert('lower leaf.opacity', ['0.49', '0.3', '0.7', '0.3']))
824+
.then(_restyle({'leaf.opacity': 1}))
825+
.then(_assert('raise leaf.opacity', ['0.49', '1', '0.7', '1']))
826+
.then(_restyle({'leaf.opacity': null}))
826827
.then(_assert('back to dflt', ['0.49', '1', '0.7', '1']))
827828
.catch(failTest)
828829
.then(done);

0 commit comments

Comments
 (0)