impelement depthfade

 - drop opacitybase
 - drop opacitystep
 - combine colors with the background color according with their depth from the top

Author: archmoj

src/traces/treemap/attributes.js

@@ -139,30 +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 above root based on the depth from the entry.',
-                'Please note that the root itself would be drawn with opacity 1.',
-                '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,10 +72,12 @@ 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 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;
@@ -88,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,37 +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 :
-                helpers.isHierarchyRoot(pt) ? 1 :
-                    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/baselines/treemap_coffee-maxdepth3.png

@@ -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/baselines/treemap_coffee.png

@@ -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,

test/image/baselines/treemap_first.png

@@ -977,6 +977,6 @@
     "layout": {
         "width": 1200,
         "height": 1200,
-        "paper_bgcolor": "#210"
+        "paper_bgcolor": "black"
     }
 }

test/image/baselines/treemap_flare.png

@@ -116,17 +116,15 @@ describe('Test treemap defaults:', function() {
         expect(fullData[1].marker.line.color).toBe('#fff', 'dflt');
     });
 
-    it('should not coerce *marker.opacitybase*, *marker.opacitybase* and *pathbar.opacity* when having *colorscale*', function() {
+    it('should not coerce *marker.opacitybase* and *pathbar.opacity* when having *colorscale*', function() {
         _supply([
             {labels: [1], parents: ['']},
             {labels: [1], parents: [''], marker: {colorscale: 'Blues'}}
         ]);
 
         expect(fullData[0].marker.opacitybase).toBe(0.5);
-        expect(fullData[0].marker.opacitystep).toBe(0.5);
         expect(fullData[0].pathbar.opacity).toBe(0.5);
         expect(fullData[1].marker.opacitybase).toBe(undefined, 'not coerced');
-        expect(fullData[1].marker.opacitystep).toBe(undefined, 'not coerced');
         expect(fullData[1].pathbar.opacity).toBe(undefined, 'not coerced');
     });
 
@@ -1192,7 +1190,7 @@ describe('Test treemap restyle:', function() {
         .then(done);
     });
 
-    it('should be able to restyle *marker.opacitybase* and *marker.opacitystep*', function(done) {
+    it('should be able to restyle *marker.opacitybase*', function(done) {
         var mock = {
             data: [{
                 type: 'treemap', pathbar: { visible: false },
@@ -1228,14 +1226,10 @@ describe('Test treemap restyle:', function() {
         })
         .then(_restyle({'marker.opacitybase': 0.2}))
         .then(_assert('lower marker.opacitybase', ['1', '1', '0.2', '0.5', '1', '1']))
-        .then(_restyle({'marker.opacitystep': 0.1}))
-        .then(_assert('lower marker.opacitystep', ['1', '1', '0.2', '0.1', '0.2', '1']))
         .then(_restyle({'marker.opacitybase': 0.8}))
         .then(_assert('raise marker.opacitybase', ['1', '1', '0.8', '0.1', '0.2', '1']))
         .then(_restyle({'marker.opacitybase': null}))
         .then(_assert('back to dflt', ['1', '1', '0.5', '0.1', '0.2', '1']))
-        .then(_restyle({'marker.opacitystep': null}))
-        .then(_assert('back to dflt', ['1', '1', '0.5', '0.5', '1', '1']))
         .catch(failTest)
         .then(done);
     });