Merge pull request #4242 from plotly/treemap-sunburst-colors-in-color…

…scale use marker.colors with colorscale in treemap and sunburst plots
plotly · Oct 7, 2019 · 60a42c1 · 60a42c1
2 parents 713b42a + 1dff468
commit 60a42c1
Show file tree

Hide file tree

Showing 37 changed files with 1,600 additions and 212 deletions.
diff --git a/src/components/colorscale/helpers.js b/src/components/colorscale/helpers.js
@@ -17,11 +17,11 @@ var Color = require('../color');
 
 var isValidScale = require('./scales').isValid;
 
-function hasColorscale(trace, containerStr) {
+function hasColorscale(trace, containerStr, colorKey) {
     var container = containerStr ?
         Lib.nestedProperty(trace, containerStr).get() || {} :
         trace;
-    var color = container.color;
+    var color = container[colorKey || 'color'];
 
     var isArrayWithOneNumber = false;
     if(Lib.isArrayOrTypedArray(color)) {

diff --git a/src/traces/sunburst/calc.js b/src/traces/sunburst/calc.js
@@ -15,10 +15,7 @@ var Lib = require('../../lib');
 var makeColorScaleFn = require('../../components/colorscale').makeColorScaleFuncFromTrace;
 var makePullColorFn = require('../pie/calc').makePullColorFn;
 var generateExtendedColors = require('../pie/calc').generateExtendedColors;
-
-var Colorscale = require('../../components/colorscale');
-var hasColorscale = Colorscale.hasColorscale;
-var colorscaleCalc = Colorscale.calc;
+var colorscaleCalc = require('../../components/colorscale').calc;
 
 var sunburstExtendedColorWays = {};
 var treemapExtendedColorWays = {};
@@ -198,9 +195,10 @@ exports.calc = function(gd, trace) {
     var pullColor;
     var scaleColor;
     var colors = trace.marker.colors || [];
-    trace._hasColorscale = hasColorscale(trace, 'marker');
+    var hasColors = !!colors.length;
+
     if(trace._hasColorscale) {
-        if(!colors.length) {
+        if(!hasColors) {
             colors = hasValues ? trace.values : trace._values;
         }
 

diff --git a/src/traces/sunburst/defaults.js b/src/traces/sunburst/defaults.js
@@ -44,7 +44,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
 
     coerce('marker.colors');
-    var withColorscale = hasColorscale(traceIn, 'marker');
+    var withColorscale = traceOut._hasColorscale = hasColorscale(traceIn, 'marker', 'colors');
     if(withColorscale) {
         colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
     }

diff --git a/src/traces/sunburst/plot.js b/src/traces/sunburst/plot.js
@@ -151,7 +151,7 @@ function plotOne(gd, cd, element, transitionOpts) {
     var transTextX = function(d) { return cx + d.pxmid[0] * d.transform.rCenter + (d.transform.x || 0); };
     var transTextY = function(d) { return cy + d.pxmid[1] * d.transform.rCenter + (d.transform.y || 0); };
 
-    slices = slices.data(sliceData, function(pt) { return helpers.getPtId(pt); });
+    slices = slices.data(sliceData, helpers.getPtId);
 
     slices.enter().append('g')
         .classed('slice', true);

diff --git a/src/traces/treemap/attributes.js b/src/traces/treemap/attributes.js
@@ -139,29 +139,20 @@ module.exports = {
 
         colors: sunburstAttrs.marker.colors,
 
-        opacitybase: {
-            valType: 'number',
+        depthfade: {
+            valType: 'enumerated',
+            values: [true, false, 'reversed'],
             editType: 'style',
             role: 'style',
-            min: 0,
-            max: 1,
-            dflt: 0.5,
             description: [
-                'Sets the base opacity of the headers based on the depth from the entry.',
-                'This options is not available when having a `colorscale`.'
-            ].join(' ')
-        },
-
-        opacitystep: {
-            valType: 'number',
-            editType: 'style',
-            role: 'style',
-            min: 0,
-            max: 1,
-            dflt: 0.5,
-            description: [
-                'Sets the increment for opacity of the headers based on the depth from the entry.',
-                'This options is not available when having a `colorscale`.'
+                'Determines if the sector colors are faded towards',
+                'the background from the leaves up to the headers.',
+                'This option is unavailable when a `colorscale` is present,',
+                'defaults to false when `marker.colors` is set,',
+                'but otherwise defaults to true.',
+                'When set to *reversed*, the fading direction is inverted,',
+                'that is the top elements within hierarchy are drawn with fully saturated colors',
+                'while the leaves are faded towards the background color.'
             ].join(' ')
         },
 
@@ -231,18 +222,6 @@ module.exports = {
             ].join(' ')
         },
 
-        opacity: {
-            valType: 'number',
-            editType: 'style',
-            role: 'style',
-            min: 0,
-            dflt: 0.5,
-            description: [
-                'Sets the opacity of the pathbar',
-                'This options is not available when having a `colorscale`.'
-            ].join(' ')
-        },
-
         textfont: extendFlat({}, pieAttrs.textfont, {
             description: 'Sets the font used inside `pathbar`.'
         }),

diff --git a/src/traces/treemap/defaults.js b/src/traces/treemap/defaults.js
@@ -72,8 +72,13 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var lineWidth = coerce('marker.line.width');
     if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
 
-    coerce('marker.colors');
-    var withColorscale = hasColorscale(traceIn, 'marker');
+    var colors = coerce('marker.colors');
+    var withColorscale = traceOut._hasColorscale = hasColorscale(traceIn, 'marker', 'colors');
+    if(withColorscale) {
+        colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
+    } else {
+        coerce('marker.depthfade', !(colors || []).length);
+    }
 
     var headerSize = traceOut.textfont.size * 2;
 
@@ -84,15 +89,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     if(withColorscale) {
         colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
-    } else {
-        coerce('marker.opacitybase');
-        coerce('marker.opacitystep');
-        coerce('pathbar.opacity');
     }
 
     traceOut._hovered = {
         marker: {
-            opacity: 1,
             line: {
                 width: 2,
                 color: Color.contrast(layout.paper_bgcolor)

diff --git a/src/traces/treemap/draw_ancestors.js b/src/traces/treemap/draw_ancestors.js
@@ -73,7 +73,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
 
     sliceData.reverse();
 
-    slices = slices.data(sliceData, function(pt) { return helpers.getPtId(pt); });
+    slices = slices.data(sliceData, helpers.getPtId);
 
     slices.enter().append('g')
         .classed('pathbar', true);

diff --git a/src/traces/treemap/draw_descendants.js b/src/traces/treemap/draw_descendants.js
@@ -65,16 +65,24 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
 
     var sliceData = allData.descendants();
 
-    slices = slices.data(sliceData, function(pt) {
-        // hide slices that won't show up on graph
-        if(pt.depth >= trace._maxDepth) {
+    var minVisibleDepth = Infinity;
+    var maxVisibleDepth = -Infinity;
+    sliceData.forEach(function(pt) {
+        var depth = pt.depth;
+        if(depth >= trace._maxDepth) {
+            // hide slices that won't show up on graph
             pt.x0 = pt.x1 = (pt.x0 + pt.x1) / 2;
             pt.y0 = pt.y1 = (pt.y0 + pt.y1) / 2;
+        } else {
+            minVisibleDepth = Math.min(minVisibleDepth, depth);
+            maxVisibleDepth = Math.max(maxVisibleDepth, depth);
         }
-
-        return helpers.getPtId(pt);
     });
 
+    slices = slices.data(sliceData, helpers.getPtId);
+
+    trace._maxVisibleLayers = isFinite(maxVisibleDepth) ? maxVisibleDepth - minVisibleDepth + 1 : 0;
+
     slices.enter().append('g')
         .classed('slice', true);
 
@@ -185,14 +193,6 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
             isHeader: isHeader
         });
 
-        if(helpers.isOutsideText(trace, pt)) {
-            // consider in/out diff font sizes
-            pt.transform.targetY -= (
-                helpers.getOutsideTextFontKey('size', trace, pt, fullLayout.font) -
-                helpers.getInsideTextFontKey('size', trace, pt, fullLayout.font)
-            );
-        }
-
         if(hasTransition) {
             sliceText.transition().attrTween('transform', function(pt2) {
                 var interp = makeUpdateTextInterpolator(pt2, onPathbar, getRefRect(), [width, height]);

diff --git a/src/traces/treemap/plot.js b/src/traces/treemap/plot.js
@@ -84,6 +84,8 @@ function plotOne(gd, cd, element, transitionOpts) {
     var hierarchy = cd0.hierarchy;
     var hasTransition = helpers.hasTransition(transitionOpts);
     var entry = helpers.findEntryWithLevel(hierarchy, trace.level);
+    var isRoot = helpers.isHierarchyRoot(entry);
+
     var maxDepth = helpers.getMaxDepth(trace);
     var hasVisibleDepth = function(pt) {
         return pt.data.depth - entry.data.depth < maxDepth;
@@ -146,18 +148,15 @@ function plotOne(gd, cd, element, transitionOpts) {
         return {};
     };
 
-    var isRoot = helpers.isHierarchyRoot(entry);
-
-    trace._entryDepth = entry.data.depth;
-    if(isRoot) {
-        trace._entryDepth++;
-    }
-
     // N.B. handle multiple-root special case
     if(cd0.hasMultipleRoots && isRoot) {
         maxDepth++;
     }
+
     trace._maxDepth = maxDepth;
+    trace._backgroundColor = fullLayout.paper_bgcolor;
+    trace._entryDepth = entry.data.depth;
+    trace._atRootLevel = isRoot;
 
     var cenX = -vpw / 2 + gs.l + gs.w * (domain.x[1] + domain.x[0]) / 2;
     var cenY = -vph / 2 + gs.t + gs.h * (1 - (domain.y[1] + domain.y[0]) / 2);

diff --git a/src/traces/treemap/style.js b/src/traces/treemap/style.js
@@ -35,37 +35,57 @@ function styleOne(s, pt, trace, opts) {
     var ptNumber = cdi.i;
     var lineColor;
     var lineWidth;
-    var opacity;
-
-    var depthFade = function(n) {
-        var base = trace.marker.opacitybase;
-        var step = trace.marker.opacitystep;
-
-        return n === 0 ? base :
-            Math.max(0, Math.min(1, n * step));
-    };
+    var fillColor = cdi.color;
+    var isRoot = helpers.isHierarchyRoot(pt);
+    var opacity = 1;
 
     if(hovered) {
         lineColor = trace._hovered.marker.line.color;
         lineWidth = trace._hovered.marker.line.width;
-        opacity = trace._hovered.marker.opacity;
     } else {
-        if(helpers.isHierarchyRoot(pt)) {
+        if(isRoot && fillColor === 'rgba(0,0,0,0)') {
+            opacity = 0;
             lineColor = 'rgba(0,0,0,0)';
             lineWidth = 0;
         } else {
             lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
             lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
-        }
 
-        opacity =
-            trace._hasColorscale || helpers.isLeaf(pt) ? 1 :
-            pt.onPathbar ? trace.pathbar.opacity :
-                depthFade(pt.data.depth - trace._entryDepth);
+            if(!trace._hasColorscale && !pt.onPathbar) {
+                var depthfade = trace.marker.depthfade;
+                if(depthfade) {
+                    var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 0.75), fillColor);
+                    var n;
+
+                    if(depthfade === true) {
+                        var maxDepth = helpers.getMaxDepth(trace);
+                        if(isFinite(maxDepth)) {
+                            if(helpers.isLeaf(pt)) {
+                                n = 0;
+                            } else {
+                                n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
+                            }
+                        } else {
+                            n = pt.data.height + 1;
+                        }
+                    } else { // i.e. case of depthfade === 'reversed'
+                        n = pt.data.depth - trace._entryDepth;
+                        if(!trace._atRootLevel) n++;
+                    }
+
+                    if(n > 0) {
+                        for(var i = 0; i < n; i++) {
+                            var ratio = 0.5 * i / n;
+                            fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
+                        }
+                    }
+                }
+            }
+        }
     }
 
     s.style('stroke-width', lineWidth)
-        .call(Color.fill, cdi.color)
+        .call(Color.fill, fillColor)
         .call(Color.stroke, lineColor)
         .style('opacity', opacity);
 }

diff --git a/test/image/baselines/treemap_coffee-maxdepth3.png b/test/image/baselines/treemap_coffee-maxdepth3.png
diff --git a/test/image/baselines/treemap_coffee.png b/test/image/baselines/treemap_coffee.png
diff --git a/test/image/baselines/treemap_first.png b/test/image/baselines/treemap_first.png
diff --git a/test/image/baselines/treemap_flare.png b/test/image/baselines/treemap_flare.png
diff --git a/test/image/baselines/treemap_level-depth.png b/test/image/baselines/treemap_level-depth.png
diff --git a/test/image/baselines/treemap_packages_colorscale_allone.png b/test/image/baselines/treemap_packages_colorscale_allone.png
diff --git a/test/image/baselines/treemap_packages_colorscale_novalue.png b/test/image/baselines/treemap_packages_colorscale_novalue.png
diff --git a/test/image/baselines/treemap_packings.png b/test/image/baselines/treemap_packings.png
diff --git a/test/image/baselines/treemap_pad_mirror.png b/test/image/baselines/treemap_pad_mirror.png
diff --git a/test/image/baselines/treemap_pad_transpose.png b/test/image/baselines/treemap_pad_transpose.png
diff --git a/test/image/baselines/treemap_sunburst_basic.png b/test/image/baselines/treemap_sunburst_basic.png
diff --git a/test/image/baselines/treemap_sunburst_marker_colors.png b/test/image/baselines/treemap_sunburst_marker_colors.png
diff --git a/test/image/baselines/treemap_textfit.png b/test/image/baselines/treemap_textfit.png
diff --git a/test/image/baselines/treemap_textposition.png b/test/image/baselines/treemap_textposition.png
diff --git a/test/image/baselines/treemap_transpose_nopad.png b/test/image/baselines/treemap_transpose_nopad.png
diff --git a/test/image/baselines/treemap_values.png b/test/image/baselines/treemap_values.png
diff --git a/test/image/baselines/treemap_values_colorscale.png b/test/image/baselines/treemap_values_colorscale.png
diff --git a/test/image/baselines/treemap_with-without_values.png b/test/image/baselines/treemap_with-without_values.png
diff --git a/test/image/baselines/treemap_with-without_values_template.png b/test/image/baselines/treemap_with-without_values_template.png
diff --git a/test/image/mocks/treemap_pad_mirror.json b/test/image/mocks/treemap_pad_mirror.json
@@ -14,8 +14,7 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
+                "depthfade": "reversed",
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -105,8 +104,7 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
+                "depthfade": "reversed",
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -196,8 +194,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -287,8 +283,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -412,7 +406,7 @@
         "annotations": [
             {
                 "showarrow": false,
-                "text": "base",
+                "text": "base<br>depthfade: 'reversed'",
                 "font": {
                     "size": 16
                 },
@@ -423,7 +417,7 @@
             },
             {
                 "showarrow": false,
-                "text": "flip y axis",
+                "text": "flip y axis<br>depthfade: 'reversed'",
                 "font": {
                     "size": 16
                 },