use marker.colors with colorscale in treemap and sunburst plots

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)) {

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 = {};
@@ -189,9 +186,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;
         }
 

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'});
     }

src/traces/treemap/attributes.js

@@ -139,29 +139,16 @@ module.exports = {
 
         colors: sunburstAttrs.marker.colors,
 
-        opacitybase: {
-            valType: 'number',
-            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',
+        depthfade: {
+            valType: 'boolean',
             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`.'
+                'Fades headers towards the background.',
+                'When `marker.colors` are not set within the trace it is defaulted to *false*;',
+                'otherwise it is defaulted to *true*.',
+                'This options is not available when having a `colorscale` or',
+                'when .'
             ].join(' ')
         },
 

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;
 
@@ -85,8 +90,6 @@ 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');
     }
 

src/traces/treemap/draw_descendants.js

@@ -65,16 +65,25 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
 
     var sliceData = allData.descendants();
 
+    var minVisibleDepth = Infinity;
+    var maxVisibleDepth = -Infinity;
+
     slices = slices.data(sliceData, function(pt) {
-        // hide slices that won't show up on graph
-        if(pt.depth >= trace._maxDepth) {
+        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);
     });
 
+    trace._maxVisibleLayers = isFinite(maxVisibleDepth) ? maxVisibleDepth - minVisibleDepth + 1 : 0;
+
     slices.enter().append('g')
         .classed('slice', true);
 
@@ -185,14 +194,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]);

src/traces/treemap/plot.js

@@ -84,11 +84,16 @@ 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;
     };
 
+    // copy
+    trace._backgroundColor = fullLayout.paper_bgcolor;
+
     var gs = fullLayout._size;
     var domain = trace.domain;
 
@@ -146,12 +151,7 @@ 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) {

src/traces/treemap/style.js

@@ -36,36 +36,55 @@ function styleOne(s, pt, trace, opts) {
     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;
 
     if(hovered) {
         lineColor = trace._hovered.marker.line.color;
         lineWidth = trace._hovered.marker.line.width;
         opacity = trace._hovered.marker.opacity;
     } else {
-        if(helpers.isHierarchyRoot(pt)) {
+        var isRoot = helpers.isHierarchyRoot(pt);
+
+        if(!pt.onPathbar && !trace._hasColorscale && trace.marker.depthfade) {
+            var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 1), fillColor);
+
+            // option 1 | using the height from the top
+            var maxDepth = helpers.getMaxDepth(trace);
+            var n;
+            if(isFinite(maxDepth)) {
+                if(helpers.isLeaf(pt)) {
+                    n = 0;
+                } else {
+                    n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
+                }
+            } else {
+                n = pt.data.height + 1;
+            }
+
+            // option 2 | using depth form the bottom
+            // var n = pt.data.depth - trace._entryDepth + 1;
+
+            if(n > 0) {
+                for(var i = 0; i < n; i++) {
+                    var ratio = 0.5 * i / n;
+                    fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
+                }
+            }
+        }
+
+        if(isRoot) {
             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);
+        opacity = pt.onPathbar ? trace.pathbar.opacity : null;
     }
 
     s.style('stroke-width', lineWidth)
-        .call(Color.fill, cdi.color)
+        .call(Color.fill, fillColor)
         .call(Color.stroke, lineColor)
         .style('opacity', opacity);
 }

test/image/mocks/treemap_pad_mirror.json

@@ -14,8 +14,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -105,8 +103,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -196,8 +192,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -287,8 +281,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.3,
-                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,

test/image/mocks/treemap_pad_transpose.json

@@ -14,8 +14,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.5,
-                "opacitystep": 0.05,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -105,8 +103,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.5,
-                "opacitystep": 0.05,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -196,8 +192,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.5,
-                "opacitystep": 0.05,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -287,8 +281,6 @@
                 "pad": 0
             },
             "marker": {
-                "opacitybase": 0.5,
-                "opacitystep": 0.05,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -385,6 +377,7 @@
                 "showarrow": false,
                 "text": "base",
                 "font": {
+                    "color": "white",
                     "size": 16
                 },
                 "x": 0.25,
@@ -396,6 +389,7 @@
                 "showarrow": false,
                 "text": "flip y axis",
                 "font": {
+                    "color": "white",
                     "size": 16
                 },
                 "x": 0.25,
@@ -407,6 +401,7 @@
                 "showarrow": false,
                 "text": "flip x axis",
                 "font": {
+                    "color": "white",
                     "size": 16
                 },
                 "x": 0.75,
@@ -418,6 +413,7 @@
                 "showarrow": false,
                 "text": "flip both axes",
                 "font": {
+                    "color": "white",
                     "size": 16
                 },
                 "x": 0.75,