Icicle Trace

lib/icicle.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('../src/traces/icicle');

lib/index-strict.js

@@ -19,6 +19,7 @@ Plotly.register([
     require('./pie'),
     require('./sunburst'),
     require('./treemap'),
+    require('./icicle'),
     require('./funnelarea'),
     require('./scattergeo'),
     require('./choropleth'),

lib/index.js

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

src/plot_api/plot_api.js

@@ -2374,7 +2374,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 & Treemap traces
+    {pattern: /^level$/}, // for Sunburst, Treemap and Icicle traces
 
     // below this you must be in editable: true mode
     // TODO: I still put name and title with `trace.uirevision`
@@ -3738,6 +3738,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._iciclelayer = fullLayout._paper.append('g').classed('iciclelayer', true);
+
     // single treemap layer for the whole plot
     fullLayout._treemaplayer = fullLayout._paper.append('g').classed('treemaplayer', true);
 

src/plots/plots.js

@@ -2927,10 +2927,11 @@ plots.doCalcdata = function(gd, traces) {
     gd._hmpixcount = 0;
     gd._hmlumcount = 0;
 
-    // for sharing colors across pies / sunbursts / treemap / funnelarea (and for legend)
+    // for sharing colors across pies / sunbursts / treemap / icicle / funnelarea (and for legend)
     fullLayout._piecolormap = {};
     fullLayout._sunburstcolormap = {};
     fullLayout._treemapcolormap = {};
+    fullLayout._iciclecolormap = {};
     fullLayout._funnelareacolormap = {};
 
     // If traces were specified and this trace was not included,

src/traces/bar/uniform_text.js

@@ -17,6 +17,7 @@ function resizeText(gd, gTrace, traceType) {
                 selector = 'g.slice';
                 break;
             case 'treemap' :
+            case 'icicle' :
                 selector = 'g.slice, g.pathbar';
                 break;
             default :

src/traces/icicle/attributes.js

@@ -0,0 +1,98 @@
+'use strict';
+
+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 sunburstAttrs = require('../sunburst/attributes');
+var treemapAttrs = require('../treemap/attributes');
+var constants = require('../treemap/constants');
+var extendFlat = require('../../lib/extend').extendFlat;
+
+module.exports = {
+    labels: sunburstAttrs.labels,
+    parents: sunburstAttrs.parents,
+
+    values: sunburstAttrs.values,
+    branchvalues: sunburstAttrs.branchvalues,
+    count: sunburstAttrs.count,
+
+    level: sunburstAttrs.level,
+    maxdepth: sunburstAttrs.maxdepth,
+
+    tiling: {
+        orientation: {
+            valType: 'enumerated',
+            values: ['v', 'h'],
+            dflt: 'h',
+            editType: 'plot',
+            description: [
+                'When set in conjunction with `tiling.flip`, determines on',
+                'which side the root nodes are drawn in the chart. If',
+                '`tiling.orientation` is *v* and `tiling.flip` is **, the root',
+                'nodes appear at the top. If `tiling.orientation` is *v* and',
+                '`tiling.flip` is *y*, the root nodes appear at the bottom. If',
+                '`tiling.orientation` is *h* and `tiling.flip` is **, the',
+                'root nodes appear at the left. If `tiling.orientation` is *h*',
+                'and `tiling.flip` is *x*, the root nodes appear at the right.',
+            ].join(' ')
+        },
+
+        flip: treemapAttrs.tiling.flip,
+
+        pad: {
+            valType: 'number',
+            min: 0,
+            dflt: 0,
+            editType: 'plot',
+            description: [
+                'Sets the inner padding (in px).'
+            ].join(' ')
+        },
+
+
+        editType: 'calc',
+    },
+
+    marker: extendFlat({
+        colors: sunburstAttrs.marker.colors,
+
+        line: sunburstAttrs.marker.line,
+
+        editType: 'calc'
+    },
+        colorScaleAttrs('marker', {
+            colorAttr: 'colors',
+            anim: false // TODO: set to anim: true?
+        })
+    ),
+
+    leaf: sunburstAttrs.leaf,
+
+    pathbar: treemapAttrs.pathbar,
+
+    text: pieAttrs.text,
+    textinfo: sunburstAttrs.textinfo,
+    // TODO: incorporate `label` and `value` in the eventData
+    texttemplate: texttemplateAttrs({editType: 'plot'}, {
+        keys: constants.eventDataKeys.concat(['label', 'value'])
+    }),
+
+    hovertext: pieAttrs.hovertext,
+    hoverinfo: sunburstAttrs.hoverinfo,
+    hovertemplate: hovertemplateAttrs({}, {
+        keys: constants.eventDataKeys
+    }),
+
+    textfont: pieAttrs.textfont,
+    insidetextfont: pieAttrs.insidetextfont,
+    outsidetextfont: treemapAttrs.outsidetextfont,
+
+    textposition: treemapAttrs.textposition,
+    sort: pieAttrs.sort,
+    root: sunburstAttrs.root,
+
+    domain: domainAttrs({name: 'icicle', trace: true, editType: 'calc'}),
+};

src/traces/icicle/base_plot.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var plots = require('../../plots/plots');
+
+exports.name = 'icicle';
+
+exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
+    plots.plotBasePlot(exports.name, gd, traces, transitionOpts, makeOnCompleteCallback);
+};
+
+exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+    plots.cleanBasePlot(exports.name, newFullData, newFullLayout, oldFullData, oldFullLayout);
+};

src/traces/icicle/calc.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var calc = require('../sunburst/calc');
+
+exports.calc = function(gd, trace) {
+    return calc.calc(gd, trace);
+};
+
+exports.crossTraceCalc = function(gd) {
+    return calc._runCrossTraceCalc('icicle', gd);
+};

src/traces/icicle/defaults.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var Lib = require('../../lib');
+var attributes = require('./attributes');
+var Color = require('../../components/color');
+var handleDomainDefaults = require('../../plots/domain').defaults;
+var handleText = require('../bar/defaults').handleText;
+var TEXTPAD = require('../bar/constants').TEXTPAD;
+
+var Colorscale = require('../../components/colorscale');
+var hasColorscale = Colorscale.hasColorscale;
+var colorscaleDefaults = Colorscale.handleDefaults;
+
+module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
+    }
+
+    var labels = coerce('labels');
+    var parents = coerce('parents');
+
+    if(!labels || !labels.length || !parents || !parents.length) {
+        traceOut.visible = false;
+        return;
+    }
+
+    var vals = coerce('values');
+    if(vals && vals.length) {
+        coerce('branchvalues');
+    } else {
+        coerce('count');
+    }
+
+    coerce('level');
+    coerce('maxdepth');
+
+    coerce('tiling.orientation');
+    coerce('tiling.flip');
+    coerce('tiling.pad');
+
+    var text = coerce('text');
+    coerce('texttemplate');
+    if(!traceOut.texttemplate) coerce('textinfo', Array.isArray(text) ? 'text+label' : 'label');
+
+    coerce('hovertext');
+    coerce('hovertemplate');
+
+    var hasPathbar = coerce('pathbar.visible');
+
+    var textposition = 'auto';
+    handleText(traceIn, traceOut, layout, coerce, textposition, {
+        hasPathbar: hasPathbar,
+        moduleHasSelected: false,
+        moduleHasUnselected: false,
+        moduleHasConstrain: false,
+        moduleHasCliponaxis: false,
+        moduleHasTextangle: false,
+        moduleHasInsideanchor: false
+    });
+    coerce('textposition');
+
+    var lineWidth = coerce('marker.line.width');
+    if(lineWidth) coerce('marker.line.color', layout.paper_bgcolor);
+
+    coerce('marker.colors');
+    var withColorscale = traceOut._hasColorscale = (
+        hasColorscale(traceIn, 'marker', 'colors') ||
+        (traceIn.marker || {}).coloraxis // N.B. special logic to consider "values" colorscales
+    );
+    if(withColorscale) {
+        colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
+    }
+
+    coerce('leaf.opacity', withColorscale ? 1 : 0.7);
+
+    traceOut._hovered = {
+        marker: {
+            line: {
+                width: 2,
+                color: Color.contrast(layout.paper_bgcolor)
+            }
+        }
+    };
+
+    if(hasPathbar) {
+        // This works even for multi-line labels as icicle pathbar trim out line breaks
+        coerce('pathbar.thickness', traceOut.pathbar.textfont.size + 2 * TEXTPAD);
+
+        coerce('pathbar.side');
+        coerce('pathbar.edgeshape');
+    }
+
+    coerce('sort');
+
+    coerce('root.color');
+
+    handleDomainDefaults(traceOut, layout, coerce);
+
+    // do not support transforms for now
+    traceOut._length = null;
+};