pie : add Pattern

Patterns were already added to a few trace types in Plotly, like bar & scatter.

Hereby a first version to do so for pie charts, cf. Feature request: ability to add pattern fills to pie chart #6134

Author: thierryVergult

src/components/drawing/index.js

@@ -699,7 +699,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
         if('mc' in d) {
             fillColor = d.mcc = fns.markerScale(d.mc);
         } else {
-            fillColor = marker.color || 'rgba(0,0,0,0)';
+            fillColor = marker.color || marker.colors || 'rgba(0,0,0,0)';
         }
 
         if(fns.selectedColorFn) {
@@ -766,7 +766,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
                 patternBGColor, patternFGColor, patternFGOpacity
             );
         } else {
-            Color.fill(sel, fillColor);
+            Lib.isArrayOrTypedArray(fillColor) ? Color.fill(sel, fillColor[d.i]) : Color.fill(sel, fillColor);
         }
 
         if(lineWidth) {

src/components/legend/style.js

@@ -512,7 +512,7 @@ module.exports = function style(s, gd, legend) {
 
             var d0Mod = Lib.minExtend(d0, {trace: tMod});
 
-            stylePie(pts, d0Mod, tMod);
+            stylePie(pts, d0Mod, tMod, gd);
         }
     }
 

src/traces/pie/attributes.js

@@ -8,6 +8,7 @@ var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplat
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 
 var extendFlat = require('../../lib/extend').extendFlat;
+var pattern = require('../../components/drawing/attributes').pattern;
 
 var textFontAttrs = fontAttrs({
     editType: 'plot',
@@ -89,6 +90,7 @@ module.exports = {
             },
             editType: 'calc'
         },
+        pattern: pattern,
         editType: 'calc'
     },
 

src/traces/pie/defaults.js

@@ -5,6 +5,7 @@ var Lib = require('../../lib');
 var attributes = require('./attributes');
 var handleDomainDefaults = require('../../plots/domain').defaults;
 var handleText = require('../bar/defaults').handleText;
+var coercePattern = require('../../lib').coercePattern;
 
 function handleLabelsAndValues(labels, values) {
     var hasLabels = Array.isArray(labels);
@@ -64,7 +65,11 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     var lineWidth = coerce('marker.line.width');
     if(lineWidth) coerce('marker.line.color');
 
-    coerce('marker.colors');
+    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(!traceOut.marker.pattern.fgcolor) traceOut.marker.pattern.fgcolor = traceIn.marker.colors;
+    if(!traceOut.marker.pattern.bgcolor) traceOut.marker.pattern.bgcolor = layout.paper_bgcolor;
 
     coerce('scalegroup');
     // TODO: hole needs to be coerced to the same value within a scaleegroup

src/traces/pie/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/style_one.js

@@ -2,13 +2,30 @@
 
 var Color = require('../../components/color');
 var castOption = require('./helpers').castOption;
+var Drawing = require('../../components/drawing');
 
-module.exports = function styleOne(s, pt, trace) {
+module.exports = function styleOne(s, pt, trace, gd) {
     var line = trace.marker.line;
     var lineColor = castOption(line.color, pt.pts) || Color.defaultLine;
     var lineWidth = castOption(line.width, pt.pts) || 0;
 
+    // some temporary console statements, for later debugging, needs to be removed once the assembler below gets clean
+    // console.log('styleOne - s0', s[0], s[0][0], '__data__', s[0][0].__data__);
+    // console.log( 's0 iiiiiiiii pie    : ', (s[0][0].__data__.i !== undefined ? s[0][0].__data__.i : 'nope'));
+    // console.log( 's0 iiiiiiiii legend : ', (s[0][0].__data__[0] !== undefined ? s[0][0].__data__[0].i : 'nope'));
+    // console.log( 'pie style_one: s', s, 'trace', trace, 'gd', gd);
+
+    // to do: rework this assembler code in a next iteration.
+    if(s[0][0].__data__.i === undefined) {
+        // coming from a legend
+        s[0][0].__data__.i = s[0][0].__data__[0].i;
+    }
+    // console.log( 's0 - i : ', s[0][0].__data__['i']);
+
+    Drawing.pointStyle(s, trace, gd);
+    // to do : push into s.style d3 logic
+
     s.style('stroke-width', lineWidth)
-        .call(Color.fill, pt.color)
+        // .call(Color.fill, pt.color)
         .call(Color.stroke, lineColor);
 };