Skip to content

Commit 23fc32b

Browse files
archmojarchmoj
authored
Merge pull request #6601 from thierryVergult/piePattern
pie : add Pattern
2 parents beb73eb + f376b63 commit 23fc32b

File tree

10 files changed

+213
-10
lines changed

10 files changed

+213
-10
lines changed

‎draftlogs/6601_add.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
- add pattern to pie trace type [[#6601](https://github.com/plotly/plotly.js/pull/6601)]

‎src/components/drawing/index.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -619,20 +619,22 @@ drawing.getPatternAttr = function(mp, i, dflt) {
619619
return mp;
620620
};
621621

622-
drawing.pointStyle = function(s, trace, gd) {
622+
drawing.pointStyle = function(s, trace, gd, pt) {
623623
if(!s.size()) return;
624624

625625
var fns = drawing.makePointStyleFns(trace);
626626

627627
s.each(function(d) {
628-
drawing.singlePointStyle(d, d3.select(this), trace, fns, gd);
628+
drawing.singlePointStyle(d, d3.select(this), trace, fns, gd, pt);
629629
});
630630
};
631631

632-
drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
632+
drawing.singlePointStyle = function(d, sel, trace, fns, gd, pt) {
633633
var marker = trace.marker;
634634
var markerLine = marker.line;
635635

636+
if(pt && pt.i >= 0 && d.i === undefined) d.i = pt.i;
637+
636638
sel.style('opacity',
637639
fns.selectedOpacityFn ? fns.selectedOpacityFn(d) :
638640
(d.mo === undefined ? marker.opacity : d.mo)
@@ -699,7 +701,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
699701
if('mc' in d) {
700702
fillColor = d.mcc = fns.markerScale(d.mc);
701703
} else {
702-
fillColor = marker.color || 'rgba(0,0,0,0)';
704+
fillColor = marker.color || marker.colors || 'rgba(0,0,0,0)';
703705
}
704706

705707
if(fns.selectedColorFn) {
@@ -766,7 +768,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
766768
patternBGColor, patternFGColor, patternFGOpacity
767769
);
768770
} else {
769-
Color.fill(sel, fillColor);
771+
Lib.isArrayOrTypedArray(fillColor) ? Color.fill(sel, fillColor[d.i]) : Color.fill(sel, fillColor);
770772
}
771773

772774
if(lineWidth) {

‎src/components/legend/style.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,7 @@ module.exports = function style(s, gd, legend) {
512512

513513
var d0Mod = Lib.minExtend(d0, {trace: tMod});
514514

515-
stylePie(pts, d0Mod, tMod);
515+
stylePie(pts, d0Mod, tMod, gd);
516516
}
517517
}
518518

‎src/traces/pie/attributes.js

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplat
88
var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
99

1010
var extendFlat = require('../../lib/extend').extendFlat;
11+
var pattern = require('../../components/drawing/attributes').pattern;
1112

1213
var textFontAttrs = fontAttrs({
1314
editType: 'plot',
@@ -89,6 +90,7 @@ module.exports = {
8990
},
9091
editType: 'calc'
9192
},
93+
pattern: pattern,
9294
editType: 'calc'
9395
},
9496

‎src/traces/pie/defaults.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var Lib = require('../../lib');
55
var attributes = require('./attributes');
66
var handleDomainDefaults = require('../../plots/domain').defaults;
77
var handleText = require('../bar/defaults').handleText;
8+
var coercePattern = require('../../lib').coercePattern;
89

910
function handleLabelsAndValues(labels, values) {
1011
var hasLabels = Array.isArray(labels);
@@ -64,7 +65,11 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
6465
var lineWidth = coerce('marker.line.width');
6566
if(lineWidth) coerce('marker.line.color');
6667

67-
coerce('marker.colors');
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;
6873

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

‎src/traces/pie/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
};

‎src/traces/pie/style_one.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,24 @@
22

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

6-
module.exports = function styleOne(s, pt, trace) {
7+
module.exports = function styleOne(s, pt, trace, gd) {
78
var line = trace.marker.line;
89
var lineColor = castOption(line.color, pt.pts) || Color.defaultLine;
910
var lineWidth = castOption(line.width, pt.pts) || 0;
1011

12+
// enforce the point color, when colors (with s) & the pattern shape are missing.
13+
// 'abuse' the color attribute, used in the Drawing component for bar trace type.
14+
var marker = trace.marker;
15+
if(marker.pattern) {
16+
if(!marker.colors || !marker.pattern.shape) marker.color = pt.color;
17+
} else {
18+
marker.color = pt.color;
19+
}
20+
21+
Drawing.pointStyle(s, trace, gd, pt);
22+
1123
s.style('stroke-width', lineWidth)
12-
.call(Color.fill, pt.color)
1324
.call(Color.stroke, lineColor);
1425
};

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

44.7 KB
Loading

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

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
{
2+
"data": [
3+
{
4+
"labels": [ "giraffe", "orangutan", "monkey"],
5+
"values": [ 30, 20, 50],
6+
"type": "pie",
7+
"marker": {
8+
"colors": [ "red", "green", "red"],
9+
"line": {
10+
"color": "lightgrey",
11+
"width": 4
12+
},
13+
"pattern": {
14+
"shape": [ "+", "", "-"],
15+
"fgcolor": [ "darksalmon", "black", "steelblue"],
16+
"bgcolor": "lightgrey"
17+
}
18+
},
19+
"textfont": { "color": ["black", "white", "black"]},
20+
"sort": false,
21+
"domain": {"x": [0.81, 0.99]}
22+
}, {
23+
"labels": [ "giraffe", "orangutan", "monkey"],
24+
"values": [ 30, 20, 50],
25+
"type": "pie",
26+
"marker": {
27+
"colors": [ "red", "green", "blue"],
28+
"line": {
29+
"color": "lightgrey",
30+
"width": 4
31+
},
32+
"pattern": {
33+
"shape": [ "+", "", "-"],
34+
"fgcolor": [ "darksalmon", "black", "steelblue"]
35+
}
36+
},
37+
"textfont": { "color": ["black", "white", "black"]},
38+
"sort": false,
39+
"domain": {"x": [0.61, 0.79]}
40+
}, {
41+
"labels": [ "giraffe", "orangutan", "monkey"],
42+
"values": [ 30, 20, 50],
43+
"type": "pie",
44+
"marker": {
45+
"colors": [ "red", "green", "blue"],
46+
"line": {
47+
"color": "lightgrey",
48+
"width": 4
49+
},
50+
"pattern": {
51+
"shape": [ "+", "", "-"]
52+
}
53+
},
54+
"textfont": { "color": "black"},
55+
"sort": false,
56+
"domain": {"x": [0.41, 0.59]}
57+
}, {
58+
"labels": [ "giraffe", "orangutan", "monkey"],
59+
"values": [ 30, 20, 50],
60+
"type": "pie",
61+
"marker": {
62+
"colors": [ "red", "green", "blue"],
63+
"line": {
64+
"color": "lightgrey",
65+
"width": 4
66+
}
67+
},
68+
"sort": false,
69+
"domain": {"x": [0.21, 0.39]}
70+
}, {
71+
"labels": [ "giraffe", "orangutan", "monkey"],
72+
"values": [ 30, 20, 50],
73+
"type": "pie",
74+
"marker": {
75+
"colors": ["steelblue", "steelblue", "steelblue"],
76+
"line": {
77+
"color": "lightgrey",
78+
"width": 4
79+
}
80+
},
81+
"sort": false,
82+
"domain": {"x": [0.01, 0.19]}
83+
}
84+
],
85+
"layout": {
86+
"title": { "text": "pie chart with pattern"},
87+
"width": 800
88+
}
89+
}

‎test/plot-schema.json

+93
Original file line numberDiff line numberDiff line change
@@ -42192,6 +42192,99 @@
4219242192
"valType": "string"
4219342193
}
4219442194
},
42195+
"pattern": {
42196+
"bgcolor": {
42197+
"arrayOk": true,
42198+
"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.",
42199+
"editType": "style",
42200+
"valType": "color"
42201+
},
42202+
"bgcolorsrc": {
42203+
"description": "Sets the source reference on Chart Studio Cloud for `bgcolor`.",
42204+
"editType": "none",
42205+
"valType": "string"
42206+
},
42207+
"description": "Sets the pattern within the marker.",
42208+
"editType": "style",
42209+
"fgcolor": {
42210+
"arrayOk": true,
42211+
"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`.",
42212+
"editType": "style",
42213+
"valType": "color"
42214+
},
42215+
"fgcolorsrc": {
42216+
"description": "Sets the source reference on Chart Studio Cloud for `fgcolor`.",
42217+
"editType": "none",
42218+
"valType": "string"
42219+
},
42220+
"fgopacity": {
42221+
"description": "Sets the opacity of the foreground pattern fill. Defaults to a 0.5 when `fillmode` is *overlay*. Otherwise, defaults to 1.",
42222+
"editType": "style",
42223+
"max": 1,
42224+
"min": 0,
42225+
"valType": "number"
42226+
},
42227+
"fillmode": {
42228+
"description": "Determines whether `marker.color` should be used as a default to `bgcolor` or a `fgcolor`.",
42229+
"dflt": "replace",
42230+
"editType": "style",
42231+
"valType": "enumerated",
42232+
"values": [
42233+
"replace",
42234+
"overlay"
42235+
]
42236+
},
42237+
"role": "object",
42238+
"shape": {
42239+
"arrayOk": true,
42240+
"description": "Sets the shape of the pattern fill. By default, no pattern is used for filling the area.",
42241+
"dflt": "",
42242+
"editType": "style",
42243+
"valType": "enumerated",
42244+
"values": [
42245+
"",
42246+
"/",
42247+
"\\",
42248+
"x",
42249+
"-",
42250+
"|",
42251+
"+",
42252+
"."
42253+
]
42254+
},
42255+
"shapesrc": {
42256+
"description": "Sets the source reference on Chart Studio Cloud for `shape`.",
42257+
"editType": "none",
42258+
"valType": "string"
42259+
},
42260+
"size": {
42261+
"arrayOk": true,
42262+
"description": "Sets the size of unit squares of the pattern fill in pixels, which corresponds to the interval of repetition of the pattern.",
42263+
"dflt": 8,
42264+
"editType": "style",
42265+
"min": 0,
42266+
"valType": "number"
42267+
},
42268+
"sizesrc": {
42269+
"description": "Sets the source reference on Chart Studio Cloud for `size`.",
42270+
"editType": "none",
42271+
"valType": "string"
42272+
},
42273+
"solidity": {
42274+
"arrayOk": true,
42275+
"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.",
42276+
"dflt": 0.3,
42277+
"editType": "style",
42278+
"max": 1,
42279+
"min": 0,
42280+
"valType": "number"
42281+
},
42282+
"soliditysrc": {
42283+
"description": "Sets the source reference on Chart Studio Cloud for `solidity`.",
42284+
"editType": "none",
42285+
"valType": "string"
42286+
}
42287+
},
4219542288
"role": "object"
4219642289
},
4219742290
"meta": {

0 commit comments

Comments
 (0)