Merge pull request #6628 from plotly/patterns-4-items-more

Fix rendering of pie legends when arrays e.g. `pattern` or `line.width` having 4 items or more

Author: archmoj

Diff for: 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), [#6627](https://github.com/plotly/plotly.js/pull/6627)],
+- 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)  [#6628](https://github.com/plotly/plotly.js/pull/6628)],
   with thanks to @thierryVergult for the contribution!

Diff for: src/components/legend/style.js

@@ -503,14 +503,11 @@ module.exports = function style(s, gd, legend) {
         pts.exit().remove();
 
         if(pts.size()) {
-            var cont = (trace.marker || {}).line;
-            var lw = boundLineWidth(pieCastOption(cont.width, d0.pts), cont, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);
+            var cont = trace.marker || {};
+            var lw = boundLineWidth(pieCastOption(cont.line.width, d0.pts), cont.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);
 
-            var tMod = Lib.minExtend(trace, {marker: {line: {width: lw}}});
-            // since minExtend do not slice more than 3 items we need to patch line.color here
-            tMod.marker.line.color = cont.color;
-
-            var d0Mod = Lib.minExtend(d0, {trace: tMod});
+            var tMod = Lib.minExtend(trace, {marker: {line: {width: lw}}}, true);
+            var d0Mod = Lib.minExtend(d0, {trace: tMod}, true);
 
             stylePie(pts, d0Mod, tMod, gd);
         }

Diff for: src/lib/index.js

@@ -698,10 +698,10 @@ lib.getTargetArray = function(trace, transformOpts) {
  * because extend-like algorithms are hella slow
  * obj2 is assumed to already be clean of these things (including no arrays)
  */
-lib.minExtend = function(obj1, obj2) {
+lib.minExtend = function(obj1, obj2, isPie) {
     var objOut = {};
     if(typeof obj2 !== 'object') obj2 = {};
-    var arrayLen = 3;
+    var arrayLen = isPie = 3;
     var keys = Object.keys(obj1);
     var i, k, v;
 
@@ -711,7 +711,7 @@ lib.minExtend = function(obj1, obj2) {
         if(k.charAt(0) === '_' || typeof v === 'function') continue;
         else if(k === 'module') objOut[k] = v;
         else if(Array.isArray(v)) {
-            if(k === 'colorscale') {
+            if(isPie || k === 'colorscale') {
                 objOut[k] = v.slice();
             } else {
                 objOut[k] = v.slice(0, arrayLen);

Diff for: test/image/baselines/pie_legend_line_color_array.png

@@ -22,13 +22,17 @@
                     "orange"
                 ],
                 "line": {
-                    "width": 5,
+                    "width": [3, 4, 5, 6],
                     "color": [
                         "red",
                         "green",
                         "blue",
                         "yellow"
                     ]
+                },
+                "pattern": {
+                    "shape": [".", "x", "+", "-"],
+                    "size": [3, 4, 5, 6]
                 }
             }
         }