Merge pull request #6619 from plotly/funnelarea-pattern

add pattern to `funnelarea`

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!

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'
     },
 

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');
 

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);
         });
     });
 };

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
 };

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
   }
 }

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": {