make the opacity logic slightly more user-friendly by applying leaf.opacity instead of branch.opacity which also help having an API similar to sunburst

Author: archmoj

src/traces/treemap/attributes.js

@@ -145,10 +145,9 @@ module.exports = {
             role: 'style',
             min: 0,
             max: 1,
-            dflt: 1,
             description: [
-                'Sets the opacity for the sectors. With colorscale',
-                'it is defaulted to 1; otherwise it is defaulted to 0.5'
+                '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'
             ].join(' ')
         },
 
@@ -162,16 +161,16 @@ module.exports = {
         })
     ),
 
-    branch: {
+    leaf: {
         opacity: {
             valType: 'number',
             editType: 'style',
             role: 'style',
             min: 0,
             max: 1,
+            dflt: 1,
             description: [
-                'Sets the opacity of the leaves i.e. based on the hierarchy height.',
-                'With colorscale it is defaulted to 1; otherwise it is defaulted to 0.7'
+                'Sets the opacity of the leaves.'
             ].join(' ')
         },
         editType: 'plot'

src/traces/treemap/defaults.js

@@ -85,8 +85,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     if(withColorscale) {
         colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
     }
-    coerce('marker.opacity');
-    coerce('branch.opacity', withColorscale ? 1 : 0.7);
+    coerce('marker.opacity', withColorscale ? 1 : 0.7);
+    coerce('leaf.opacity');
 
     traceOut._hovered = {
         marker: {

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) {
@@ -42,7 +43,7 @@ function styleOne(s, pt, trace, opts) {
     } else {
         lineColor = Lib.castOption(trace, ptNumber, 'marker.line.color') || Color.defaultLine;
         lineWidth = Lib.castOption(trace, ptNumber, 'marker.line.width') || 0;
-        opacity = trace.marker.opacity * Math.pow(trace.branch.opacity, pt.height);
+        opacity = helpers.isLeaf(pt) ? trace.leaf.opacity : Math.pow(trace.marker.opacity, pt.height);
     }
 
     s.style('stroke-width', lineWidth)

test/image/baselines/treemap_packages_colorscale_allone.png

@@ -1,22 +1,39 @@
 {
 	"data": [
 		{
-      "type": "treemap",
-      "count": "leaves+branches",
+			"type": "treemap",
+			"count": "leaves+branches",
 			"maxdepth": 3,
-      "textinfo": "label+percent parent",
-      "tiling": {
+			"textinfo": "label+percent parent",
+			"tiling": {
 				"packing": "slice-dice"
 			},
 			"pathbar": {
 				"side": "bottom"
-	    },
+			},
 			"marker": {
-				"opacity": 0.8,
+				"opacity": 0.9,
 				"line": {
 					"color": "#777"
 				},
-				"colorscale": [[0, "#FFF"], [0.01, "#FF0"], [0.1, "#F00"], [1, "#000"]],
+				"colorscale": [
+					[
+						0,
+						"#FFF"
+					],
+					[
+						0.01,
+						"#FF0"
+					],
+					[
+						0.1,
+						"#F00"
+					],
+					[
+						1,
+						"#000"
+					]
+				],
 				"showscale": true
 			},
 			"level": "1. gl-mesh3d",

test/image/baselines/treemap_packings.png

@@ -72,7 +72,7 @@
                 "Uniform",
                 "Uniform"
             ],
-            "branch": {
+            "leaf": {
                 "opacity": 0.85
             },
             "marker": {
@@ -162,7 +162,7 @@
                 "Uniform",
                 "Uniform"
             ],
-            "branch": {
+            "leaf": {
                 "opacity": 0.85
             },
             "marker": {
@@ -252,7 +252,7 @@
                 "Uniform",
                 "Uniform"
             ],
-            "branch": {
+            "leaf": {
                 "opacity": 0.85
             },
             "marker": {
@@ -342,7 +342,7 @@
                 "Uniform",
                 "Uniform"
             ],
-            "branch": {
+            "leaf": {
                 "opacity": 0.85
             },
             "marker": {
@@ -432,7 +432,7 @@
                 "Uniform",
                 "Uniform"
             ],
-            "branch": {
+            "leaf": {
                 "opacity": 0.85
             },
             "marker": {
@@ -522,7 +522,7 @@
                 "Uniform",
                 "Uniform"
             ],
-            "branch": {
+            "leaf": {
                 "opacity": 0.85
             },
             "marker": {