Implementation of textinfo for waterfall traces

src/traces/bar/plot.js

@@ -22,8 +22,9 @@ var Registry = require('../../registry');
 var attributes = require('./attributes');
 var attributeText = attributes.text;
 var attributeTextPosition = attributes.textposition;
-var helpers = require('./helpers');
 var style = require('./style');
+var helpers = require('./helpers');
+var pieHelpers = require('../pie/helpers');
 
 // padding in pixels around text
 var TEXTPAD = 3;
@@ -198,7 +199,7 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1) {
     var trace = calcTrace[0].trace;
     var orientation = trace.orientation;
 
-    var text = getText(trace, i);
+    var text = getText(calcTrace, i, fullLayout);
     textPosition = getTextPosition(trace, i);
 
     // compute text position
@@ -469,12 +470,57 @@ function getTransform(textX, textY, targetX, targetY, scale, rotate) {
     return transformTranslate + transformScale + transformRotate;
 }
 
-function getText(trace, index) {
-    var value = helpers.getValue(trace.text, index);
+function getText(calcTrace, index, fullLayout) {
+    var trace = calcTrace[0].trace;
+
+    var value;
+    if(!trace.textinfo || trace.textinfo === 'none') {
+        value = helpers.getValue(trace.text, index);
+    } else {
+        value = calcTextinfo(calcTrace, index, fullLayout);
+    }
+
     return helpers.coerceString(attributeText, value);
 }
 
 function getTextPosition(trace, index) {
     var value = helpers.getValue(trace.textposition, index);
     return helpers.coerceEnumerated(attributeTextPosition, value);
 }
+
+function calcTextinfo(calcTrace, index, fullLayout) {
+    var trace = calcTrace[0].trace;
+    var textinfo = trace.textinfo;
+    var cdi = calcTrace[index];
+
+    var separators = fullLayout.separators;
+    var parts = textinfo.split('+');
+    var text = [];
+
+    var hasFlag = function(flag) { return parts.indexOf(flag) !== -1; };
+
+    if(hasFlag('label')) {
+        if(trace.orientation === 'h') {
+            text.push(trace.y[index]);
+        } else {
+            text.push(trace.x[index]);
+        }
+    }
+
+    if(hasFlag('text')) {
+        var tx = Lib.castOption(trace, cdi.i, 'text');
+        if(tx) text.push(tx);
+    }
+
+    if(trace.type === 'waterfall') {
+        var delta = +cdi.rawS || cdi.s;
+        var final = cdi.v;
+        var initial = final - delta;
+
+        if(hasFlag('initial')) text.push(pieHelpers.formatPieValue(initial, separators));
+        if(hasFlag('delta')) text.push(pieHelpers.formatPieValue(delta, separators));
+        if(hasFlag('final')) text.push(pieHelpers.formatPieValue(final, separators));
+    }
+
+    return text.join('<br>');
+}

src/traces/waterfall/attributes.js

@@ -8,6 +8,7 @@
 
 'use strict';
 
+var pieAtts = require('../pie/attributes');
 var barAttrs = require('../bar/attributes');
 var lineAttrs = require('../scatter/attributes').line;
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -76,6 +77,14 @@ module.exports = {
     hovertext: barAttrs.hovertext,
     hovertemplate: barAttrs.hovertemplate,
 
+    textinfo: extendFlat({}, pieAtts.textinfo, {
+        editType: 'plot',
+        flags: ['label', 'text', 'initial', 'delta', 'final'],
+        description: [
+            'Determines which trace information appear on the graph.'
+        ].join(' ')
+    }),
+
     text: barAttrs.text,
     textposition: barAttrs.textposition,
     textfont: barAttrs.textfont,

src/traces/waterfall/calc.js

@@ -88,6 +88,8 @@ module.exports = function calc(gd, trace) {
         if(trace.ids) {
             cdi.id = String(trace.ids[i]);
         }
+
+        cdi.v = trace.base + previousSum;
     }
 
     if(cd.length) cd[0].hasTotals = hasTotals;

src/traces/waterfall/defaults.js

@@ -45,6 +45,8 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     coerce('width');
 
     coerce('text');
+    coerce('textinfo');
+
     coerce('hovertext');
     coerce('hovertemplate');
 

test/image/mocks/waterfall_profit-loss_2018vs2019_textinfo_base.json

@@ -0,0 +1,157 @@
+{
+    "data": [
+        {
+            "name": "2018",
+            "type": "waterfall",
+            "orientation": "h",
+            "opacity": 0.5,
+            "measure": [
+                "relative",
+                "relative",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "total"
+            ],
+            "y": [
+                "Sales",
+                "Consulting",
+                "Maintenance",
+                "Other revenue",
+                "Net revenue",
+                "Purchases",
+                "Material expenses",
+                "Personnel expenses",
+                "Other expenses",
+                "Operating profit",
+                "Investment income",
+                "Financial income",
+                "Profit before tax",
+                "Income tax (15%)",
+                "Profit after tax"
+            ],
+            "text": [
+                "+ Sales",
+                "+ Consulting",
+                "+ Maintenance",
+                "+ Other revenue",
+                "= Net revenue",
+                "- Purchases",
+                "- Material expenses",
+                "- Personnel expenses",
+                "- Other expenses",
+                "= Operating profit",
+                "+ Investment income",
+                "+ Financial income",
+                "= Profit before tax",
+                "- Income tax (15%)",
+                "= Profit after tax"
+            ],
+            "x": [
+                375,
+                128,
+                78,
+                27,
+                null,
+                -327,
+                -12,
+                -78,
+                -12,
+                null,
+                32,
+                89,
+                null,
+                -45,
+                null
+            ],
+            "base": 0,
+            "textinfo": "text+delta",
+            "textposition": "outside"
+        },
+        {
+            "name": "2019",
+            "type": "waterfall",
+            "orientation": "h",
+            "measure": [
+                "relative",
+                "relative",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "total"
+            ],
+            "y": [
+                "Sales",
+                "Consulting",
+                "Maintenance",
+                "Other revenue",
+                "Net revenue",
+                "Purchases",
+                "Material expenses",
+                "Personnel expenses",
+                "Other expenses",
+                "Operating profit",
+                "Investment income",
+                "Financial income",
+                "Profit before tax",
+                "Income tax (15%)",
+                "Profit after tax"
+            ],
+            "x": [
+                307,
+                102,
+                187,
+                172,
+                null,
+                -302,
+                -121,
+                -187,
+                -121,
+                null,
+                123,
+                198,
+                null,
+                -53.7,
+                null
+            ],
+            "base": 255,
+            "textinfo": "initial+final",
+            "textposition": "outside"
+        }
+    ],
+    "layout": {
+        "title": {
+            "text": "Profit and loss statement 2018 vs 2019<br>waterfall chart"
+        },
+        "yaxis": {
+            "type": "category",
+            "autorange": "reversed"
+        },
+        "xaxis": {
+            "type": "linear"
+        },
+        "margin": { "l": 150, "r": 50 },
+        "height": 1200,
+        "width": 900,
+        "hovermode": "closest",
+        "showlegend": true
+    }
+}