Merge pull request #6627 from plotly/fix-patterns-pie-sunburst

Fix patterns coloring for pie, sunburst, funnelarea, icicle & treemap

draftlogs/6601_add.md

@@ -1,2 +1,2 @@
-- add pattern to pie, funnelarea, sunburst, icicle and treemap traces [[#6601](https://github.com/plotly/plotly.js/pull/6601), [#6619](https://github.com/plotly/plotly.js/pull/6619), [#6622](https://github.com/plotly/plotly.js/pull/6622), [#6626](https://github.com/plotly/plotly.js/pull/6626)],
+- add pattern to pie, funnelarea, sunburst, icicle and treemap traces [[#6601](https://github.com/plotly/plotly.js/pull/6601), [#6619](https://github.com/plotly/plotly.js/pull/6619), [#6622](https://github.com/plotly/plotly.js/pull/6622), [#6626](https://github.com/plotly/plotly.js/pull/6626), [#6627](https://github.com/plotly/plotly.js/pull/6627)],
   with thanks to @thierryVergult for the contribution!

src/components/drawing/index.js

@@ -747,12 +747,18 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd, pt) {
             drawing.gradient(sel, gd, gradientID, gradientType,
                 [[0, gradientColor], [1, fillColor]], 'fill');
         } else if(patternShape) {
+            var perPointPattern = false;
+            var fgcolor = markerPattern.fgcolor;
+            if(!fgcolor && pt && pt.color) {
+                fgcolor = pt.color;
+                perPointPattern = true;
+            }
+            var patternFGColor = drawing.getPatternAttr(fgcolor, d.i, null);
             var patternBGColor = drawing.getPatternAttr(markerPattern.bgcolor, d.i, null);
-            var patternFGColor = drawing.getPatternAttr(markerPattern.fgcolor, d.i, null);
             var patternFGOpacity = markerPattern.fgopacity;
             var patternSize = drawing.getPatternAttr(markerPattern.size, d.i, 8);
             var patternSolidity = drawing.getPatternAttr(markerPattern.solidity, d.i, 0.3);
-            var perPointPattern = d.mcc ||
+            perPointPattern = perPointPattern || d.mcc ||
                 Lib.isArrayOrTypedArray(markerPattern.shape) ||
                 Lib.isArrayOrTypedArray(markerPattern.bgcolor) ||
                 Lib.isArrayOrTypedArray(markerPattern.fgcolor) ||

src/traces/pie/fill_one.js

@@ -1,16 +1,13 @@
 'use strict';
 
 var Drawing = require('../../components/drawing');
+var Color = require('../../components/color');
 
 module.exports = function fillOne(s, pt, trace, gd) {
-    // enforce the point color, when colors (with s) & the pattern shape are missing.
-    // 'abuse' the color attribute, used in the Drawing component for bar trace type.
-    var marker = trace.marker;
-    if(marker.pattern) {
-        if(!marker.colors || !marker.pattern.shape) marker.color = pt.color;
+    var pattern = trace.marker.pattern;
+    if(pattern && pattern.shape) {
+        Drawing.pointStyle(s, trace, gd, pt);
     } else {
-        marker.color = pt.color;
+        Color.fill(s, pt.color);
     }
-
-    Drawing.pointStyle(s, trace, gd, pt);
 };

src/traces/pie/style_one.js

@@ -9,15 +9,6 @@ module.exports = function styleOne(s, pt, trace, gd) {
     var lineColor = castOption(line.color, pt.pts) || Color.defaultLine;
     var lineWidth = castOption(line.width, pt.pts) || 0;
 
-    // enforce the point color, when colors (with s) & the pattern shape are missing.
-    // 'abuse' the color attribute, used in the Drawing component for bar trace type.
-    var marker = trace.marker;
-    if(marker.pattern) {
-        if(!marker.colors || !marker.pattern.shape) marker.color = pt.color;
-    } else {
-        marker.color = pt.color;
-    }
-
     s.call(fillOne, pt, trace, gd)
         .style('stroke-width', lineWidth)
         .call(Color.stroke, lineColor);

src/traces/sunburst/fill_one.js

@@ -9,14 +9,18 @@ module.exports = function fillOne(s, pt, trace, gd, fadedColor) {
 
     var color = fadedColor || cdi.color;
 
-    if(gd && ptNumber >= 0) {
+    if(ptNumber >= 0) {
         pt.i = cdi.i;
 
         var marker = trace.marker;
         if(marker.pattern) {
-            if(!marker.colors || !marker.pattern.shape) marker.color = color;
+            if(!marker.colors || !marker.pattern.shape) {
+                marker.color = color;
+                pt.color = color;
+            }
         } else {
             marker.color = color;
+            pt.color = color;
         }
 
         Drawing.pointStyle(s, trace, gd, pt);

test/image/mocks/pie_label0_dlabel.json

@@ -10,7 +10,14 @@
       ],
       "label0": 20,
       "dlabel": 5,
-      "type": "pie"
+      "type": "pie",
+      "marker": {
+        "pattern": {
+          "fillmode": "replace",
+          "shape": ".",
+          "size": 3
+        }
+      }
     }
   ],
   "layout": {

test/image/mocks/treemap_packages_colorscale_allone.json

@@ -16,6 +16,11 @@
 				"line": {
 					"color": "#777"
 				},
+				"pattern": {
+					"fillmode": "replace",
+					"shape": ".",
+					"size": 3
+				},
 				"colorscale": [
 					[
 						0,