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

add patterns to `icicle` and `treemap` traces

Author: archmoj

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!

draftlogs/6622_add.md

@@ -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/funnelarea/defaults.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/attributes.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/defaults.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/draw_descendants.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/icicle/style.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/defaults.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/fill_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);
 };