use marker.colors with colorscale in treemap and sunburst plots

src/components/colorscale/helpers.js

@@ -17,11 +17,11 @@ var Color = require('../color');
 
 var isValidScale = require('./scales').isValid;
 
-function hasColorscale(trace, containerStr) {
+function hasColorscale(trace, containerStr, colorKey) {
  var container = containerStr ?
  Lib.nestedProperty(trace, containerStr).get() || {} :
  trace;
- var color = container.color;
+ var color = container[colorKey || 'color'];
 
  var isArrayWithOneNumber = false;
  if(Lib.isArrayOrTypedArray(color)) {

src/traces/sunburst/calc.js

@@ -15,10 +15,7 @@ var Lib = require('../../lib');
 var makeColorScaleFn = require('../../components/colorscale').makeColorScaleFuncFromTrace;
 var makePullColorFn = require('../pie/calc').makePullColorFn;
 var generateExtendedColors = require('../pie/calc').generateExtendedColors;
-
-var Colorscale = require('../../components/colorscale');
-var hasColorscale = Colorscale.hasColorscale;
-var colorscaleCalc = Colorscale.calc;
+var colorscaleCalc = require('../../components/colorscale').calc;
 
 var sunburstExtendedColorWays = {};
 var treemapExtendedColorWays = {};
@@ -198,9 +195,10 @@ exports.calc = function(gd, trace) {
  var pullColor;
  var scaleColor;
  var colors = trace.marker.colors || [];
- trace._hasColorscale = hasColorscale(trace, 'marker');
+ var hasColors = !!colors.length;
+
  if(trace._hasColorscale) {
- if(!colors.length) {
+ if(!hasColors) {
  colors = hasValues ? trace.values : trace._values;
  }
 

src/traces/sunburst/defaults.js

@@ -44,7 +44,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
  if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
 
  coerce('marker.colors');
- var withColorscale = hasColorscale(traceIn, 'marker');
+ var withColorscale = traceOut._hasColorscale = hasColorscale(traceIn, 'marker', 'colors');
  if(withColorscale) {
  colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
  }

src/traces/sunburst/plot.js

@@ -151,7 +151,7 @@ function plotOne(gd, cd, element, transitionOpts) {
  var transTextX = function(d) { return cx + d.pxmid[0] * d.transform.rCenter + (d.transform.x || 0); };
  var transTextY = function(d) { return cy + d.pxmid[1] * d.transform.rCenter + (d.transform.y || 0); };
 
- slices = slices.data(sliceData, function(pt) { return helpers.getPtId(pt); });
+ slices = slices.data(sliceData, helpers.getPtId);
 
  slices.enter().append('g')
  .classed('slice', true);

src/traces/treemap/attributes.js

@@ -139,29 +139,20 @@ 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 based on the depth from the entry.',
- 'This options is not available when having a `colorscale`.'
- ].join(' ')
- },
-
- opacitystep: {
- valType: 'number',
+ depthfade: {
+ valType: 'enumerated',
+ values: [true, false, 'reversed'],
  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. 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.'
  ].join(' ')
  },
 
@@ -236,10 +227,10 @@ module.exports = {
  editType: 'style',
  role: 'style',
  min: 0,
- dflt: 0.5,
+ dflt: 1,
  description: [
- 'Sets the opacity of the pathbar',
- 'This options is not available when having a `colorscale`.'
+ 'Sets the opacity of the pathbar.',
+ 'This option is not available when a `colorscale` is present.'
  ].join(' ')
  },
 

src/traces/treemap/defaults.js

@@ -72,8 +72,13 @@ 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 withColorscale = hasColorscale(traceIn, 'marker');
+ 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;
 
@@ -85,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_ancestors.js

@@ -73,7 +73,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
 
  sliceData.reverse();
 
- slices = slices.data(sliceData, function(pt) { return helpers.getPtId(pt); });
+ slices = slices.data(sliceData, helpers.getPtId);
 
  slices.enter().append('g')
  .classed('pathbar', true);

src/traces/treemap/draw_descendants.js

@@ -65,16 +65,24 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
 
  var sliceData = allData.descendants();
 
- slices = slices.data(sliceData, function(pt) {
- // hide slices that won't show up on graph
- if(pt.depth >= trace._maxDepth) {
+ var minVisibleDepth = Infinity;
+ var maxVisibleDepth = -Infinity;
+ sliceData.forEach(function(pt) {
+ 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);
  });
 
+ slices = slices.data(sliceData, helpers.getPtId);
+
+ trace._maxVisibleLayers = isFinite(maxVisibleDepth) ? maxVisibleDepth - minVisibleDepth + 1 : 0;
+
  slices.enter().append('g')
  .classed('slice', true);
 
@@ -185,14 +193,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,6 +84,8 @@ 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;
@@ -146,18 +148,15 @@ 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) {
  maxDepth++;
  }
+
  trace._maxDepth = maxDepth;
+ trace._backgroundColor = fullLayout.paper_bgcolor;
+ trace._entryDepth = entry.data.depth;
+ trace._atRootLevel = isRoot;
 
  var cenX = -vpw / 2 + gs.l + gs.w * (domain.x[1] + domain.x[0]) / 2;
  var cenY = -vph / 2 + gs.t + gs.h * (1 - (domain.y[1] + domain.y[0]) / 2);

src/traces/treemap/style.js

@@ -35,39 +35,65 @@ function styleOne(s, pt, trace, opts) {
  var ptNumber = cdi.i;
  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(!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(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);
+ }
+ } 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(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 :
- depthFade(pt.data.depth - trace._entryDepth);
  }
 
  s.style('stroke-width', lineWidth)
- .call(Color.fill, cdi.color)
+ .call(Color.fill, fillColor)
  .call(Color.stroke, lineColor)
- .style('opacity', opacity);
+ .style('opacity', null);
 }
 
 module.exports = {

test/image/mocks/treemap_pad_mirror.json

@@ -14,8 +14,7 @@
  "pad": 0
  },
  "marker": {
- "opacitybase": 0.3,
- "opacitystep": 0.1,
+ "depthfade": "reversed",
  "pad": {
  "t": 16,
  "l": 8,
@@ -105,8 +104,7 @@
  "pad": 0
  },
  "marker": {
- "opacitybase": 0.3,
- "opacitystep": 0.1,
+ "depthfade": "reversed",
  "pad": {
  "t": 16,
  "l": 8,
@@ -196,8 +194,6 @@
  "pad": 0
  },
  "marker": {
- "opacitybase": 0.3,
- "opacitystep": 0.1,
  "pad": {
  "t": 16,
  "l": 8,
@@ -287,8 +283,6 @@
  "pad": 0
  },
  "marker": {
- "opacitybase": 0.3,
- "opacitystep": 0.1,
  "pad": {
  "t": 16,
  "l": 8,
@@ -412,7 +406,7 @@
  "annotations": [
  {
  "showarrow": false,
- "text": "base",
+ "text": "base<br>depthfade: 'reversed'",
  "font": {
  "size": 16
  },
@@ -423,7 +417,7 @@
  },
  {
  "showarrow": false,
- "text": "flip y axis",
+ "text": "flip y axis<br>depthfade: 'reversed'",
  "font": {
  "size": 16
  },