revisit marker opacities: no opacity with colorscale, now having

- constant value to set pathbar.opacity
- marker.opacitybase and marker.opacitystep
- no magical auto depthfade

Author: archmoj

src/traces/treemap/attributes.js

@@ -139,15 +139,29 @@ module.exports = {
 
         colors: sunburstAttrs.marker.colors,
 
-        opacity: {
+        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',
             editType: 'style',
             role: 'style',
             min: 0,
             max: 1,
+            dflt: 0.5,
             description: [
-                'Sets the opacity of the branches i.e. based on the hierarchy height.',
-                'With colorscale it is defaulted to 1; otherwise it is defaulted to 0.7'
+                'Sets the increment for opacity of the headers based on the depth from the entry.',
+                'This options is not available when having a `colorscale`.'
             ].join(' ')
         },
 
@@ -217,6 +231,18 @@ 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`.'
         }),

src/traces/treemap/defaults.js

@@ -84,8 +84,11 @@ 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');
     }
-    coerce('marker.opacity', withColorscale ? 1 : 0.7);
 
     traceOut._hovered = {
         marker: {

src/traces/treemap/draw_ancestors.js

@@ -41,9 +41,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
     var trace = cd0.trace;
     var hierarchy = cd0.hierarchy;
 
-    var entryDepth = entry.data.depth;
-
-    var eachWidth = opts.width / entryDepth;
+    var eachWidth = width / trace._entryDepth;
 
     var pathIds = helpers.listPath(entry.data, 'id');
 

src/traces/treemap/plot.js

@@ -141,10 +141,14 @@ function plotOne(gd, cd, element, transitionOpts) {
         return {};
     };
 
-    var pad = trace.marker.pad;
+    trace._entryDepth = entry.data.depth;
+    if(helpers.isHierarchyRoot(entry)) {
+        trace._entryDepth++;
+    }
+
     // N.B. handle multiple-root special case
     if(cd0.hasMultipleRoots && helpers.isHierarchyRoot(entry)) {
-        maxDepth++; // increase maxDepth by one
+        maxDepth++;
     }
     trace._maxDepth = maxDepth;
 
@@ -288,6 +292,7 @@ function plotOne(gd, cd, element, transitionOpts) {
             x1 -= hasRight ? TEXTPAD : 0;
         }
 
+        var pad = trace.marker.pad;
         if(opts.isHeader) {
             x0 += pad.l - TEXTPAD;
             x1 -= pad.r - TEXTPAD;

src/traces/treemap/style.js

@@ -11,6 +11,7 @@
 var d3 = require('d3');
 var Color = require('../../components/color');
 var Lib = require('../../lib');
+var helpers = require('../sunburst/helpers');
 
 function style(gd) {
     gd._fullLayout._treemaplayer.selectAll('.trace').each(function(cd) {
@@ -29,39 +30,33 @@ function style(gd) {
 }
 
 function styleOne(s, pt, trace, opts) {
+    var hovered = (opts || {}).hovered;
     var cdi = pt.data.data;
     var ptNumber = cdi.i;
     var lineColor;
     var lineWidth;
     var opacity;
 
-    var depthFn = function(n) {
-        return Math.pow(trace.marker.opacity, n);
-    };
-
-    var add = function(a, b) {
-        return (1 - a) * (1 - b);
-    };
+    var depthFade = function(n) {
+        var base = trace.marker.opacitybase;
+        var step = trace.marker.opacitystep;
 
-    var sumUpTo = function(n) {
-        var sum = 0;
-        for(var i = 0; i < n; i++) {
-            sum += add(sum, depthFn(i));
-        }
-        return 1 - sum;
+        return n === 0 ? base :
+            Math.min(1, n * step);
     };
 
-    if((opts || {}).hovered) {
+    if(hovered) {
         lineColor = trace._hovered.marker.line.color;
         lineWidth = trace._hovered.marker.line.width;
         opacity = trace._hovered.marker.opacity;
     } else {
         lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
         lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
 
-        opacity = pt.onPathbar ?
-            sumUpTo(pt.depth) :
-            depthFn(pt.height);
+        opacity =
+            trace._hasColorscale || helpers.isLeaf(pt) ? 1 :
+            pt.onPathbar ? trace.pathbar.opacity :
+                depthFade(pt.data.depth - trace._entryDepth);
     }
 
     s.style('stroke-width', lineWidth)

test/image/baselines/treemap_coffee-maxdepth3.png

@@ -13,7 +13,6 @@
 				"side": "bottom"
 			},
 			"marker": {
-				"opacity": 0.9,
 				"line": {
 					"color": "#777"
 				},

test/image/baselines/treemap_coffee.png

@@ -14,7 +14,8 @@
                 "pad": 0
             },
             "marker": {
-                "opacity": 0.8,
+                "opacitybase": 0.3,
+                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -104,7 +105,8 @@
                 "pad": 0
             },
             "marker": {
-                "opacity": 0.8,
+                "opacitybase": 0.3,
+                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -194,7 +196,8 @@
                 "pad": 0
             },
             "marker": {
-                "opacity": 0.8,
+                "opacitybase": 0.3,
+                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,
@@ -284,7 +287,8 @@
                 "pad": 0
             },
             "marker": {
-                "opacity": 0.8,
+                "opacitybase": 0.3,
+                "opacitystep": 0.1,
                 "pad": {
                     "t": 16,
                     "l": 8,

test/image/baselines/treemap_first.png

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

test/image/baselines/treemap_flare.png

@@ -138,7 +138,6 @@
                 "four"
             ],
             "marker": {
-                "opacity": 0.5,
                 "cmin": 0,
                 "cmax": 25,
                 "colorscale": "Blackbody",
@@ -173,7 +172,7 @@
             },
             {
                 "showarrow": false,
-                "text": "branchvalues: <b>total</b><br>used as input to marker.color<br>with 0.5 opacity",
+                "text": "branchvalues: <b>total</b><br>used as input to marker.color",
                 "x": 0.75,
                 "xanchor": "center",
                 "y": 1.1,

test/image/baselines/treemap_level-depth.png

@@ -114,14 +114,18 @@ describe('Test treemap defaults:', function() {
         expect(fullData[1].marker.line.color).toBe('#fff', 'dflt');
     });
 
-    it('should default *marker.opacity* depending on having or not having *colorscale*', function() {
+    it('should not coerce *marker.opacitybase*, *marker.opacitybase* and *pathbar.opacity* when having *colorscale*', function() {
         _supply([
             {labels: [1], parents: ['']},
             {labels: [1], parents: [''], marker: {colorscale: 'Blues'}}
         ]);
 
-        expect(fullData[0].marker.opacity).toBe(0.7, 'without colorscale');
-        expect(fullData[1].marker.opacity).toBe(1, 'with colorscale');
+        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');
     });
 
     it('should use *textfont.size* to adjust top, bottom , left and right *marker.pad* defaults', function() {