add %{label} & %{value} to bar hovertemplate

Author: etpinard

Diff for: src/traces/bar/constants.js

@@ -10,6 +10,11 @@
 'use strict';
 
 module.exports = {
-    TEXTPAD: 3, // padding in pixels around text
-    eventDataKeys: []
+    // padding in pixels around text
+    TEXTPAD: 3,
+    // 'value' and 'label' are not really necessary for bar traces,
+    // but they were made available to `texttemplate` (maybe by accident)
+    // via tokens `%{value}` and `%{label}` starting in 1.50.0,
+    // so let's include them in the event data also.
+    eventDataKeys: ['value', 'label']
 };

Diff for: src/traces/bar/event_data.js

@@ -0,0 +1,27 @@
+/**
+* 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) {
+    // standard cartesian event data
+    out.x = 'xVal' in pt ? pt.xVal : pt.x;
+    out.y = 'yVal' in pt ? pt.yVal : pt.y;
+    if(pt.xa) out.xaxis = pt.xa;
+    if(pt.ya) out.yaxis = pt.ya;
+
+    if(trace.orientation === 'h') {
+        out.label = out.y;
+        out.value = out.x;
+    } else {
+        out.label = out.x;
+        out.value = out.y;
+    }
+
+    return out;
+};

Diff for: src/traces/bar/hover.js

@@ -15,6 +15,7 @@ var Color = require('../../components/color');
 
 var fillText = require('../../lib').fillText;
 var getLineWidth = require('./helpers').getLineWidth;
+var hoverLabelText = require('../../plots/cartesian/axes').hoverLabelText;
 
 function hoverPoints(pointData, xval, yval, hovermode) {
     var barPointData = hoverOnBars(pointData, xval, yval, hovermode);
@@ -151,6 +152,9 @@ function hoverOnBars(pointData, xval, yval, hovermode) {
     pointData[posLetter + '1'] = pa.c2p(isClosest ? maxPos(di) : extent[1], true);
     pointData[posLetter + 'LabelVal'] = di.p;
 
+    pointData.labelLabel = hoverLabelText(pa, pointData[posLetter + 'LabelVal']);
+    pointData.valueLabel = hoverLabelText(sa, pointData[sizeLetter + 'LabelVal']);
+
     // spikelines always want "closest" distance regardless of hovermode
     pointData.spikeDistance = (sizeFn(di) + thisBarPositionFn(di)) / 2 + maxSpikeDistance - maxHoverDistance;
     // they also want to point to the data value, regardless of where the label goes

Diff for: src/traces/bar/index.js

@@ -22,6 +22,7 @@ module.exports = {
     style: require('./style').style,
     styleOnSelect: require('./style').styleOnSelect,
     hoverPoints: require('./hover').hoverPoints,
+    eventData: require('./event_data'),
     selectPoints: require('./select'),
 
     moduleType: 'trace',

Diff for: test/jasmine/tests/bar_test.js

@@ -2325,6 +2325,50 @@ describe('bar hover', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should allow both x/y tokens and label/value tokens', function(done) {
+            gd = createGraphDiv();
+
+            function _hover(xpx, ypx) {
+                return function() {
+                    Fx.hover(gd, {xpx: xpx, ypx: ypx}, 'xy');
+                    Lib.clearThrottle();
+                };
+            }
+
+            Plotly.plot(gd, {
+                data: [{
+                    type: 'bar',
+                    x: ['a', 'b'],
+                    y: ['1000', '1200'],
+                    hovertemplate: ['%{x} is %{y}', '%{label} is %{value}']
+                }],
+                layout: {
+                    xaxis: { tickprefix: '*', ticksuffix: '*' },
+                    yaxis: { tickprefix: '$', ticksuffix: ' !', tickformat: '.2f'},
+                    width: 400,
+                    height: 400,
+                    margin: {l: 0, t: 0, r: 0, b: 0},
+                    hovermode: 'closest'
+                }
+            })
+            .then(_hover(100, 200))
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: '*a* is $1000.00 !',
+                    name: 'trace 0'
+                });
+            })
+            .then(_hover(300, 200))
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: '*b* is $1200.00 !',
+                    name: 'trace 0'
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('with special width/offset combinations', function() {