use marker.colors with colorscale in treemap and sunburst plots

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

test/image/mocks/treemap_textposition.json

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

test/jasmine/tests/treemap_test.js

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