diff --git a/draftlogs/6601_add.md b/draftlogs/6601_add.md index b42c26e127d..9a3e90c2687 100644 --- a/draftlogs/6601_add.md +++ b/draftlogs/6601_add.md @@ -1 +1,2 @@ -- add pattern to pie trace type [[#6601](https://github.com/plotly/plotly.js/pull/6601)] +- 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)], + with thanks to @thierryVergult for the contribution! diff --git a/src/traces/funnelarea/attributes.js b/src/traces/funnelarea/attributes.js index 89c8ec43d3d..a95c6d2969b 100644 --- a/src/traces/funnelarea/attributes.js +++ b/src/traces/funnelarea/attributes.js @@ -28,6 +28,7 @@ module.exports = { width: extendFlat({}, pieAttrs.marker.line.width, {dflt: 1}), editType: 'calc' }, + pattern: pieAttrs.marker.pattern, editType: 'calc' }, diff --git a/src/traces/funnelarea/defaults.js b/src/traces/funnelarea/defaults.js index 1798edaa99e..a44975321aa 100644 --- a/src/traces/funnelarea/defaults.js +++ b/src/traces/funnelarea/defaults.js @@ -5,6 +5,7 @@ var attributes = require('./attributes'); var handleDomainDefaults = require('../../plots/domain').defaults; var handleText = require('../bar/defaults').handleText; var handleLabelsAndValues = require('../pie/defaults').handleLabelsAndValues; +var handleMarkerDefaults = require('../pie/defaults').handleMarkerDefaults; module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) { function coerce(attr, dflt) { @@ -32,10 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout } traceOut._length = len; - var lineWidth = coerce('marker.line.width'); - if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor); - - coerce('marker.colors'); + handleMarkerDefaults(traceIn, traceOut, layout, coerce, 'funnelarea'); coerce('scalegroup'); diff --git a/src/traces/funnelarea/style.js b/src/traces/funnelarea/style.js index 40f5b36cde9..f67a7f9fb4d 100644 --- a/src/traces/funnelarea/style.js +++ b/src/traces/funnelarea/style.js @@ -17,7 +17,7 @@ module.exports = function style(gd) { traceSelection.style({opacity: trace.opacity}); traceSelection.selectAll('path.surface').each(function(pt) { - d3.select(this).call(styleOne, pt, trace); + d3.select(this).call(styleOne, pt, trace, gd); }); }); }; diff --git a/src/traces/pie/defaults.js b/src/traces/pie/defaults.js index 953619a94b7..495baee37af 100644 --- a/src/traces/pie/defaults.js +++ b/src/traces/pie/defaults.js @@ -36,6 +36,17 @@ function handleLabelsAndValues(labels, values) { }; } +function handleMarkerDefaults(traceIn, traceOut, layout, coerce, isFunnelarea) { + var lineWidth = coerce('marker.line.width'); + if(lineWidth) coerce('marker.line.color', isFunnelarea ? layout.paper_bgcolor : undefined); + + var markerColors = coerce('marker.colors'); + coercePattern(coerce, 'marker.pattern', markerColors); + // 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) + if(traceIn.marker && !traceOut.marker.pattern.fgcolor) traceOut.marker.pattern.fgcolor = traceIn.marker.colors; + if(!traceOut.marker.pattern.bgcolor) traceOut.marker.pattern.bgcolor = layout.paper_bgcolor; +} + function supplyDefaults(traceIn, traceOut, defaultColor, layout) { function coerce(attr, dflt) { return Lib.coerce(traceIn, traceOut, attributes, attr, dflt); @@ -62,14 +73,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) { } traceOut._length = len; - var lineWidth = coerce('marker.line.width'); - if(lineWidth) coerce('marker.line.color'); - - var markerColors = coerce('marker.colors'); - coercePattern(coerce, 'marker.pattern', markerColors); - // 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) - if(traceIn.marker && !traceOut.marker.pattern.fgcolor) traceOut.marker.pattern.fgcolor = traceIn.marker.colors; - if(!traceOut.marker.pattern.bgcolor) traceOut.marker.pattern.bgcolor = layout.paper_bgcolor; + handleMarkerDefaults(traceIn, traceOut, layout, coerce); coerce('scalegroup'); // TODO: hole needs to be coerced to the same value within a scaleegroup @@ -122,5 +126,6 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) { module.exports = { handleLabelsAndValues: handleLabelsAndValues, + handleMarkerDefaults: handleMarkerDefaults, supplyDefaults: supplyDefaults }; diff --git a/test/image/baselines/zz-pie_pattern.png b/test/image/baselines/zz-pie_pattern.png index 97baae2c83b..eb81ee34c30 100644 Binary files a/test/image/baselines/zz-pie_pattern.png and b/test/image/baselines/zz-pie_pattern.png differ diff --git a/test/image/mocks/zz-pie_pattern.json b/test/image/mocks/zz-pie_pattern.json index e399da3358b..e9186a2c013 100644 --- a/test/image/mocks/zz-pie_pattern.json +++ b/test/image/mocks/zz-pie_pattern.json @@ -1,5 +1,63 @@ { "data": [ + { + "labels": [ "Lead", "Proposal", "Finalize"], + "values": [ 100, 50, 25], + "type": "funnelarea", + "marker": { + "colors": [ "orange", "yellow", "lightgreen"], + "line": { + "color": "lightgrey", + "width": 2 + }, + "pattern": { + "shape": [ "+", "", "-"], + "fgcolor": [ "darksalmon", "black", "steelblue"] + } + }, + "textfont": { "color": ["black", "white", "black"]}, + "domain": {"y": [0.525, 1], "x": [0.61, 0.79]} + }, { + "labels": [ "Lead", "Proposal", "Finalize"], + "values": [ 100, 50, 25], + "type": "funnelarea", + "marker": { + "colors": [ "orange", "yellow", "lightgreen"], + "line": { + "color": "lightgrey", + "width": 2 + }, + "pattern": { + "shape": [ "+", "", "-"] + } + }, + "textfont": { "color": "black"}, + "domain": {"y": [0.525, 1], "x": [0.41, 0.59]} + }, { + "labels": [ "Lead", "Proposal", "Finalize"], + "values": [ 100, 50, 25], + "type": "funnelarea", + "marker": { + "colors": [ "orange", "yellow", "lightgreen"], + "line": { + "color": "lightgrey", + "width": 2 + } + }, + "domain": {"y": [0.525, 1], "x": [0.21, 0.39]} + }, { + "labels": [ "Lead", "Proposal", "Finalize"], + "values": [ 100, 50, 25], + "type": "funnelarea", + "marker": { + "colors": ["steelblue", "steelblue", "steelblue"], + "line": { + "color": "lightgrey", + "width": 2 + } + }, + "domain": {"y": [0.525, 1], "x": [0.01, 0.19]} + }, { "labels": [ "giraffe", "orangutan", "monkey"], "values": [ 30, 20, 50], @@ -8,7 +66,7 @@ "colors": [ "red", "green", "red"], "line": { "color": "lightgrey", - "width": 4 + "width": 2 }, "pattern": { "shape": [ "+", "", "-"], @@ -18,7 +76,7 @@ }, "textfont": { "color": ["black", "white", "black"]}, "sort": false, - "domain": {"x": [0.81, 0.99]} + "domain": {"y": [0, 0.475], "x": [0.81, 0.99]} }, { "labels": [ "giraffe", "orangutan", "monkey"], "values": [ 30, 20, 50], @@ -36,7 +94,7 @@ }, "textfont": { "color": ["black", "white", "black"]}, "sort": false, - "domain": {"x": [0.61, 0.79]} + "domain": {"y": [0, 0.475], "x": [0.61, 0.79]} }, { "labels": [ "giraffe", "orangutan", "monkey"], "values": [ 30, 20, 50], @@ -53,7 +111,7 @@ }, "textfont": { "color": "black"}, "sort": false, - "domain": {"x": [0.41, 0.59]} + "domain": {"y": [0, 0.475], "x": [0.41, 0.59]} }, { "labels": [ "giraffe", "orangutan", "monkey"], "values": [ 30, 20, 50], @@ -66,7 +124,7 @@ } }, "sort": false, - "domain": {"x": [0.21, 0.39]} + "domain": {"y": [0, 0.475], "x": [0.21, 0.39]} }, { "labels": [ "giraffe", "orangutan", "monkey"], "values": [ 30, 20, 50], @@ -79,11 +137,30 @@ } }, "sort": false, - "domain": {"x": [0.01, 0.19]} + "domain": {"y": [0, 0.475], "x": [0.01, 0.19]} + }, { + "labels": [ "Lead", "Proposal", "Finalize"], + "values": [ 100, 50, 25], + "type": "funnelarea", + "marker": { + "colors": [ "red", "green", "red"], + "line": { + "color": "lightgrey", + "width": 4 + }, + "pattern": { + "shape": [ "+", "", "-"], + "fgcolor": [ "darksalmon", "black", "steelblue"], + "bgcolor": "lightgrey" + } + }, + "textfont": { "color": ["black", "white", "black"]}, + "domain": {"y": [0.525, 1], "x": [0.81, 0.99]} } ], "layout": { - "title": { "text": "pie chart with pattern"}, - "width": 800 + "title": { "text": "pie and funnelarea charts with pattern"}, + "width": 800, + "height": 400 } } diff --git a/test/plot-schema.json b/test/plot-schema.json index 24d6df68c97..eedddcbeee5 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -27220,6 +27220,99 @@ "valType": "string" } }, + "pattern": { + "bgcolor": { + "arrayOk": true, + "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.", + "editType": "style", + "valType": "color" + }, + "bgcolorsrc": { + "description": "Sets the source reference on Chart Studio Cloud for `bgcolor`.", + "editType": "none", + "valType": "string" + }, + "description": "Sets the pattern within the marker.", + "editType": "style", + "fgcolor": { + "arrayOk": true, + "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`.", + "editType": "style", + "valType": "color" + }, + "fgcolorsrc": { + "description": "Sets the source reference on Chart Studio Cloud for `fgcolor`.", + "editType": "none", + "valType": "string" + }, + "fgopacity": { + "description": "Sets the opacity of the foreground pattern fill. Defaults to a 0.5 when `fillmode` is *overlay*. Otherwise, defaults to 1.", + "editType": "style", + "max": 1, + "min": 0, + "valType": "number" + }, + "fillmode": { + "description": "Determines whether `marker.color` should be used as a default to `bgcolor` or a `fgcolor`.", + "dflt": "replace", + "editType": "style", + "valType": "enumerated", + "values": [ + "replace", + "overlay" + ] + }, + "role": "object", + "shape": { + "arrayOk": true, + "description": "Sets the shape of the pattern fill. By default, no pattern is used for filling the area.", + "dflt": "", + "editType": "style", + "valType": "enumerated", + "values": [ + "", + "/", + "\\", + "x", + "-", + "|", + "+", + "." + ] + }, + "shapesrc": { + "description": "Sets the source reference on Chart Studio Cloud for `shape`.", + "editType": "none", + "valType": "string" + }, + "size": { + "arrayOk": true, + "description": "Sets the size of unit squares of the pattern fill in pixels, which corresponds to the interval of repetition of the pattern.", + "dflt": 8, + "editType": "style", + "min": 0, + "valType": "number" + }, + "sizesrc": { + "description": "Sets the source reference on Chart Studio Cloud for `size`.", + "editType": "none", + "valType": "string" + }, + "solidity": { + "arrayOk": true, + "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.", + "dflt": 0.3, + "editType": "style", + "max": 1, + "min": 0, + "valType": "number" + }, + "soliditysrc": { + "description": "Sets the source reference on Chart Studio Cloud for `solidity`.", + "editType": "none", + "valType": "string" + } + }, "role": "object" }, "meta": {