Treemap new trace type

lib/index.js

@@ -26,6 +26,7 @@ Plotly.register([
 
     require('./pie'),
     require('./sunburst'),
+    require('./treemap'),
     require('./funnelarea'),
 
     require('./scatter3d'),

lib/treemap.js

@@ -0,0 +1,11 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = require('../src/traces/treemap');

src/lib/index.js

@@ -1159,6 +1159,10 @@ lib.isValidTextValue = function(v) {
     return v || v === 0;
 };
 
+/**
+ * @param {number} ratio
+ * @param {number} n (number of decimal places)
+ */
 lib.formatPercent = function(ratio, n) {
     n = n || 0;
     var str = (Math.round(100 * ratio * Math.pow(10, n)) * Math.pow(0.1, n)).toFixed(n) + '%';

src/plot_api/plot_api.js

@@ -2450,7 +2450,7 @@ var traceUIControlPatterns = [
     {pattern: /(^|value\.)visible$/, attr: 'legend.uirevision'},
     {pattern: /^dimensions\[\d+\]\.constraintrange/},
     {pattern: /^node\.(x|y|groups)/}, // for Sankey nodes
-    {pattern: /^level$/}, // for Sunburst traces
+    {pattern: /^level$/}, // for Sunburst & Treemap traces
 
     // below this you must be in editable: true mode
     // TODO: I still put name and title with `trace.uirevision`
@@ -3780,6 +3780,9 @@ function makePlotFramework(gd) {
     // single pie layer for the whole plot
     fullLayout._pielayer = fullLayout._paper.append('g').classed('pielayer', true);
 
+    // single treemap layer for the whole plot
+    fullLayout._treemaplayer = fullLayout._paper.append('g').classed('treemaplayer', true);
+
     // single sunburst layer for the whole plot
     fullLayout._sunburstlayer = fullLayout._paper.append('g').classed('sunburstlayer', true);
 

src/plots/plots.js

@@ -23,6 +23,8 @@ var axisIDs = require('./cartesian/axis_ids');
 var animationAttrs = require('./animation_attributes');
 var frameAttrs = require('./frame_attributes');
 
+var getModuleCalcData = require('../plots/get_data').getModuleCalcData;
+
 var relinkPrivateKeys = Lib.relinkPrivateKeys;
 var _ = Lib._;
 
@@ -2771,9 +2773,10 @@ plots.doCalcdata = function(gd, traces) {
     gd._hmpixcount = 0;
     gd._hmlumcount = 0;
 
-    // for sharing colors across pies / sunbursts / funnelarea (and for legend)
+    // for sharing colors across pies / sunbursts / treemap / funnelarea (and for legend)
     fullLayout._piecolormap = {};
     fullLayout._sunburstcolormap = {};
+    fullLayout._treemapcolormap = {};
     fullLayout._funnelareacolormap = {};
 
     // If traces were specified and this trace was not included,
@@ -3203,3 +3206,18 @@ plots.generalUpdatePerTraceModule = function(gd, subplot, subplotCalcData, subpl
     // update moduleName -> calcData hash
     subplot.traceHash = traceHash;
 };
+
+plots.plotBasePlot = function(desiredType, gd, traces, transitionOpts, makeOnCompleteCallback) {
+    var _module = Registry.getModule(desiredType);
+    var cdmodule = getModuleCalcData(gd.calcdata, _module)[0];
+    _module.plot(gd, cdmodule, transitionOpts, makeOnCompleteCallback);
+};
+
+plots.cleanBasePlot = function(desiredType, newFullData, newFullLayout, oldFullData, oldFullLayout) {
+    var had = (oldFullLayout._has && oldFullLayout._has(desiredType));
+    var has = (newFullLayout._has && newFullLayout._has(desiredType));
+
+    if(had && !has) {
+        oldFullLayout['_' + desiredType + 'layer'].selectAll('g.trace').remove();
+    }
+};

src/traces/bar/attributes.js

@@ -13,7 +13,7 @@ var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplat
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 var fontAttrs = require('../../plots/font_attributes');
-var constants = require('./constants.js');
+var constants = require('./constants');
 
 var extendFlat = require('../../lib/extend').extendFlat;
 

src/traces/bar/constants.js

@@ -10,5 +10,6 @@
 'use strict';
 
 module.exports = {
+    TEXTPAD: 3, // padding in pixels around text
     eventDataKeys: []
 };

src/traces/bar/plot.js

@@ -21,15 +21,15 @@ var tickText = require('../../plots/cartesian/axes').tickText;
 
 var style = require('./style');
 var helpers = require('./helpers');
+var constants = require('./constants');
 var attributes = require('./attributes');
 
 var attributeText = attributes.text;
 var attributeTextPosition = attributes.textposition;
 
 var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue;
 
-// padding in pixels around text
-var TEXTPAD = 3;
+var TEXTPAD = constants.TEXTPAD;
 
 function dirSign(a, b) {
     return (a < b) ? 1 : -1;

src/traces/funnelarea/base_plot.js

@@ -8,22 +8,14 @@
 
 'use strict';
 
-var Registry = require('../../registry');
-var getModuleCalcData = require('../../plots/get_data').getModuleCalcData;
+var plots = require('../../plots/plots');
 
 exports.name = 'funnelarea';
 
-exports.plot = function(gd) {
-    var Funnelarea = Registry.getModule('funnelarea');
-    var cdFunnelarea = getModuleCalcData(gd.calcdata, Funnelarea)[0];
-    Funnelarea.plot(gd, cdFunnelarea);
+exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
+    plots.plotBasePlot(exports.name, gd, traces, transitionOpts, makeOnCompleteCallback);
 };
 
 exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
-    var hadFunnelarea = (oldFullLayout._has && oldFullLayout._has('funnelarea'));
-    var hasFunnelarea = (newFullLayout._has && newFullLayout._has('funnelarea'));
-
-    if(hadFunnelarea && !hasFunnelarea) {
-        oldFullLayout._funnelarealayer.selectAll('g.trace').remove();
-    }
+    plots.cleanBasePlot(exports.name, newFullData, newFullLayout, oldFullData, oldFullLayout);
 };

src/traces/indicator/base_plot.js

@@ -8,22 +8,14 @@
 
 'use strict';
 
-var Registry = require('../../registry');
-var getModuleCalcData = require('../../plots/get_data').getModuleCalcData;
+var plots = require('../../plots/plots');
 
-var name = exports.name = 'indicator';
+exports.name = 'indicator';
 
 exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
-    var _module = Registry.getModule(name);
-    var cdmodule = getModuleCalcData(gd.calcdata, _module)[0];
-    _module.plot(gd, cdmodule, transitionOpts, makeOnCompleteCallback);
+    plots.plotBasePlot(exports.name, gd, traces, transitionOpts, makeOnCompleteCallback);
 };
 
 exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
-    var had = (oldFullLayout._has && oldFullLayout._has(name));
-    var has = (newFullLayout._has && newFullLayout._has(name));
-
-    if(had && !has) {
-        oldFullLayout._indicatorlayer.selectAll('g.trace').remove();
-    }
+    plots.cleanBasePlot(exports.name, newFullData, newFullLayout, oldFullData, oldFullLayout);
 };

src/traces/pie/base_plot.js

@@ -8,22 +8,14 @@
 
 'use strict';
 
-var Registry = require('../../registry');
-var getModuleCalcData = require('../../plots/get_data').getModuleCalcData;
+var plots = require('../../plots/plots');
 
 exports.name = 'pie';
 
-exports.plot = function(gd) {
-    var Pie = Registry.getModule('pie');
-    var cdPie = getModuleCalcData(gd.calcdata, Pie)[0];
-    Pie.plot(gd, cdPie);
+exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
+    plots.plotBasePlot(exports.name, gd, traces, transitionOpts, makeOnCompleteCallback);
 };
 
 exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
-    var hadPie = (oldFullLayout._has && oldFullLayout._has('pie'));
-    var hasPie = (newFullLayout._has && newFullLayout._has('pie'));
-
-    if(hadPie && !hasPie) {
-        oldFullLayout._pielayer.selectAll('g.trace').remove();
-    }
+    plots.cleanBasePlot(exports.name, newFullData, newFullLayout, oldFullData, oldFullLayout);
 };

src/traces/sunburst/attributes.js

@@ -11,24 +11,26 @@
 var plotAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
+
+var colorScaleAttrs = require('../../components/colorscale/attributes');
 var domainAttrs = require('../../plots/domain').attributes;
 var pieAttrs = require('../pie/attributes');
-
+var constants = require('./constants');
 var extendFlat = require('../../lib/extend').extendFlat;
 
 module.exports = {
     labels: {
         valType: 'data_array',
         editType: 'calc',
         description: [
-            'Sets the labels of each of the sunburst sectors.'
+            'Sets the labels of each of the sectors.'
         ].join(' ')
     },
     parents: {
         valType: 'data_array',
         editType: 'calc',
         description: [
-            'Sets the parent sectors for each of the sunburst sectors.',
+            'Sets the parent sectors for each of the sectors.',
             'Empty string items \'\' are understood to reference',
             'the root node in the hierarchy.',
             'If `ids` is filled, `parents` items are understood to be "ids" themselves.',
@@ -41,7 +43,7 @@ module.exports = {
         valType: 'data_array',
         editType: 'calc',
         description: [
-            'Sets the values associated with each of the sunburst sectors.',
+            'Sets the values associated with each of the sectors.',
             'Use with `branchvalues` to determine how the values are summed.'
         ].join(' ')
     },
@@ -58,15 +60,29 @@ module.exports = {
             'are taken to be the extra part not part of the sum of the values at their leaves.'
         ].join(' ')
     },
+    count: {
+        valType: 'flaglist',
+        flags: [
+            'branches',
+            'leaves'
+        ],
+        dflt: 'leaves',
+        editType: 'calc',
+        role: 'info',
+        description: [
+            'Determines counting the number of *leaves* and/or *branches*,',
+            'when a `values` array is not provided.'
+        ].join(' ')
+    },
 
     level: {
         valType: 'any',
         editType: 'plot',
         anim: true,
         role: 'info',
         description: [
-            'Sets the level from which this sunburst trace hierarchy is rendered.',
-            'Set `level` to `\'\'` to start the sunburst from the root node in the hierarchy.',
+            'Sets the level from which this trace hierarchy is rendered.',
+            'Set `level` to `\'\'` to start from the root node in the hierarchy.',
             'Must be an "id" if `ids` is filled in, otherwise plotly attempts to find a matching',
             'item in `labels`.'
         ].join(' ')
@@ -77,17 +93,17 @@ module.exports = {
         role: 'info',
         dflt: -1,
         description: [
-            'Sets the number of rendered sunburst rings from any given `level`.',
+            'Sets the number of rendered sectors from any given `level`.',
             'Set `maxdepth` to *-1* to render all the levels in the hierarchy.'
         ].join(' ')
     },
 
-    marker: {
+    marker: extendFlat({
         colors: {
             valType: 'data_array',
             editType: 'calc',
             description: [
-                'Sets the color of each sector of this sunburst chart.',
+                'Sets the color of each sector of this trace.',
                 'If not specified, the default trace color set is used',
                 'to pick the sector colors.'
             ].join(' ')
@@ -111,6 +127,11 @@ module.exports = {
         },
         editType: 'calc'
     },
+        colorScaleAttrs('marker', {
+            colorAttr: 'colors',
+            anim: false // TODO: set to anim: true?
+        })
+    ),
 
     leaf: {
         opacity: {
@@ -119,28 +140,74 @@ module.exports = {
             role: 'style',
             min: 0,
             max: 1,
-            dflt: 0.7,
-            description: 'Sets the opacity of the leaves.'
+            description: [
+                'Sets the opacity of the leaves. With colorscale',
+                'it is defaulted to 1; otherwise it is defaulted to 0.7'
+            ].join(' ')
         },
         editType: 'plot'
     },
 
     text: pieAttrs.text,
-    textinfo: extendFlat({}, pieAttrs.textinfo, {
+    textinfo: {
+        valType: 'flaglist',
+        role: 'info',
+        flags: [
+            'label',
+            'text',
+            'value',
+            'current path',
+            'percent root',
+            'percent visible',
+            'percent parent',
+            'root label',
+            'visible label',
+            'parent label'
+        ],
+        extras: ['none'],
         editType: 'plot',
-        flags: ['label', 'text', 'value']
-    }),
+        description: [
+            'Determines which trace information appear on the graph.'
+        ].join(' ')
+    },
+
+    // TODO: incorporate `label` and `value` in the eventData
     texttemplate: texttemplateAttrs({editType: 'plot'}, {
-        keys: ['label', 'text', 'value', 'color']
+        keys: constants.eventDataKeys.concat(['label', 'value'])
     }),
-    textfont: pieAttrs.textfont,
 
     hovertext: pieAttrs.hovertext,
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
-        flags: ['label', 'text', 'value', 'name']
+        flags: [
+            'label',
+            'text',
+            'value',
+            'name',
+            'current path',
+            'percent root',
+            'percent visible',
+            'percent parent',
+            'root label',
+            'visible label',
+            'parent label'
+        ],
+        dflt: [
+            'label',
+            'text',
+            'value',
+            'percent root',
+            'percent visible',
+            'percent parent',
+            'root label',
+            'visible label',
+            'parent label'
+        ].join('+')
+    }),
+    hovertemplate: hovertemplateAttrs({}, {
+        keys: constants.eventDataKeys
     }),
-    hovertemplate: hovertemplateAttrs(),
 
+    textfont: pieAttrs.textfont,
     insidetextfont: pieAttrs.insidetextfont,
     outsidetextfont: pieAttrs.outsidetextfont,