Skip to content

Commit 01ce8b5

Browse files
archmojarchmoj
authored
Merge pull request #6619 from plotly/funnelarea-pattern
add pattern to `funnelarea`
2 parents 23fc32b + 1874e04 commit 01ce8b5

File tree

8 files changed

+197
-22
lines changed

8 files changed

+197
-22
lines changed

Diff for: ‎draftlogs/6601_add.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
- add pattern to pie trace type [[#6601](https://github.com/plotly/plotly.js/pull/6601)]
1+
- add pattern to pie and funnelarea traces [[#6601](https://github.com/plotly/plotly.js/pull/6601), [#6619](https://github.com/plotly/plotly.js/pull/6619)],
2+
with thanks to @thierryVergult for the contribution!

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

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ module.exports = {
2828
width: extendFlat({}, pieAttrs.marker.line.width, {dflt: 1}),
2929
editType: 'calc'
3030
},
31+
pattern: pieAttrs.marker.pattern,
3132
editType: 'calc'
3233
},
3334

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var attributes = require('./attributes');
55
var handleDomainDefaults = require('../../plots/domain').defaults;
66
var handleText = require('../bar/defaults').handleText;
77
var handleLabelsAndValues = require('../pie/defaults').handleLabelsAndValues;
8+
var handleMarkerDefaults = require('../pie/defaults').handleMarkerDefaults;
89

910
module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
1011
function coerce(attr, dflt) {
@@ -32,10 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
3233
}
3334
traceOut._length = len;
3435

35-
var lineWidth = coerce('marker.line.width');
36-
if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
37-
38-
coerce('marker.colors');
36+
handleMarkerDefaults(traceIn, traceOut, layout, coerce, 'funnelarea');
3937

4038
coerce('scalegroup');
4139

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ module.exports = function style(gd) {
1717
traceSelection.style({opacity: trace.opacity});
1818

1919
traceSelection.selectAll('path.surface').each(function(pt) {
20-
d3.select(this).call(styleOne, pt, trace);
20+
d3.select(this).call(styleOne, pt, trace, gd);
2121
});
2222
});
2323
};

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

+13-8
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,17 @@ function handleLabelsAndValues(labels, values) {
3636
};
3737
}
3838

39+
function handleMarkerDefaults(traceIn, traceOut, layout, coerce, isFunnelarea) {
40+
var lineWidth = coerce('marker.line.width');
41+
if(lineWidth) coerce('marker.line.color', isFunnelarea ? layout.paper_bgcolor : undefined);
42+
43+
var markerColors = coerce('marker.colors');
44+
coercePattern(coerce, 'marker.pattern', markerColors);
45+
// push the marker colors (with s) to the foreground colors, to work around logic in the drawing pattern code on marker.color (without s, which is okay for a bar trace)
46+
if(traceIn.marker && !traceOut.marker.pattern.fgcolor) traceOut.marker.pattern.fgcolor = traceIn.marker.colors;
47+
if(!traceOut.marker.pattern.bgcolor) traceOut.marker.pattern.bgcolor = layout.paper_bgcolor;
48+
}
49+
3950
function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
4051
function coerce(attr, dflt) {
4152
return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
@@ -62,14 +73,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
6273
}
6374
traceOut._length = len;
6475

65-
var lineWidth = coerce('marker.line.width');
66-
if(lineWidth) coerce('marker.line.color');
67-
68-
var markerColors = coerce('marker.colors');
69-
coercePattern(coerce, 'marker.pattern', markerColors);
70-
// push the marker colors (with s) to the foreground colors, to work around logic in the drawing pattern code on marker.color (without s, which is okay for a bar trace)
71-
if(traceIn.marker && !traceOut.marker.pattern.fgcolor) traceOut.marker.pattern.fgcolor = traceIn.marker.colors;
72-
if(!traceOut.marker.pattern.bgcolor) traceOut.marker.pattern.bgcolor = layout.paper_bgcolor;
76+
handleMarkerDefaults(traceIn, traceOut, layout, coerce);
7377

7478
coerce('scalegroup');
7579
// TODO: hole needs to be coerced to the same value within a scaleegroup
@@ -122,5 +126,6 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
122126

123127
module.exports = {
124128
handleLabelsAndValues: handleLabelsAndValues,
129+
handleMarkerDefaults: handleMarkerDefaults,
125130
supplyDefaults: supplyDefaults
126131
};

Diff for: ‎test/image/baselines/zz-pie_pattern.png

18.9 KB
Loading

Diff for: ‎test/image/mocks/zz-pie_pattern.json

+85-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,63 @@
11
{
22
"data": [
3+
{
4+
"labels": [ "Lead", "Proposal", "Finalize"],
5+
"values": [ 100, 50, 25],
6+
"type": "funnelarea",
7+
"marker": {
8+
"colors": [ "orange", "yellow", "lightgreen"],
9+
"line": {
10+
"color": "lightgrey",
11+
"width": 2
12+
},
13+
"pattern": {
14+
"shape": [ "+", "", "-"],
15+
"fgcolor": [ "darksalmon", "black", "steelblue"]
16+
}
17+
},
18+
"textfont": { "color": ["black", "white", "black"]},
19+
"domain": {"y": [0.525, 1], "x": [0.61, 0.79]}
20+
}, {
21+
"labels": [ "Lead", "Proposal", "Finalize"],
22+
"values": [ 100, 50, 25],
23+
"type": "funnelarea",
24+
"marker": {
25+
"colors": [ "orange", "yellow", "lightgreen"],
26+
"line": {
27+
"color": "lightgrey",
28+
"width": 2
29+
},
30+
"pattern": {
31+
"shape": [ "+", "", "-"]
32+
}
33+
},
34+
"textfont": { "color": "black"},
35+
"domain": {"y": [0.525, 1], "x": [0.41, 0.59]}
36+
}, {
37+
"labels": [ "Lead", "Proposal", "Finalize"],
38+
"values": [ 100, 50, 25],
39+
"type": "funnelarea",
40+
"marker": {
41+
"colors": [ "orange", "yellow", "lightgreen"],
42+
"line": {
43+
"color": "lightgrey",
44+
"width": 2
45+
}
46+
},
47+
"domain": {"y": [0.525, 1], "x": [0.21, 0.39]}
48+
}, {
49+
"labels": [ "Lead", "Proposal", "Finalize"],
50+
"values": [ 100, 50, 25],
51+
"type": "funnelarea",
52+
"marker": {
53+
"colors": ["steelblue", "steelblue", "steelblue"],
54+
"line": {
55+
"color": "lightgrey",
56+
"width": 2
57+
}
58+
},
59+
"domain": {"y": [0.525, 1], "x": [0.01, 0.19]}
60+
},
361
{
462
"labels": [ "giraffe", "orangutan", "monkey"],
563
"values": [ 30, 20, 50],
@@ -8,7 +66,7 @@
866
"colors": [ "red", "green", "red"],
967
"line": {
1068
"color": "lightgrey",
11-
"width": 4
69+
"width": 2
1270
},
1371
"pattern": {
1472
"shape": [ "+", "", "-"],
@@ -18,7 +76,7 @@
1876
},
1977
"textfont": { "color": ["black", "white", "black"]},
2078
"sort": false,
21-
"domain": {"x": [0.81, 0.99]}
79+
"domain": {"y": [0, 0.475], "x": [0.81, 0.99]}
2280
}, {
2381
"labels": [ "giraffe", "orangutan", "monkey"],
2482
"values": [ 30, 20, 50],
@@ -36,7 +94,7 @@
3694
},
3795
"textfont": { "color": ["black", "white", "black"]},
3896
"sort": false,
39-
"domain": {"x": [0.61, 0.79]}
97+
"domain": {"y": [0, 0.475], "x": [0.61, 0.79]}
4098
}, {
4199
"labels": [ "giraffe", "orangutan", "monkey"],
42100
"values": [ 30, 20, 50],
@@ -53,7 +111,7 @@
53111
},
54112
"textfont": { "color": "black"},
55113
"sort": false,
56-
"domain": {"x": [0.41, 0.59]}
114+
"domain": {"y": [0, 0.475], "x": [0.41, 0.59]}
57115
}, {
58116
"labels": [ "giraffe", "orangutan", "monkey"],
59117
"values": [ 30, 20, 50],
@@ -66,7 +124,7 @@
66124
}
67125
},
68126
"sort": false,
69-
"domain": {"x": [0.21, 0.39]}
127+
"domain": {"y": [0, 0.475], "x": [0.21, 0.39]}
70128
}, {
71129
"labels": [ "giraffe", "orangutan", "monkey"],
72130
"values": [ 30, 20, 50],
@@ -79,11 +137,30 @@
79137
}
80138
},
81139
"sort": false,
82-
"domain": {"x": [0.01, 0.19]}
140+
"domain": {"y": [0, 0.475], "x": [0.01, 0.19]}
141+
}, {
142+
"labels": [ "Lead", "Proposal", "Finalize"],
143+
"values": [ 100, 50, 25],
144+
"type": "funnelarea",
145+
"marker": {
146+
"colors": [ "red", "green", "red"],
147+
"line": {
148+
"color": "lightgrey",
149+
"width": 4
150+
},
151+
"pattern": {
152+
"shape": [ "+", "", "-"],
153+
"fgcolor": [ "darksalmon", "black", "steelblue"],
154+
"bgcolor": "lightgrey"
155+
}
156+
},
157+
"textfont": { "color": ["black", "white", "black"]},
158+
"domain": {"y": [0.525, 1], "x": [0.81, 0.99]}
83159
}
84160
],
85161
"layout": {
86-
"title": { "text": "pie chart with pattern"},
87-
"width": 800
162+
"title": { "text": "pie and funnelarea charts with pattern"},
163+
"width": 800,
164+
"height": 400
88165
}
89166
}

Diff for: ‎test/plot-schema.json

+93
Original file line numberDiff line numberDiff line change
@@ -27220,6 +27220,99 @@
2722027220
"valType": "string"
2722127221
}
2722227222
},
27223+
"pattern": {
27224+
"bgcolor": {
27225+
"arrayOk": true,
27226+
"description": "When there is no colorscale sets the color of background pattern fill. Defaults to a `marker.color` background when `fillmode` is *overlay*. Otherwise, defaults to a transparent background.",
27227+
"editType": "style",
27228+
"valType": "color"
27229+
},
27230+
"bgcolorsrc": {
27231+
"description": "Sets the source reference on Chart Studio Cloud for `bgcolor`.",
27232+
"editType": "none",
27233+
"valType": "string"
27234+
},
27235+
"description": "Sets the pattern within the marker.",
27236+
"editType": "style",
27237+
"fgcolor": {
27238+
"arrayOk": true,
27239+
"description": "When there is no colorscale sets the color of foreground pattern fill. Defaults to a `marker.color` background when `fillmode` is *replace*. Otherwise, defaults to dark grey or white to increase contrast with the `bgcolor`.",
27240+
"editType": "style",
27241+
"valType": "color"
27242+
},
27243+
"fgcolorsrc": {
27244+
"description": "Sets the source reference on Chart Studio Cloud for `fgcolor`.",
27245+
"editType": "none",
27246+
"valType": "string"
27247+
},
27248+
"fgopacity": {
27249+
"description": "Sets the opacity of the foreground pattern fill. Defaults to a 0.5 when `fillmode` is *overlay*. Otherwise, defaults to 1.",
27250+
"editType": "style",
27251+
"max": 1,
27252+
"min": 0,
27253+
"valType": "number"
27254+
},
27255+
"fillmode": {
27256+
"description": "Determines whether `marker.color` should be used as a default to `bgcolor` or a `fgcolor`.",
27257+
"dflt": "replace",
27258+
"editType": "style",
27259+
"valType": "enumerated",
27260+
"values": [
27261+
"replace",
27262+
"overlay"
27263+
]
27264+
},
27265+
"role": "object",
27266+
"shape": {
27267+
"arrayOk": true,
27268+
"description": "Sets the shape of the pattern fill. By default, no pattern is used for filling the area.",
27269+
"dflt": "",
27270+
"editType": "style",
27271+
"valType": "enumerated",
27272+
"values": [
27273+
"",
27274+
"/",
27275+
"\\",
27276+
"x",
27277+
"-",
27278+
"|",
27279+
"+",
27280+
"."
27281+
]
27282+
},
27283+
"shapesrc": {
27284+
"description": "Sets the source reference on Chart Studio Cloud for `shape`.",
27285+
"editType": "none",
27286+
"valType": "string"
27287+
},
27288+
"size": {
27289+
"arrayOk": true,
27290+
"description": "Sets the size of unit squares of the pattern fill in pixels, which corresponds to the interval of repetition of the pattern.",
27291+
"dflt": 8,
27292+
"editType": "style",
27293+
"min": 0,
27294+
"valType": "number"
27295+
},
27296+
"sizesrc": {
27297+
"description": "Sets the source reference on Chart Studio Cloud for `size`.",
27298+
"editType": "none",
27299+
"valType": "string"
27300+
},
27301+
"solidity": {
27302+
"arrayOk": true,
27303+
"description": "Sets the solidity of the pattern fill. Solidity is roughly the fraction of the area filled by the pattern. Solidity of 0 shows only the background color without pattern and solidty of 1 shows only the foreground color without pattern.",
27304+
"dflt": 0.3,
27305+
"editType": "style",
27306+
"max": 1,
27307+
"min": 0,
27308+
"valType": "number"
27309+
},
27310+
"soliditysrc": {
27311+
"description": "Sets the source reference on Chart Studio Cloud for `solidity`.",
27312+
"editType": "none",
27313+
"valType": "string"
27314+
}
27315+
},
2722327316
"role": "object"
2722427317
},
2722527318
"meta": {

0 commit comments

Comments
 (0)