Skip to content

Commit 6dad958

Browse files
archmojarchmoj
committed
various attribute revisions
pad.(top | left | right | bottom) > pad.(t | l | r | b) barpath.position > barpath.side reuse sunburst marker line and colors in treemap pathbar.height > pathbar.thickness tiling.mirror > tiling.flip revise trace descriptions add comments to default revisit switch case in partition
1 parent 648167d commit 6dad958

13 files changed

+121
-162
lines changed

‎src/traces/treemap/attributes.js‎

Lines changed: 13 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ module.exports = {
6767
].join(' ')
6868
},
6969

70-
mirror: {
70+
flip: {
7171
valType: 'flaglist',
7272
role: 'info',
7373
flags: [
@@ -77,7 +77,7 @@ module.exports = {
7777
dflt: '',
7878
editType: 'plot',
7979
description: [
80-
'Determines if the positions obtained from solver are mirrored on each axis.'
80+
'Determines if the positions obtained from solver are flipped on each axis.'
8181
].join(' ')
8282
},
8383

@@ -97,41 +97,37 @@ module.exports = {
9797

9898
marker: extendFlat({
9999
pad: {
100-
top: {
100+
t: {
101101
valType: 'number',
102102
role: 'style',
103103
min: 0,
104-
dflt: 'auto',
105104
editType: 'plot',
106105
description: [
107106
'Sets the padding form the top (in px).'
108107
].join(' ')
109108
},
110-
left: {
109+
l: {
111110
valType: 'number',
112111
role: 'style',
113112
min: 0,
114-
dflt: 'auto',
115113
editType: 'plot',
116114
description: [
117115
'Sets the padding form the left (in px).'
118116
].join(' ')
119117
},
120-
right: {
118+
r: {
121119
valType: 'number',
122120
role: 'style',
123121
min: 0,
124-
dflt: 'auto',
125122
editType: 'plot',
126123
description: [
127124
'Sets the padding form the right (in px).'
128125
].join(' ')
129126
},
130-
bottom: {
127+
b: {
131128
valType: 'number',
132129
role: 'style',
133130
min: 0,
134-
dflt: 'auto',
135131
editType: 'plot',
136132
description: [
137133
'Sets the padding form the bottom (in px).'
@@ -141,15 +137,7 @@ module.exports = {
141137
editType: 'calc'
142138
},
143139

144-
colors: {
145-
valType: 'data_array',
146-
editType: 'calc',
147-
description: [
148-
'Sets the color of each sector of this treemap chart.',
149-
'If not specified, the default trace color set is used',
150-
'to pick the sector colors.'
151-
].join(' ')
152-
},
140+
colors: sunburstAttrs.marker.colors,
153141

154142
opacity: {
155143
valType: 'number',
@@ -164,17 +152,7 @@ module.exports = {
164152
].join(' ')
165153
},
166154

167-
line: {
168-
color: extendFlat({}, pieAttrs.marker.line.color, {
169-
dflt: null,
170-
description: [
171-
'Sets the color of the line enclosing each sector.',
172-
'Defaults to the `paper_bgcolor` value.'
173-
].join(' ')
174-
}),
175-
width: extendFlat({}, pieAttrs.marker.line.width, {dflt: 1}),
176-
editType: 'calc'
177-
},
155+
line: sunburstAttrs.marker.line,
178156

179157
editType: 'calc'
180158
},
@@ -210,7 +188,7 @@ module.exports = {
210188
].join(' ')
211189
},
212190

213-
position: {
191+
side: {
214192
valType: 'enumerated',
215193
values: [
216194
'top',
@@ -234,24 +212,22 @@ module.exports = {
234212
'/',
235213
'\\'
236214
],
237-
dflt: 'auto',
238215
role: 'style',
239216
editType: 'plot',
240217
description: [
241218
'Determines which divider is used between labels.',
242-
'With *top* `pathbar.position` it is defaulted to */*; and',
243-
'with *bottom* `pathbar.position` it is defaulted to *\\*.'
219+
'With *top* `pathbar.side` it is defaulted to */*; and',
220+
'with *bottom* `pathbar.side` it is defaulted to *\\*.'
244221
].join(' ')
245222
},
246223

247-
height: {
224+
thickness: {
248225
valType: 'number',
249-
dflt: 'auto',
250226
min: 12,
251227
role: 'info',
252228
editType: 'plot',
253229
description: [
254-
'Sets the height (in px). If not specified the `parbath.textfont.size` is used',
230+
'Sets the thickness of `pathbar` (in px). If not specified the `pathbar.textfont.size` is used',
255231
'with 3 pixles extra padding on each side.'
256232
].join(' ')
257233
},
@@ -301,14 +277,12 @@ module.exports = {
301277
marker: {
302278
line: {
303279
color: extendFlat({}, pieAttrs.marker.line.color, {
304-
dflt: 'auto',
305280
description: [
306281
'Sets the color of the line',
307282
'enclosing each sector when it is hovered'
308283
].join(' ')
309284
}),
310285
width: extendFlat({}, pieAttrs.marker.line.width, {
311-
dflt: 'auto',
312286
description: [
313287
'Sets the width (in px) of the line',
314288
'enclosing each sector when it is hovered.'

‎src/traces/treemap/defaults.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
4747
coerce('tiling.squarifyratio');
4848
}
4949

50-
coerce('tiling.mirror');
50+
coerce('tiling.flip');
5151
var tilingPad = coerce('tiling.pad');
5252

5353
var text = coerce('text');
@@ -77,10 +77,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
7777

7878
var headerSize = traceOut.textfont.size * 2;
7979

80-
coerce('marker.pad.top', bottomText ? headerSize / 4 : headerSize);
81-
coerce('marker.pad.left', headerSize / 4);
82-
coerce('marker.pad.right', headerSize / 4);
83-
coerce('marker.pad.bottom', bottomText ? headerSize : headerSize / 4);
80+
coerce('marker.pad.t', bottomText ? headerSize / 4 : headerSize);
81+
coerce('marker.pad.l', headerSize / 4);
82+
coerce('marker.pad.r', headerSize / 4);
83+
coerce('marker.pad.b', bottomText ? headerSize : headerSize / 4);
8484

8585
if(withColorscale) {
8686
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
@@ -100,10 +100,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
100100
var hasPathbar = coerce('pathbar.visible');
101101
if(hasPathbar) {
102102
Lib.coerceFont(coerce, 'pathbar.textfont', layout.font);
103-
coerce('pathbar.height', traceOut.pathbar.textfont.size + 2 * TEXTPAD);
104103

105-
var position = coerce('pathbar.position');
106-
coerce('pathbar.divider', position === 'top' ? '/' : '\\');
104+
// This works even for multi-line labels as treemap pathbar trim out line breaks
105+
coerce('pathbar.thickness', traceOut.pathbar.textfont.size + 2 * TEXTPAD);
106+
107+
var side = coerce('pathbar.side');
108+
coerce('pathbar.divider', side === 'top' ? '/' : '\\');
107109
}
108110

109111
handleDomainDefaults(traceOut, layout, coerce);

‎src/traces/treemap/draw_descendants.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,21 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
4747
var hasRight = trace.textposition.indexOf('right') !== -1;
4848
var hasBottom = trace.textposition.indexOf('bottom') !== -1;
4949

50-
var noRoomForHeader = (!hasBottom && !trace.marker.pad.top) || (hasBottom && !trace.marker.pad.bottom);
50+
var noRoomForHeader = (!hasBottom && !trace.marker.pad.t) || (hasBottom && !trace.marker.pad.b);
5151

5252
// N.B. slice data isn't the calcdata,
5353
// grab corresponding calcdata item in sliceData[i].data.data
5454
var allData = partition(entry, [width, height], {
5555
packing: trace.tiling.packing,
5656
squarifyratio: trace.tiling.squarifyratio,
57-
mirrorX: trace.tiling.mirror.indexOf('x') > -1,
58-
mirrorY: trace.tiling.mirror.indexOf('y') > -1,
57+
flipX: trace.tiling.flip.indexOf('x') > -1,
58+
flipY: trace.tiling.flip.indexOf('y') > -1,
5959
pad: {
6060
inner: trace.tiling.pad,
61-
top: trace.marker.pad.top,
62-
left: trace.marker.pad.left,
63-
right: trace.marker.pad.right,
64-
bottom: trace.marker.pad.bottom,
61+
top: trace.marker.pad.t,
62+
left: trace.marker.pad.l,
63+
right: trace.marker.pad.r,
64+
bottom: trace.marker.pad.b,
6565
}
6666
});
6767

@@ -97,10 +97,10 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
9797
updateSlices.each(function(pt) {
9898
var isHeader = helpers.isHeader(pt, trace);
9999

100-
pt._hoverX = viewX(pt.x1 - trace.marker.pad.right),
100+
pt._hoverX = viewX(pt.x1 - trace.marker.pad.r),
101101
pt._hoverY = hasBottom ?
102-
viewY(pt.y1 - trace.marker.pad.bottom / 2) :
103-
viewY(pt.y0 + trace.marker.pad.top / 2);
102+
viewY(pt.y1 - trace.marker.pad.b / 2) :
103+
viewY(pt.y0 + trace.marker.pad.t / 2);
104104

105105
var sliceTop = d3.select(this);
106106

‎src/traces/treemap/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ module.exports = {
3030

3131
meta: {
3232
description: [
33-
'Visualize hierarchal data spanning outward radially from root to leaves.',
34-
'The treemap sectors are determined by the entries in *labels* or *ids*',
35-
'and in *parents*.'
33+
'Visualize hierarchal data from leaves (and/or outer branches) towards root',
34+
'with rectangles. The treemap sectors are determined by the entries in',
35+
'*labels* or *ids* and in *parents*.'
3636
].join(' ')
3737
}
3838
};

‎src/traces/treemap/partition.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
var d3Hierarchy = require('d3-hierarchy');
1212

1313
module.exports = function partition(entry, size, opts) {
14-
var flipX = opts.mirrorX;
15-
var flipY = opts.mirrorY;
14+
var flipX = opts.flipX;
15+
var flipY = opts.flipY;
1616
var swapXY = opts.packing === 'dice-slice';
1717

1818
var top = opts.pad[flipY ? 'bottom' : 'top'];
@@ -54,25 +54,18 @@ module.exports = function partition(entry, size, opts) {
5454
};
5555

5656
function getTilingMethod(key, squarifyratio) {
57-
var method;
5857
switch(key) {
5958
case 'squarify':
60-
method = d3Hierarchy.treemapSquarify.ratio(squarifyratio);
61-
break;
59+
return d3Hierarchy.treemapSquarify.ratio(squarifyratio);
6260
case 'binary':
63-
method = d3Hierarchy.treemapBinary;
64-
break;
61+
return d3Hierarchy.treemapBinary;
6562
case 'dice':
66-
method = d3Hierarchy.treemapDice;
67-
break;
63+
return d3Hierarchy.treemapDice;
6864
case 'slice':
69-
method = d3Hierarchy.treemapSlice;
70-
break;
65+
return d3Hierarchy.treemapSlice;
7166
default: // i.e. 'slice-dice' | 'dice-slice'
72-
method = d3Hierarchy.treemapSliceDice;
67+
return d3Hierarchy.treemapSliceDice;
7368
}
74-
75-
return method;
7669
}
7770

7871
function flipTree(node, size, opts) {

‎src/traces/treemap/plot.js‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -138,26 +138,19 @@ function plotOne(gd, cd, element, transitionOpts) {
138138
var mvX = 0;
139139
var mvY = 0;
140140
if(cd0.hasMultipleRoots && helpers.isHierarchyRoot(mapEntry)) {
141-
/* TODO: remove below!
142-
mvX = (trace.marker.pad.right - trace.marker.pad.left) / 2;
143-
mvY = (trace.marker.pad.bottom - trace.marker.pad.top) / 2;
144-
145-
vpw += trace.marker.pad.right + trace.marker.pad.left;
146-
vph += trace.marker.pad.bottom + trace.marker.pad.top;
147-
*/
148141
maxDepth++;
149142
}
150143
trace._maxDepth = maxDepth;
151144

152145
var barW = vpw;
153-
var barH = trace.pathbar.height;
146+
var barH = trace.pathbar.thickness;
154147
var barPad = trace.marker.line.width + 1; // TODO: may expose this constant in future
155148

156149
var barTop;
157150
var barBottom;
158151
if(trace.pathbar.visible) {
159-
barTop = trace.pathbar.position.indexOf('top') !== -1;
160-
barBottom = trace.pathbar.position.indexOf('bottom') !== -1;
152+
barTop = trace.pathbar.side.indexOf('top') !== -1;
153+
barBottom = trace.pathbar.side.indexOf('bottom') !== -1;
161154

162155
if(barTop) {
163156
mvY += (barH + barPad) / 2;
@@ -288,16 +281,16 @@ function plotOne(gd, cd, element, transitionOpts) {
288281
}
289282

290283
if(opts.isHeader) {
291-
x0 += trace.marker.pad.left - TEXTPAD;
292-
x1 -= trace.marker.pad.right - TEXTPAD;
284+
x0 += trace.marker.pad.l - TEXTPAD;
285+
x1 -= trace.marker.pad.r - TEXTPAD;
293286

294287
// limit the drawing area for headers
295288
var limY;
296289
if(hasBottom) {
297-
limY = y1 - trace.marker.pad.bottom;
290+
limY = y1 - trace.marker.pad.b;
298291
if(y0 < limY && limY < y1) y0 = limY;
299292
} else {
300-
limY = y0 + trace.marker.pad.top;
293+
limY = y0 + trace.marker.pad.t;
301294
if(y0 < limY && limY < y1) y1 = limY;
302295
}
303296
}
@@ -507,7 +500,7 @@ function plotOne(gd, cd, element, transitionOpts) {
507500
hasTransition: hasTransition
508501
});
509502

510-
if(trace.pathbar.visible && trace.pathbar.position !== 'inside') {
503+
if(trace.pathbar.visible) {
511504
var rawAncestors = mapEntry.data.ancestors();
512505

513506
var ancestors = [];

‎test/image/mocks/treemap_packages_colorscale_allone.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{
22
"data": [
33
{
4-
"type": "treemap",
5-
"count": "leaves+branches",
6-
"maxdepth": 3,
7-
"textinfo": "label+percent parent",
8-
"tiling": {
4+
"type": "treemap",
5+
"count": "leaves+branches",
6+
"maxdepth": 3,
7+
"textinfo": "label+percent parent",
8+
"tiling": {
99
"packing": "slice-dice"
1010
},
1111
"pathbar": {
12-
"position": "bottom"
13-
},
12+
"side": "bottom"
13+
},
1414
"marker": {
1515
"opacity": 0.8,
1616
"line": {

0 commit comments

Comments
 (0)