fix issue 3954 - implement hoverinfo and hovertemplate for funnel percentages

Author: archmoj

src/components/fx/helpers.js

@@ -149,6 +149,9 @@ exports.makeEventData = function makeEventData(pt, trace, cd) {
         if(pt.xa) out.xaxis = pt.xa;
         if(pt.ya) out.yaxis = pt.ya;
         if(pt.zLabelVal !== undefined) out.z = pt.zLabelVal;
+        if(pt.percentInitial !== undefined) out.z = pt.percentInitial;
+        if(pt.percentPrevious !== undefined) out.z = pt.percentPrevious;
+        if(pt.percentTotal !== undefined) out.z = pt.percentTotal;
     }
 
     exports.appendArrayPointValue(out, trace, pointNumber);

src/components/fx/hover.js

@@ -432,6 +432,9 @@ function _hover(gd, evt, subplot, noHoverEvent) {
             xLabelVal: undefined,
             yLabelVal: undefined,
             zLabelVal: undefined,
+            percentInitial: undefined,
+            percentPrevious: undefined,
+            percentTotal: undefined,
             text: undefined
         };
 
@@ -908,6 +911,16 @@ function createHoverText(hoverData, opts, gd) {
             text += (text ? '<br>' : '') + d.text;
         }
 
+        if(d.percentInitial !== undefined) {
+            text += (text ? '<br>' : '') + d.percentInitial + ' of initial';
+        }
+        if(d.percentPrevious !== undefined) {
+            text += (text ? '<br>' : '') + d.percentPrevious + ' of previous';
+        }
+        if(d.percentTotal !== undefined) {
+            text += (text ? '<br>' : '') + d.percentTotal + ' of total';
+        }
+
         // used by other modules (initially just ternary) that
         // manage their own hoverinfo independent of cleanPoint
         // the rest of this will still apply, so such modules
@@ -1383,6 +1396,9 @@ function cleanPoint(d, hovermode) {
         if(infomode.indexOf('z') === -1) d.zLabel = undefined;
         if(infomode.indexOf('text') === -1) d.text = undefined;
         if(infomode.indexOf('name') === -1) d.name = undefined;
+        if(infomode.indexOf('percentInitial') === -1) d.percentInitial = undefined;
+        if(infomode.indexOf('percentPrevious') === -1) d.percentPrevious = undefined;
+        if(infomode.indexOf('percentTotal') === -1) d.percentTotal = undefined;
     }
 
     return d;

src/traces/funnel/attributes.js

@@ -10,6 +10,7 @@
 
 var barAttrs = require('../bar/attributes');
 var lineAttrs = require('../scatter/attributes').line;
+var plotAttrs = require('../../plots/attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var Color = require('../../components/color');
 
@@ -23,6 +24,9 @@ module.exports = {
 
     hovertext: barAttrs.hovertext,
     hovertemplate: barAttrs.hovertemplate,
+    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
+        flags: ['percentInitial', 'percentPrevious', 'percentTotal'].concat(plotAttrs.hoverinfo.flags)
+    }),
 
     textinfo: {
         valType: 'flaglist',

src/traces/funnel/event_data.js

@@ -0,0 +1,25 @@
+/**
+* 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 = function eventData(out, pt /* , trace, cd, pointNumber */) {
+    // standard cartesian event data
+    out.x = 'xVal' in pt ? pt.xVal : pt.x;
+    out.y = 'yVal' in pt ? pt.yVal : pt.y;
+
+    // for funnel
+    if('percentInitial' in pt) out.percentInitial = pt.percentInitial;
+    if('percentPrevious' in pt) out.percentPrevious = pt.percentPrevious;
+    if('percentTotal' in pt) out.percentTotal = pt.percentTotal;
+
+    if(pt.xa) out.xaxis = pt.xa;
+    if(pt.ya) out.yaxis = pt.ya;
+
+    return out;
+};

src/traces/funnel/hover.js

@@ -25,16 +25,18 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var di = cd[index];
 
     var sizeLetter = isHorizontal ? 'x' : 'y';
-
     point[sizeLetter + 'LabelVal'] = di.s;
 
-    // display ratio to initial value
-    point.extraText = [
-        formatPercent(di.begR, 1) + ' of initial',
-        formatPercent(di.difR, 1) + ' of previous',
-        formatPercent(di.sumR, 1) + ' of total'
-    ].join('<br>');
-    // TODO: Should we use pieHelpers.formatPieValue instead ?
+    var hoverinfo = trace.hoverinfo;
+    if(hoverinfo !== 'none' && hoverinfo !== 'skip') {
+        var parts = (hoverinfo || '').split('+');
+        var isAll = (hoverinfo === 'all') || (hoverinfo === undefined);
+        var hasFlag = function(flag) { return isAll || parts.indexOf(flag) !== -1; };
+
+        if(hasFlag('percentInitial')) point.percentInitial = formatPercent(di.begR, 1);
+        if(hasFlag('percentPrevious')) point.percentPrevious = formatPercent(di.difR, 1);
+        if(hasFlag('percentTotal')) point.percentTotal = formatPercent(di.sumR, 1);
+    }
 
     point.color = getTraceColor(trace, di);
 

src/traces/funnel/index.js

@@ -19,6 +19,8 @@ module.exports = {
     plot: require('./plot'),
     style: require('./style').style,
     hoverPoints: require('./hover'),
+    eventData: require('./event_data'),
+
     selectPoints: require('../bar/select'),
 
     moduleType: 'trace',

test/jasmine/assets/custom_assertions.js

@@ -98,6 +98,7 @@ function count(selector) {
  *  - vOrder {array of number}
  *  - hOrder {array of number}
  *  - isRotated {boolean}
+ *  - isEmpty {boolean}
  * @param {string} msg
  */
 exports.assertHoverLabelContent = function(expectation, msg) {
@@ -192,11 +193,15 @@ exports.assertHoverLabelContent = function(expectation, msg) {
             }
         });
     } else {
-        if(expectation.nums) {
-            fail(ptMsg + ': expecting *nums* labels, did not find any.');
-        }
-        if(expectation.name) {
-            fail(ptMsg + ': expecting *nums* labels, did not find any.');
+        if(expectation.isEmpty) {
+            return true;
+        } else {
+            if(expectation.nums) {
+                fail(ptMsg + ': expecting *nums* labels, did not find any.');
+            }
+            if(expectation.name) {
+                fail(ptMsg + ': expecting *nums* labels, did not find any.');
+            }
         }
     }
 

test/jasmine/tests/funnel_test.js

@@ -1326,14 +1326,76 @@ describe('funnel hover', function() {
             .then(done);
         });
 
+        it('should turn off percentages with hoveinfo none or skip', function(done) {
+            gd = createGraphDiv();
+
+            var mock = Lib.extendDeep({}, require('@mocks/text_chart_arrays'));
+            mock.data.forEach(function(t, i) {
+                t.type = 'funnel';
+                t.orientation = 'v';
+                if(i === 0) {
+                    t.hoverinfo = 'none';
+                } else {
+                    t.hoverinfo = 'skip';
+                }
+            });
+
+            function _hover() {
+                var evt = { xpx: 125, ypx: 150 };
+                Fx.hover('graph', evt, 'xy');
+            }
+
+            Plotly.plot(gd, mock)
+            .then(_hover)
+            .then(function() {
+                assertHoverLabelContent({
+                    isEmpty: true
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('should turn on percentages with hoveinfo all', function(done) {
+            gd = createGraphDiv();
+
+            var mock = Lib.extendDeep({}, require('@mocks/text_chart_arrays'));
+            mock.data.forEach(function(t) {
+                t.type = 'funnel';
+                t.orientation = 'v';
+                t.hoverinfo = 'all';
+            });
+
+            function _hover() {
+                var evt = { xpx: 125, ypx: 150 };
+                Fx.hover('graph', evt, 'xy');
+            }
+
+            Plotly.plot(gd, mock)
+            .then(_hover)
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: [
+                        '1\nHover text A\n100% of initial\n100% of previous\n33.3% of total',
+                        '2\nHover text G\n100% of initial\n100% of previous\n33.3% of total',
+                        '1.5\na (hover)\n100% of initial\n100% of previous\n33.3% of total'
+                    ],
+                    name: ['Lines, Marke...', 'Lines and Text', 'missing text'],
+                    axis: '0'
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
         it('should use hovertemplate if specified', function(done) {
             gd = createGraphDiv();
 
             var mock = Lib.extendDeep({}, require('@mocks/text_chart_arrays'));
             mock.data.forEach(function(t) {
                 t.type = 'funnel';
                 t.orientation = 'v';
-                t.hovertemplate = '%{y}<extra></extra>';
+                t.hovertemplate = 'Value: %{y}<br>Total percentage: %{percentTotal}<br>Initial percentage: %{percentInitial}<br>Previous percentage: %{percentPrevious}<extra></extra>';
             });
 
             function _hover() {
@@ -1345,11 +1407,14 @@ describe('funnel hover', function() {
             .then(_hover)
             .then(function() {
                 assertHoverLabelContent({
-                    nums: ['1', '2', '1.5'],
+                    nums: [
+                        'Value: 1\nTotal percentage: 33.3%\nInitial percentage: 100%\nPrevious percentage: 100%',
+                        'Value: 2\nTotal percentage: 33.3%\nInitial percentage: 100%\nPrevious percentage: 100%',
+                        'Value: 1.5\nTotal percentage: 33.3%\nInitial percentage: 100%\nPrevious percentage: 100%'
+                    ],
                     name: ['', '', ''],
                     axis: '0'
                 });
-                // return Plotly.restyle(gd, 'text', ['APPLE', 'BANANA', 'ORANGE']);
             })
             .catch(failTest)
             .then(done);