Merge pull request #6626 from plotly/icicle-treemap-pattern

add patterns to `icicle` and `treemap` traces

draftlogs/6601_add.md

@@ -1,2 +1,2 @@
-- 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)],
+- 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)],
   with thanks to @thierryVergult for the contribution!

src/traces/funnelarea/defaults.js

@@ -33,7 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
     traceOut._length = len;
 
-    handleMarkerDefaults(traceIn, traceOut, layout, coerce, 'funnelarea');
+    handleMarkerDefaults(traceIn, traceOut, layout, coerce);
 
     coerce('scalegroup');
 

src/traces/icicle/attributes.js

@@ -10,6 +10,7 @@ var sunburstAttrs = require('../sunburst/attributes');
 var treemapAttrs = require('../treemap/attributes');
 var constants = require('../treemap/constants');
 var extendFlat = require('../../lib/extend').extendFlat;
+var pattern = require('../../components/drawing/attributes').pattern;
 
 module.exports = {
     labels: sunburstAttrs.labels,
@@ -61,6 +62,8 @@ module.exports = {
 
         line: sunburstAttrs.marker.line,
 
+        pattern: pattern,
+
         editType: 'calc'
     },
         colorScaleAttrs('marker', {

src/traces/icicle/defaults.js

@@ -6,6 +6,7 @@ var Color = require('../../components/color');
 var handleDomainDefaults = require('../../plots/domain').defaults;
 var handleText = require('../bar/defaults').handleText;
 var TEXTPAD = require('../bar/constants').TEXTPAD;
+var handleMarkerDefaults = require('../pie/defaults').handleMarkerDefaults;
 
 var Colorscale = require('../../components/colorscale');
 var hasColorscale = Colorscale.hasColorscale;
@@ -59,10 +60,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     });
     coerce('textposition');
 
-    var lineWidth = coerce('marker.line.width');
-    if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
+    handleMarkerDefaults(traceIn, traceOut, layout, coerce);
 
-    coerce('marker.colors');
     var withColorscale = traceOut._hasColorscale = (
         hasColorscale(traceIn, 'marker', 'colors') ||
         (traceIn.marker || {}).coloraxis // N.B. special logic to consider "values" colorscales

src/traces/icicle/draw_descendants.js

@@ -163,7 +163,7 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
             })
             .call(helpers.setSliceCursor, gd, { isTransitioning: gd._transitioning });
 
-        slicePath.call(styleOne, pt, trace, {
+        slicePath.call(styleOne, pt, trace, gd, {
             hovered: false
         });
 

src/traces/icicle/style.js

@@ -4,6 +4,7 @@ var d3 = require('@plotly/d3');
 var Color = require('../../components/color');
 var Lib = require('../../lib');
 var resizeText = require('../bar/uniform_text').resizeText;
+var fillOne = require('../sunburst/fill_one');
 
 function style(gd) {
     var s = gd._fullLayout._iciclelayer.selectAll('.trace');
@@ -17,20 +18,20 @@ function style(gd) {
         gTrace.style('opacity', trace.opacity);
 
         gTrace.selectAll('path.surface').each(function(pt) {
-            d3.select(this).call(styleOne, pt, trace);
+            d3.select(this).call(styleOne, pt, trace, gd);
         });
     });
 }
 
-function styleOne(s, pt, trace) {
+function styleOne(s, pt, trace, gd) {
     var cdi = pt.data.data;
     var isLeaf = !pt.children;
     var ptNumber = cdi.i;
     var lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
     var lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
 
-    s.style('stroke-width', lineWidth)
-        .call(Color.fill, cdi.color)
+    s.call(fillOne, pt, trace, gd)
+        .style('stroke-width', lineWidth)
         .call(Color.stroke, lineColor)
         .style('opacity', isLeaf ? trace.leaf.opacity : null);
 }

src/traces/pie/defaults.js

@@ -36,9 +36,14 @@ function handleLabelsAndValues(labels, values) {
     };
 }
 
-function handleMarkerDefaults(traceIn, traceOut, layout, coerce, isFunnelarea) {
+function handleMarkerDefaults(traceIn, traceOut, layout, coerce, isPie) {
     var lineWidth = coerce('marker.line.width');
-    if(lineWidth) coerce('marker.line.color', isFunnelarea ? layout.paper_bgcolor : undefined);
+    if(lineWidth) {
+        coerce('marker.line.color',
+            isPie ? undefined :
+            layout.paper_bgcolor // case of funnelarea, sunburst, icicle, treemap
+        );
+    }
 
     var markerColors = coerce('marker.colors');
     coercePattern(coerce, 'marker.pattern', markerColors);
@@ -73,7 +78,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     }
     traceOut._length = len;
 
-    handleMarkerDefaults(traceIn, traceOut, layout, coerce);
+    handleMarkerDefaults(traceIn, traceOut, layout, coerce, true);
 
     coerce('scalegroup');
     // TODO: hole needs to be coerced to the same value within a scaleegroup

src/traces/pie/fill_one.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var Drawing = require('../../components/drawing');
+
+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;
+    } else {
+        marker.color = pt.color;
+    }
+
+    Drawing.pointStyle(s, trace, gd, pt);
+};

src/traces/pie/style_one.js

@@ -2,7 +2,7 @@
 
 var Color = require('../../components/color');
 var castOption = require('./helpers').castOption;
-var Drawing = require('../../components/drawing');
+var fillOne = require('./fill_one');
 
 module.exports = function styleOne(s, pt, trace, gd) {
     var line = trace.marker.line;
@@ -18,8 +18,7 @@ module.exports = function styleOne(s, pt, trace, gd) {
         marker.color = pt.color;
     }
 
-    Drawing.pointStyle(s, trace, gd, pt);
-
-    s.style('stroke-width', lineWidth)
+    s.call(fillOne, pt, trace, gd)
+        .style('stroke-width', lineWidth)
         .call(Color.stroke, lineColor);
 };

src/traces/sunburst/defaults.js

@@ -33,7 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('level');
     coerce('maxdepth');
 
-    handleMarkerDefaults(traceIn, traceOut, layout, coerce, 'sunburst');
+    handleMarkerDefaults(traceIn, traceOut, layout, coerce);
 
     var withColorscale = traceOut._hasColorscale = (
         hasColorscale(traceIn, 'marker', 'colors') ||

src/traces/sunburst/fill_one.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var Drawing = require('../../components/drawing');
+var Color = require('../../components/color');
+
+module.exports = function fillOne(s, pt, trace, gd, fadedColor) {
+    var cdi = pt.data.data;
+    var ptNumber = cdi.i;
+
+    var color = fadedColor || cdi.color;
+
+    if(gd && ptNumber >= 0) {
+        pt.i = cdi.i;
+
+        var marker = trace.marker;
+        if(marker.pattern) {
+            if(!marker.colors || !marker.pattern.shape) marker.color = color;
+        } else {
+            marker.color = color;
+        }
+
+        Drawing.pointStyle(s, trace, gd, pt);
+    } else {
+        Color.fill(s, color);
+    }
+};

src/traces/sunburst/fx.js

@@ -174,7 +174,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
 
         if(isTreemapOrIcicle) {
             var slice = sliceTop.select('path.surface');
-            opts.styleOne(slice, pt, traceNow, {
+            opts.styleOne(slice, pt, traceNow, gd, {
                 hovered: true
             });
         }
@@ -207,7 +207,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
 
         if(isTreemapOrIcicle) {
             var slice = sliceTop.select('path.surface');
-            opts.styleOne(slice, pt, traceNow, {
+            opts.styleOne(slice, pt, traceNow, gd, {
                 hovered: false
             });
         }

src/traces/sunburst/style.js

@@ -4,7 +4,7 @@ var d3 = require('@plotly/d3');
 var Color = require('../../components/color');
 var Lib = require('../../lib');
 var resizeText = require('../bar/uniform_text').resizeText;
-var Drawing = require('../../components/drawing');
+var fillOne = require('./fill_one');
 
 function style(gd) {
     var s = gd._fullLayout._sunburstlayer.selectAll('.trace');
@@ -30,22 +30,8 @@ function styleOne(s, pt, trace, gd) {
     var lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
     var lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
 
-    if(gd && ptNumber >= 0) {
-        pt.i = cdi.i;
-
-        var marker = trace.marker;
-        if(marker.pattern) {
-            if(!marker.colors || !marker.pattern.shape) marker.color = cdi.color;
-        } else {
-            marker.color = cdi.color;
-        }
-
-        Drawing.pointStyle(s, trace, gd, pt);
-    } else {
-        Color.fill(s, cdi.color);
-    }
-
-    s.style('stroke-width', lineWidth)
+    s.call(fillOne, pt, trace, gd)
+        .style('stroke-width', lineWidth)
         .call(Color.stroke, lineColor)
         .style('opacity', isLeaf ? trace.leaf.opacity : null);
 }

src/traces/treemap/attributes.js

@@ -9,6 +9,7 @@ var pieAttrs = require('../pie/attributes');
 var sunburstAttrs = require('../sunburst/attributes');
 var constants = require('./constants');
 var extendFlat = require('../../lib/extend').extendFlat;
+var pattern = require('../../components/drawing/attributes').pattern;
 
 module.exports = {
     labels: sunburstAttrs.labels,
@@ -123,6 +124,8 @@ module.exports = {
 
         colors: sunburstAttrs.marker.colors,
 
+        pattern: pattern,
+
         depthfade: {
             valType: 'enumerated',
             values: [true, false, 'reversed'],

src/traces/treemap/defaults.js

@@ -6,6 +6,7 @@ var Color = require('../../components/color');
 var handleDomainDefaults = require('../../plots/domain').defaults;
 var handleText = require('../bar/defaults').handleText;
 var TEXTPAD = require('../bar/constants').TEXTPAD;
+var handleMarkerDefaults = require('../pie/defaults').handleMarkerDefaults;
 
 var Colorscale = require('../../components/colorscale');
 var hasColorscale = Colorscale.hasColorscale;
@@ -64,18 +65,15 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('textposition');
     var bottomText = traceOut.textposition.indexOf('bottom') !== -1;
 
-    var lineWidth = coerce('marker.line.width');
-    if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
-
-    var colors = coerce('marker.colors');
+    handleMarkerDefaults(traceIn, traceOut, layout, coerce);
     var withColorscale = traceOut._hasColorscale = (
         hasColorscale(traceIn, 'marker', 'colors') ||
         (traceIn.marker || {}).coloraxis // N.B. special logic to consider "values" colorscales
     );
     if(withColorscale) {
         colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
     } else {
-        coerce('marker.depthfade', !(colors || []).length);
+        coerce('marker.depthfade', !(traceOut.marker.colors || []).length);
     }
 
     var headerSize = traceOut.textfont.size * 2;

src/traces/treemap/draw_ancestors.js

@@ -128,7 +128,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
                 isTransitioning: gd._transitioning
             });
 
-        slicePath.call(styleOne, pt, trace, {
+        slicePath.call(styleOne, pt, trace, gd, {
             hovered: false
         });
 

src/traces/treemap/draw_descendants.js

@@ -161,7 +161,7 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
             })
             .call(helpers.setSliceCursor, gd, { isTransitioning: gd._transitioning });
 
-        slicePath.call(styleOne, pt, trace, {
+        slicePath.call(styleOne, pt, trace, gd, {
             hovered: false
         });
 

src/traces/treemap/style.js

@@ -5,6 +5,7 @@ var Color = require('../../components/color');
 var Lib = require('../../lib');
 var helpers = require('../sunburst/helpers');
 var resizeText = require('../bar/uniform_text').resizeText;
+var fillOne = require('../sunburst/fill_one');
 
 function style(gd) {
     var s = gd._fullLayout._treemaplayer.selectAll('.trace');
@@ -18,14 +19,14 @@ function style(gd) {
         gTrace.style('opacity', trace.opacity);
 
         gTrace.selectAll('path.surface').each(function(pt) {
-            d3.select(this).call(styleOne, pt, trace, {
+            d3.select(this).call(styleOne, pt, trace, gd, {
                 hovered: false
             });
         });
     });
 }
 
-function styleOne(s, pt, trace, opts) {
+function styleOne(s, pt, trace, gd, opts) {
     var hovered = (opts || {}).hovered;
     var cdi = pt.data.data;
     var ptNumber = cdi.i;
@@ -80,8 +81,8 @@ function styleOne(s, pt, trace, opts) {
         }
     }
 
-    s.style('stroke-width', lineWidth)
-        .call(Color.fill, fillColor)
+    s.call(fillOne, pt, trace, gd, fillColor)
+        .style('stroke-width', lineWidth)
         .call(Color.stroke, lineColor)
         .style('opacity', opacity);
 }