Waterfall charts

lib/index.js

@@ -22,6 +22,7 @@ Plotly.register([
     require('./contour'),
     require('./scatterternary'),
     require('./violin'),
+    require('./waterfall'),
 
     require('./scatter3d'),
     require('./surface'),

lib/waterfall.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/waterfall');

src/components/drawing/index.js

@@ -110,7 +110,9 @@ drawing.hideOutsideRangePoints = function(traceGroups, subplot) {
         var trace = d[0].trace;
         var xcalendar = trace.xcalendar;
         var ycalendar = trace.ycalendar;
-        var selector = trace.type === 'bar' ? '.bartext' : '.point,.textpoint';
+        var selector = trace.type === 'bar' ? '.bartext' :
+            trace.type === 'waterfall' ? '.bartext,.line' :
+                '.point,.textpoint';
 
         traceGroups.selectAll(selector).each(function(d) {
             drawing.hideOutsideRangePoint(d, d3.select(this), xa, ya, xcalendar, ycalendar);
@@ -360,8 +362,21 @@ drawing.pointStyle = function(s, trace, gd) {
     });
 };
 
+drawing.waterfallStyle = function(d, trace) {
+    var marker = trace.marker;
+    if(marker) return marker;
+    if(!d.isSum) {
+        if(d.rawS > 0) return trace.increasing;
+        return trace.decreasing; // Note here by default we return RED for zero and null
+    }
+    return trace.totals;
+};
+
 drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
     var marker = trace.marker;
+    if(trace.type === 'waterfall') {
+        marker = this.waterfallStyle(d, trace);
+    }
     var markerLine = marker.line;
 
     sel.style('opacity',
@@ -497,7 +512,6 @@ drawing.makePointStyleFns = function(trace) {
     if(trace.selectedpoints) {
         Lib.extendFlat(out, drawing.makeSelectedPointStyleFns(trace));
     }
-
     return out;
 };
 

src/components/legend/style.js

@@ -61,6 +61,7 @@ module.exports = function style(s, gd) {
           .enter().append('g')
             .classed('legendpoints', true);
     })
+    .each(styleWaterfalls)
     .each(styleBars)
     .each(styleBoxes)
     .each(stylePies)
@@ -241,8 +242,49 @@ module.exports = function style(s, gd) {
         txt.selectAll('text').call(Drawing.textPointStyle, tMod, gd);
     }
 
+    function styleWaterfalls(d) {
+        var trace = d[0].trace;
+        if(trace.type !== 'waterfall') return d;
+
+        var barpath = d3.select(this).select('g.legendpoints')
+            .selectAll('path.legendbar')
+            .data(Registry.traceIs(trace, 'bar') ? [d, d, d] : []);
+        barpath.enter().append('path').classed('legendbar', true)
+            .attr('d', function(_, i) {
+                return (
+                    (i === 0) ? 'M-6,-6V6H0Z' :
+                    (i === 1) ? 'M6,6V-6H0Z' : 'M6,6H0L-6,-6H-0Z'
+                );
+            })
+            .attr('transform', 'translate(20,0)');
+        barpath.exit().remove();
+
+        barpath.each(function(d, i) {
+
+            var container = trace.marker || trace[
+                (i % 3 === 0) ? 'increasing' :
+                (i % 3 === 1) ? 'decreasing' : 'totals'
+            ];
+
+            var line = container.line || {};
+
+            var p = d3.select(this);
+            var d0 = d[0];
+            var w = (d0.mlw + 1 || line.width + 1) - 1;
+
+            p.style('stroke-width', w + 'px')
+                .call(Color.fill, container.color);
+
+            if(w) {
+                p.call(Color.stroke, container.color);
+            }
+        });
+    }
+
     function styleBars(d) {
         var trace = d[0].trace;
+        if(trace.type === 'waterfall') return d;
+
         var marker = trace.marker || {};
         var markerLine = marker.line || {};
 

src/plot_api/helpers.js

@@ -303,7 +303,7 @@ exports.cleanData = function(data) {
         // the axes it's eventually going to be used with
         if('bardir' in trace) {
             if(trace.bardir === 'h' && (Registry.traceIs(trace, 'bar') ||
-                     trace.type.substr(0, 9) === 'histogram')) {
+                trace.type.substr(0, 9) === 'histogram')) {
                 trace.orientation = 'h';
                 exports.swapXYData(trace);
             }

src/plots/cartesian/constants.js

@@ -65,7 +65,7 @@ module.exports = {
     traceLayerClasses: [
         'heatmaplayer',
         'contourcarpetlayer', 'contourlayer',
-        'barlayer',
+        'waterfalllayer', 'barlayer',
         'carpetlayer',
         'violinlayer',
         'boxlayer',

src/plots/cartesian/index.js

@@ -261,7 +261,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
         );
 
         // layers that allow `cliponaxis: false`
-        if(className !== 'scatterlayer' && className !== 'barlayer') {
+        if(className !== 'scatterlayer' && className !== 'barlayer' && className !== 'waterfalllayer') {
             Drawing.setClipUrl(sel, plotinfo.layerClipId, gd);
         }
     });
@@ -277,7 +277,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
     if(!gd._context.staticPlot) {
         if(plotinfo._hasClipOnAxisFalse) {
             plotinfo.clipOnAxisFalseTraces = plotinfo.plot
-                .selectAll('.scatterlayer, .barlayer')
+                .selectAll('.scatterlayer, .barlayer, .waterfalllayer')
                 .selectAll('.trace');
         }
 

src/traces/bar/arrays_to_calcdata.js

@@ -6,12 +6,10 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var mergeArray = require('../../lib').mergeArray;
 
-
 // arrayOk attributes, merge them into calcdata array
 module.exports = function arraysToCalcdata(cd, trace) {
     for(var i = 0; i < cd.length; i++) cd[i].i = i;

src/traces/bar/cross_trace_calc.js

@@ -37,7 +37,7 @@ function crossTraceCalc(gd, plotinfo) {
         var fullTrace = fullTraces[i];
         if(
             fullTrace.visible === true &&
-            Registry.traceIs(fullTrace, 'bar') &&
+            (Registry.traceIs(fullTrace, 'bar') && fullTrace.type !== 'waterfall') &&
             fullTrace.xaxis === xa._id &&
             fullTrace.yaxis === ya._id
         ) {
@@ -237,6 +237,7 @@ function setOffsetAndWidth(gd, pa, sieve) {
     var fullLayout = gd._fullLayout;
     var bargap = fullLayout.bargap;
     var bargroupgap = fullLayout.bargroupgap || 0;
+
     var minDiff = sieve.minDiff;
     var calcTraces = sieve.traces;
 

src/traces/bar/defaults.js

@@ -13,7 +13,7 @@ var Color = require('../../components/color');
 var Registry = require('../../registry');
 
 var handleXYDefaults = require('../scatter/xy_defaults');
-var handleStyleDefaults = require('../bar/style_defaults');
+var handleStyleDefaults = require('./style_defaults');
 var getAxisGroup = require('../../plots/cartesian/axis_ids').getAxisGroup;
 var attributes = require('./attributes');
 
@@ -22,8 +22,6 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
 
-    var coerceFont = Lib.coerceFont;
-
     var len = handleXYDefaults(traceIn, traceOut, layout, coerce);
     if(!len) {
         traceOut.visible = false;
@@ -39,34 +37,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     coerce('hovertext');
     coerce('hovertemplate');
 
-    var textPosition = coerce('textposition');
-
-    var hasBoth = Array.isArray(textPosition) || textPosition === 'auto';
-    var hasInside = hasBoth || textPosition === 'inside';
-    var hasOutside = hasBoth || textPosition === 'outside';
-
-    if(hasInside || hasOutside) {
-        var textFont = coerceFont(coerce, 'textfont', layout.font);
-
-        // Note that coercing `insidetextfont` is always needed –
-        // even if `textposition` is `outside` for each trace – since
-        // an outside label can become an inside one, for example because
-        // of a bar being stacked on top of it.
-        var insideTextFontDefault = Lib.extendFlat({}, textFont);
-        var isTraceTextfontColorSet = traceIn.textfont && traceIn.textfont.color;
-        var isColorInheritedFromLayoutFont = !isTraceTextfontColorSet;
-        if(isColorInheritedFromLayoutFont) {
-            delete insideTextFontDefault.color;
-        }
-        coerceFont(coerce, 'insidetextfont', insideTextFontDefault);
-
-        if(hasOutside) coerceFont(coerce, 'outsidetextfont', textFont);
-
-        coerce('constraintext');
-        coerce('selected.textfont.color');
-        coerce('unselected.textfont.color');
-        coerce('cliponaxis');
-    }
+    handleText(traceIn, traceOut, layout, coerce);
 
     handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout);
 
@@ -138,8 +109,43 @@ function crossTraceDefaults(fullData, fullLayout) {
     }
 }
 
+function handleText(traceIn, traceOut, layout, coerce) {
+
+    var textPosition = coerce('textposition');
+
+    var hasBoth = Array.isArray(textPosition) || textPosition === 'auto';
+    var hasInside = hasBoth || textPosition === 'inside';
+    var hasOutside = hasBoth || textPosition === 'outside';
+
+    if(hasInside || hasOutside) {
+        var coerceFont = Lib.coerceFont;
+
+        var textFont = coerceFont(coerce, 'textfont', layout.font);
+
+        // Note that coercing `insidetextfont` is always needed –
+        // even if `textposition` is `outside` for each trace – since
+        // an outside label can become an inside one, for example because
+        // of a bar being stacked on top of it.
+        var insideTextFontDefault = Lib.extendFlat({}, textFont);
+        var isTraceTextfontColorSet = traceIn.textfont && traceIn.textfont.color;
+        var isColorInheritedFromLayoutFont = !isTraceTextfontColorSet;
+        if(isColorInheritedFromLayoutFont) {
+            delete insideTextFontDefault.color;
+        }
+        coerceFont(coerce, 'insidetextfont', insideTextFontDefault);
+
+        if(hasOutside) coerceFont(coerce, 'outsidetextfont', textFont);
+
+        coerce('constraintext');
+        coerce('selected.textfont.color');
+        coerce('unselected.textfont.color');
+        coerce('cliponaxis');
+    }
+}
+
 module.exports = {
     supplyDefaults: supplyDefaults,
     crossTraceDefaults: crossTraceDefaults,
-    handleGroupingDefaults: handleGroupingDefaults
+    handleGroupingDefaults: handleGroupingDefaults,
+    handleText: handleText
 };

src/traces/bar/hover.js

@@ -142,9 +142,9 @@ function hoverPoints(pointData, xval, yval, hovermode) {
 }
 
 function getTraceColor(trace, di) {
-    var mc = di.mcc || trace.marker.color;
-    var mlc = di.mlcc || trace.marker.line.color;
-    var mlw = di.mlw || trace.marker.line.width;
+    var mc = (di.mc !== undefined) ? di.mc : trace.marker.color;
+    var mlc = (di.mlc !== undefined) ? di.mlc : trace.marker.line.color;
+    var mlw = (di.mlw !== undefined) ? di.mlw : trace.marker.line.width;
 
     if(Color.opacity(mc)) return mc;
     else if(Color.opacity(mlc) && mlw) return mlc;