drop pathbar.opacity and modify depthfade description

Author: archmoj

src/traces/treemap/attributes.js

@@ -145,14 +145,14 @@ module.exports = {
             editType: 'style',
             role: 'style',
             description: [
-                'Fades headers towards the background. Background color with opacity of 0.75',
-                'is used as the destination fading color.',
-                'When `marker.colors` are not set within the trace it is defaulted to *false*;',
-                'otherwise it is defaulted to *true*.',
-                'The *reversed* option could be used to invert the direction of fade',
-                'in which the top elements within hierarchy drawn with fully saturated colors',
-                'while the leaves would be faded towards the background color',
-                'This option is not available when a `colorscale` is present.'
+                '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(' ')
         },
 
@@ -222,18 +222,6 @@ module.exports = {
             ].join(' ')
         },
 
-        opacity: {
-            valType: 'number',
-            editType: 'style',
-            role: 'style',
-            min: 0,
-            dflt: 1,
-            description: [
-                'Sets the opacity of the pathbar.',
-                'This option is not available when a `colorscale` is present.'
-            ].join(' ')
-        },
-
         textfont: extendFlat({}, pieAttrs.textfont, {
             description: 'Sets the font used inside `pathbar`.'
         }),

src/traces/treemap/defaults.js

@@ -89,13 +89,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     if(withColorscale) {
         colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
-    } else {
-        coerce('pathbar.opacity');
     }
 
     traceOut._hovered = {
         marker: {
-            opacity: 1,
             line: {
                 width: 2,
                 color: Color.contrast(layout.paper_bgcolor)

src/traces/treemap/style.js

@@ -43,39 +43,32 @@ function styleOne(s, pt, trace, opts) {
     } else {
         var isRoot = helpers.isHierarchyRoot(pt);
 
-        if(!trace._hasColorscale) {
-            if(pt.onPathbar) {
-                // Combining colors with the background color.
-                // Better not to have transparent segments.
-                // Also this helps pathbar texts appear nicely below previous segments.
-                fillColor = Color.combine(Color.addOpacity(trace._backgroundColor, 1 - trace.pathbar.opacity), fillColor);
-            } else {
-                var depthfade = trace.marker.depthfade;
-                if(depthfade) {
-                    var fadedColor = Color.combine(Color.addOpacity(trace._backgroundColor, 0.75), fillColor);
-                    var n;
+        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);
-                            }
+                if(depthfade === true) {
+                    var maxDepth = helpers.getMaxDepth(trace);
+                    if(isFinite(maxDepth)) {
+                        if(helpers.isLeaf(pt)) {
+                            n = 0;
                         } else {
-                            n = pt.data.height + 1;
+                            n = (trace._maxVisibleLayers) - (pt.data.depth - trace._entryDepth);
                         }
-                    } else { // i.e. case of depthfade === 'reversed'
-                        n = pt.data.depth - trace._entryDepth;
-                        if(!trace._atRootLevel) n++;
+                    } 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);
-                        }
+                if(n > 0) {
+                    for(var i = 0; i < n; i++) {
+                        var ratio = 0.5 * i / n;
+                        fillColor = Color.combine(Color.addOpacity(fadedColor, ratio), fillColor);
                     }
                 }
             }
@@ -92,8 +85,7 @@ function styleOne(s, pt, trace, opts) {
 
     s.style('stroke-width', lineWidth)
         .call(Color.fill, fillColor)
-        .call(Color.stroke, lineColor)
-        .style('opacity', null);
+        .call(Color.stroke, lineColor);
 }
 
 module.exports = {

test/image/baselines/treemap_level-depth.png

@@ -6,7 +6,6 @@
             "name": "bottom left textposition",
             "textposition": "bottom left",
             "pathbar": {
-                "opacity": 0.5,
                 "side": "bottom",
                 "textfont": {
                     "size": 12,
@@ -115,7 +114,6 @@
             "name": "bottom center textposition",
             "textposition": "bottom center",
             "pathbar": {
-                "opacity": 0.5,
                 "textfont": {
                     "size": 12,
                     "family": "Times New Roman"
@@ -225,7 +223,6 @@
             "name": "bottom right textposition",
             "textposition": "bottom right",
             "pathbar": {
-                "opacity": 0.5,
                 "side": "bottom",
                 "textfont": {
                     "size": 12,
@@ -656,7 +653,6 @@
             "name": "top left textposition",
             "textposition": "top left",
             "pathbar": {
-                "opacity": 0.5,
                 "textfont": {
                     "size": 12,
                     "family": "Times New Roman"
@@ -767,7 +763,6 @@
             "name": "top center textposition",
             "textposition": "top center",
             "pathbar": {
-                "opacity": 0.5,
                 "side": "bottom",
                 "textfont": {
                     "size": 12,
@@ -878,7 +873,6 @@
             "name": "top right textposition",
             "textposition": "top right",
             "pathbar": {
-                "opacity": 0.5,
                 "textfont": {
                     "size": 12,
                     "family": "Times New Roman"

test/image/baselines/treemap_textposition.png

@@ -1196,66 +1196,6 @@ describe('Test treemap restyle:', function() {
         .then(done);
     });
 
-    it('should be able to restyle *pathbar.opacity*', function(done) {
-        var mock = {
-            data: [{
-                type: 'treemap',
-                labels: ['Root', 'A', 'B', 'b', ],
-                parents: ['', 'Root', 'Root', 'B'],
-                level: 'b'
-            }]
-        };
-
-        function _assert(msg, exp) {
-            return function() {
-                var layer = d3.select(gd).select('.treemaplayer');
-
-                var opacities = [];
-                var fillColors = [];
-                layer.selectAll('path.surface').each(function() {
-                    opacities.push(this.style.opacity);
-                    fillColors.push(this.style.fill);
-                });
-
-                expect(opacities).toEqual(exp[0], msg);
-                expect(fillColors).toEqual(exp[1], msg);
-
-                // editType:style
-                if(msg !== 'base') {
-                    expect(Plots.doCalcdata).toHaveBeenCalledTimes(0);
-                    expect(gd._fullData[0]._module.plot).toHaveBeenCalledTimes(0);
-                }
-            };
-        }
-
-        Plotly.plot(gd, mock)
-        .then(_assert('base', [
-            ['', '', ''], // opacity
-            ['rgb(255, 127, 14)', 'rgb(255, 127, 14)', 'rgb(255, 255, 255)'] // fill
-        ]))
-        .then(function() {
-            spyOn(Plots, 'doCalcdata').and.callThrough();
-            spyOn(gd._fullData[0]._module, 'plot').and.callThrough();
-        })
-        .then(_restyle({'pathbar.opacity': 0.2}))
-        .then(_assert('lower pathbar.opacity', [
-            ['', '', ''], // opacity
-            ['rgb(255, 127, 14)', 'rgb(255, 229, 207)', 'rgb(255, 255, 255)'] // fill
-        ]))
-        .then(_restyle({'pathbar.opacity': 0.8}))
-        .then(_assert('raise pathbar.opacity', [
-            ['', '', ''], // opacity
-            ['rgb(255, 127, 14)', 'rgb(255, 153, 62)', 'rgb(255, 255, 255)'] // fill
-        ]))
-        .then(_restyle({'pathbar.opacity': null}))
-        .then(_assert('back to dflt', [
-            ['', '', ''], // opacity
-            ['rgb(255, 127, 14)', 'rgb(255, 127, 14)', 'rgb(255, 255, 255)'] // fill
-        ]))
-        .catch(failTest)
-        .then(done);
-    });
-
     it('should be able to restyle *textinfo*', function(done) {
         var mock = {
             data: [{