Merge pull request #6635 from plotly/waterfall-hover-total-delta

Fix waterfall `hovertemplate` not showing delta on totals similar to `texttemplate`

Author: archmoj

src/traces/waterfall/hover.js

@@ -31,16 +31,14 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, opts) {
 
     var size = (di.isSum) ? di.b + di.s : di.rawS;
 
-    if(!di.isSum) {
-        point.initial = di.b + di.s - size;
-        point.delta = size;
-        point.final = point.initial + point.delta;
-
-        var v = formatNumber(Math.abs(point.delta));
-        point.deltaLabel = size < 0 ? '(' + v + ')' : v;
-        point.finalLabel = formatNumber(point.final);
-        point.initialLabel = formatNumber(point.initial);
-    }
+    point.initial = di.b + di.s - size;
+    point.delta = size;
+    point.final = point.initial + point.delta;
+
+    var v = formatNumber(Math.abs(point.delta));
+    point.deltaLabel = size < 0 ? '(' + v + ')' : v;
+    point.finalLabel = formatNumber(point.final);
+    point.initialLabel = formatNumber(point.initial);
 
     var hoverinfo = di.hi || trace.hoverinfo;
     var text = [];

test/jasmine/tests/waterfall_test.js

@@ -1528,6 +1528,37 @@ describe('waterfall hover', function() {
             .then(done, done.fail);
         });
 
+        it('should provide delta hovertemplate on totals similar to hovertext', function(done) {
+            gd = createGraphDiv();
+
+            function _hover() {
+                var evt = { xpx: 400, ypx: 100 };
+                Fx.hover('graph', evt, 'xy');
+            }
+
+            Plotly.newPlot(gd, {
+                data: [{
+                    type: 'waterfall',
+                    y: [ 10, -4, null ],
+                    measure: [ '', '', 'total' ],
+                    texttemplate: '%{delta}',
+                    hovertemplate: '%{delta}',
+                }],
+                layout: {
+                    width: 600,
+                    height: 400
+                }
+            })
+            .then(_hover)
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: '6',
+                    name: 'trace 0'
+                });
+            })
+            .then(done, done.fail);
+        });
+
         it('should format numbers - round hover precision', function(done) {
             gd = createGraphDiv();