Skip to content

Commit e6d74e2

Browse files
archmojarchmoj
committed
add patterns to icicle and treemap
1 parent d31839e commit e6d74e2

20 files changed

+301
-53
lines changed

‎src/traces/funnelarea/defaults.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
3333
}
3434
traceOut._length = len;
3535

36-
handleMarkerDefaults(traceIn, traceOut, layout, coerce, 'funnelarea');
36+
handleMarkerDefaults(traceIn, traceOut, layout, coerce);
3737

3838
coerce('scalegroup');
3939

‎src/traces/icicle/attributes.js

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var sunburstAttrs = require('../sunburst/attributes');
1010
var treemapAttrs = require('../treemap/attributes');
1111
var constants = require('../treemap/constants');
1212
var extendFlat = require('../../lib/extend').extendFlat;
13+
var pattern = require('../../components/drawing/attributes').pattern;
1314

1415
module.exports = {
1516
labels: sunburstAttrs.labels,
@@ -61,6 +62,8 @@ module.exports = {
6162

6263
line: sunburstAttrs.marker.line,
6364

65+
pattern: pattern,
66+
6467
editType: 'calc'
6568
},
6669
colorScaleAttrs('marker', {

‎src/traces/icicle/defaults.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var Color = require('../../components/color');
66
var handleDomainDefaults = require('../../plots/domain').defaults;
77
var handleText = require('../bar/defaults').handleText;
88
var TEXTPAD = require('../bar/constants').TEXTPAD;
9+
var handleMarkerDefaults = require('../pie/defaults').handleMarkerDefaults;
910

1011
var Colorscale = require('../../components/colorscale');
1112
var hasColorscale = Colorscale.hasColorscale;
@@ -59,10 +60,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
5960
});
6061
coerce('textposition');
6162

62-
var lineWidth = coerce('marker.line.width');
63-
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
63+
handleMarkerDefaults(traceIn, traceOut, layout, coerce);
6464

65-
coerce('marker.colors');
6665
var withColorscale = traceOut._hasColorscale = (
6766
hasColorscale(traceIn, 'marker', 'colors') ||
6867
(traceIn.marker || {}).coloraxis // N.B. special logic to consider "values" colorscales

‎src/traces/icicle/draw_descendants.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
163163
})
164164
.call(helpers.setSliceCursor, gd, { isTransitioning: gd._transitioning });
165165

166-
slicePath.call(styleOne, pt, trace, {
166+
slicePath.call(styleOne, pt, trace, gd, {
167167
hovered: false
168168
});
169169

‎src/traces/icicle/style.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ var d3 = require('@plotly/d3');
44
var Color = require('../../components/color');
55
var Lib = require('../../lib');
66
var resizeText = require('../bar/uniform_text').resizeText;
7+
var fillOne = require('../sunburst/fill_one');
78

89
function style(gd) {
910
var s = gd._fullLayout._iciclelayer.selectAll('.trace');
@@ -17,20 +18,20 @@ function style(gd) {
1718
gTrace.style('opacity', trace.opacity);
1819

1920
gTrace.selectAll('path.surface').each(function(pt) {
20-
d3.select(this).call(styleOne, pt, trace);
21+
d3.select(this).call(styleOne, pt, trace, gd);
2122
});
2223
});
2324
}
2425

25-
function styleOne(s, pt, trace) {
26+
function styleOne(s, pt, trace, gd) {
2627
var cdi = pt.data.data;
2728
var isLeaf = !pt.children;
2829
var ptNumber = cdi.i;
2930
var lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
3031
var lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
3132

32-
s.style('stroke-width', lineWidth)
33-
.call(Color.fill, cdi.color)
33+
s.call(fillOne, pt, trace, gd)
34+
.style('stroke-width', lineWidth)
3435
.call(Color.stroke, lineColor)
3536
.style('opacity', isLeaf ? trace.leaf.opacity : null);
3637
}

‎src/traces/pie/defaults.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,14 @@ function handleLabelsAndValues(labels, values) {
3636
};
3737
}
3838

39-
function handleMarkerDefaults(traceIn, traceOut, layout, coerce, isFunnelarea) {
39+
function handleMarkerDefaults(traceIn, traceOut, layout, coerce, isPie) {
4040
var lineWidth = coerce('marker.line.width');
41-
if(lineWidth) coerce('marker.line.color', isFunnelarea ? layout.paper_bgcolor : undefined);
41+
if(lineWidth) {
42+
coerce('marker.line.color',
43+
isPie ? undefined :
44+
layout.paper_bgcolor // case of funnelarea, sunburst, icicle, treemap
45+
);
46+
}
4247

4348
var markerColors = coerce('marker.colors');
4449
coercePattern(coerce, 'marker.pattern', markerColors);
@@ -73,7 +78,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
7378
}
7479
traceOut._length = len;
7580

76-
handleMarkerDefaults(traceIn, traceOut, layout, coerce);
81+
handleMarkerDefaults(traceIn, traceOut, layout, coerce, true);
7782

7883
coerce('scalegroup');
7984
// TODO: hole needs to be coerced to the same value within a scaleegroup

‎src/traces/pie/fill_one.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
var Drawing = require('../../components/drawing');
4+
5+
module.exports = function fillOne(s, pt, trace, gd) {
6+
// enforce the point color, when colors (with s) & the pattern shape are missing.
7+
// 'abuse' the color attribute, used in the Drawing component for bar trace type.
8+
var marker = trace.marker;
9+
if(marker.pattern) {
10+
if(!marker.colors || !marker.pattern.shape) marker.color = pt.color;
11+
} else {
12+
marker.color = pt.color;
13+
}
14+
15+
Drawing.pointStyle(s, trace, gd, pt);
16+
};

‎src/traces/pie/style_one.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
var Color = require('../../components/color');
44
var castOption = require('./helpers').castOption;
5-
var Drawing = require('../../components/drawing');
5+
var fillOne = require('./fill_one');
66

77
module.exports = function styleOne(s, pt, trace, gd) {
88
var line = trace.marker.line;
@@ -18,8 +18,7 @@ module.exports = function styleOne(s, pt, trace, gd) {
1818
marker.color = pt.color;
1919
}
2020

21-
Drawing.pointStyle(s, trace, gd, pt);
22-
23-
s.style('stroke-width', lineWidth)
21+
s.call(fillOne, pt, trace, gd)
22+
.style('stroke-width', lineWidth)
2423
.call(Color.stroke, lineColor);
2524
};

‎src/traces/sunburst/defaults.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
3333
coerce('level');
3434
coerce('maxdepth');
3535

36-
handleMarkerDefaults(traceIn, traceOut, layout, coerce, 'sunburst');
36+
handleMarkerDefaults(traceIn, traceOut, layout, coerce);
3737

3838
var withColorscale = traceOut._hasColorscale = (
3939
hasColorscale(traceIn, 'marker', 'colors') ||

‎src/traces/sunburst/fill_one.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict';
2+
3+
var Drawing = require('../../components/drawing');
4+
var Color = require('../../components/color');
5+
6+
module.exports = function fillOne(s, pt, trace, gd, fadedColor) {
7+
var cdi = pt.data.data;
8+
var ptNumber = cdi.i;
9+
10+
var color = fadedColor || cdi.color;
11+
12+
if(gd && ptNumber >= 0) {
13+
pt.i = cdi.i;
14+
15+
var marker = trace.marker;
16+
if(marker.pattern) {
17+
if(!marker.colors || !marker.pattern.shape) marker.color = color;
18+
} else {
19+
marker.color = color;
20+
}
21+
22+
Drawing.pointStyle(s, trace, gd, pt);
23+
} else {
24+
Color.fill(s, color);
25+
}
26+
};

‎src/traces/sunburst/fx.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
174174

175175
if(isTreemapOrIcicle) {
176176
var slice = sliceTop.select('path.surface');
177-
opts.styleOne(slice, pt, traceNow, {
177+
opts.styleOne(slice, pt, traceNow, gd, {
178178
hovered: true
179179
});
180180
}
@@ -207,7 +207,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
207207

208208
if(isTreemapOrIcicle) {
209209
var slice = sliceTop.select('path.surface');
210-
opts.styleOne(slice, pt, traceNow, {
210+
opts.styleOne(slice, pt, traceNow, gd, {
211211
hovered: false
212212
});
213213
}

‎src/traces/sunburst/style.js

+3-17
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var d3 = require('@plotly/d3');
44
var Color = require('../../components/color');
55
var Lib = require('../../lib');
66
var resizeText = require('../bar/uniform_text').resizeText;
7-
var Drawing = require('../../components/drawing');
7+
var fillOne = require('./fill_one');
88

99
function style(gd) {
1010
var s = gd._fullLayout._sunburstlayer.selectAll('.trace');
@@ -30,22 +30,8 @@ function styleOne(s, pt, trace, gd) {
3030
var lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
3131
var lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
3232

33-
if(gd && ptNumber >= 0) {
34-
pt.i = cdi.i;
35-
36-
var marker = trace.marker;
37-
if(marker.pattern) {
38-
if(!marker.colors || !marker.pattern.shape) marker.color = cdi.color;
39-
} else {
40-
marker.color = cdi.color;
41-
}
42-
43-
Drawing.pointStyle(s, trace, gd, pt);
44-
} else {
45-
Color.fill(s, cdi.color);
46-
}
47-
48-
s.style('stroke-width', lineWidth)
33+
s.call(fillOne, pt, trace, gd)
34+
.style('stroke-width', lineWidth)
4935
.call(Color.stroke, lineColor)
5036
.style('opacity', isLeaf ? trace.leaf.opacity : null);
5137
}

‎src/traces/treemap/attributes.js

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ var pieAttrs = require('../pie/attributes');
99
var sunburstAttrs = require('../sunburst/attributes');
1010
var constants = require('./constants');
1111
var extendFlat = require('../../lib/extend').extendFlat;
12+
var pattern = require('../../components/drawing/attributes').pattern;
1213

1314
module.exports = {
1415
labels: sunburstAttrs.labels,
@@ -123,6 +124,8 @@ module.exports = {
123124

124125
colors: sunburstAttrs.marker.colors,
125126

127+
pattern: pattern,
128+
126129
depthfade: {
127130
valType: 'enumerated',
128131
values: [true, false, 'reversed'],

‎src/traces/treemap/defaults.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var Color = require('../../components/color');
66
var handleDomainDefaults = require('../../plots/domain').defaults;
77
var handleText = require('../bar/defaults').handleText;
88
var TEXTPAD = require('../bar/constants').TEXTPAD;
9+
var handleMarkerDefaults = require('../pie/defaults').handleMarkerDefaults;
910

1011
var Colorscale = require('../../components/colorscale');
1112
var hasColorscale = Colorscale.hasColorscale;
@@ -64,18 +65,15 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
6465
coerce('textposition');
6566
var bottomText = traceOut.textposition.indexOf('bottom') !== -1;
6667

67-
var lineWidth = coerce('marker.line.width');
68-
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
69-
70-
var colors = coerce('marker.colors');
68+
handleMarkerDefaults(traceIn, traceOut, layout, coerce);
7169
var withColorscale = traceOut._hasColorscale = (
7270
hasColorscale(traceIn, 'marker', 'colors') ||
7371
(traceIn.marker || {}).coloraxis // N.B. special logic to consider "values" colorscales
7472
);
7573
if(withColorscale) {
7674
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
7775
} else {
78-
coerce('marker.depthfade', !(colors || []).length);
76+
coerce('marker.depthfade', !(traceOut.marker.colors || []).length);
7977
}
8078

8179
var headerSize = traceOut.textfont.size * 2;

‎src/traces/treemap/draw_ancestors.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
128128
isTransitioning: gd._transitioning
129129
});
130130

131-
slicePath.call(styleOne, pt, trace, {
131+
slicePath.call(styleOne, pt, trace, gd, {
132132
hovered: false
133133
});
134134

‎src/traces/treemap/draw_descendants.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
161161
})
162162
.call(helpers.setSliceCursor, gd, { isTransitioning: gd._transitioning });
163163

164-
slicePath.call(styleOne, pt, trace, {
164+
slicePath.call(styleOne, pt, trace, gd, {
165165
hovered: false
166166
});
167167

‎src/traces/treemap/style.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var Color = require('../../components/color');
55
var Lib = require('../../lib');
66
var helpers = require('../sunburst/helpers');
77
var resizeText = require('../bar/uniform_text').resizeText;
8+
var fillOne = require('../sunburst/fill_one');
89

910
function style(gd) {
1011
var s = gd._fullLayout._treemaplayer.selectAll('.trace');
@@ -18,14 +19,14 @@ function style(gd) {
1819
gTrace.style('opacity', trace.opacity);
1920

2021
gTrace.selectAll('path.surface').each(function(pt) {
21-
d3.select(this).call(styleOne, pt, trace, {
22+
d3.select(this).call(styleOne, pt, trace, gd, {
2223
hovered: false
2324
});
2425
});
2526
});
2627
}
2728

28-
function styleOne(s, pt, trace, opts) {
29+
function styleOne(s, pt, trace, gd, opts) {
2930
var hovered = (opts || {}).hovered;
3031
var cdi = pt.data.data;
3132
var ptNumber = cdi.i;
@@ -80,8 +81,8 @@ function styleOne(s, pt, trace, opts) {
8081
}
8182
}
8283

83-
s.style('stroke-width', lineWidth)
84-
.call(Color.fill, fillColor)
84+
s.call(fillOne, pt, trace, gd, fillColor)
85+
.style('stroke-width', lineWidth)
8586
.call(Color.stroke, lineColor)
8687
.style('opacity', opacity);
8788
}

‎test/image/baselines/zz-sunburst_pattern.png

-8.91 KB
Loading

‎test/image/mocks/zz-sunburst_pattern.json

+31-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,46 @@
11
{
22
"data": [
33
{
4-
"type": "sunburst",
5-
"textinfo": "label",
4+
"type": "icicle",
5+
"textinfo": "none",
66
"labels": ["Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
77
"parents": ["Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
8-
"domain": {"x": [0, 0.5]},
8+
"level": "Enoch",
9+
"domain": {"x": [0, 0.3]},
910
"marker": {
10-
"colors": [ "orange", "steelblue", "steelblue", "steelblue", "green", "red", "red", "purple"]
11+
"colors": [ "orange", "steelblue", "lightgrey", "lightgrey", "green", "red", "lightgrey", "purple"],
12+
"pattern": {
13+
"shape": ".",
14+
"size": 4
15+
},
16+
"line": {
17+
"color": "lightgrey"
18+
}
1119
}
1220
},
1321
{
1422
"type": "sunburst",
1523
"textinfo": "none",
1624
"labels": ["Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
1725
"parents": ["Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
18-
"domain": {"x": [0.5, 1]},
26+
"domain": {"x": [0.35, 0.65]},
27+
"marker": {
28+
"colors": [ "orange", "steelblue", "lightgrey", "lightgrey", "green", "red", "lightgrey", "purple"],
29+
"pattern": {
30+
"shape": ".",
31+
"size": 4
32+
},
33+
"line": {
34+
"color": "lightgrey"
35+
}
36+
}
37+
},
38+
{
39+
"type": "treemap",
40+
"textinfo": "none",
41+
"labels": ["Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
42+
"parents": ["Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
43+
"domain": {"x": [0.7, 1]},
1944
"marker": {
2045
"colors": [ "orange", "steelblue", "lightgrey", "lightgrey", "green", "red", "lightgrey", "purple"],
2146
"pattern": {
@@ -29,7 +54,7 @@
2954
}
3055
],
3156
"layout": {
32-
"title": { "text": "sunburst with pattern"},
57+
"title": { "text": "icicle, sunburst & treemap with pattern"},
3358
"width": 800,
3459
"height": 400
3560
}

0 commit comments

Comments
 (0)