switch xvals/yvals in hover/click data to return actual data values rather than calcdata

Author: emilykl

src/components/fx/click.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Registry = require('../../registry');
+var helpers = require('./helpers');
 var hover = require('./hover').hover;
 
 module.exports = function click(gd, evt, subplot) {
@@ -21,8 +22,8 @@ module.exports = function click(gd, evt, subplot) {
         // get coordinate values from latest hover call, if available
         clickData.xaxes ??= gd._hoverXAxes;
         clickData.yaxes ??= gd._hoverYAxes;
-        clickData.xvals ??= gd._hoverXVals;
-        clickData.yvals ??= gd._hoverYVals;
+        clickData.xvals ??= gd._hoverXVals && helpers.c2dApply(gd._hoverXAxes, gd._hoverXVals);
+        clickData.yvals ??= gd._hoverYVals && helpers.c2dApply(gd._hoverYAxes, gd._hoverYVals);
 
         gd.emit('plotly_click', clickData);
     }

src/components/fx/helpers.js

@@ -44,6 +44,39 @@ exports.p2c = function (axArray, v) {
     return out;
 };
 
+/*
+ * Given an array of calcdata values and an array of axes corresponding to each value,
+ * convert the calcdata values to data values by calling the `c2d` method of each axis.
+ *
+ * This function is intended to be used in constructing hover and click events,
+ * for converting x/y values from calc space to data space. axArray and valArray are arrays
+ * rather than single values because in the case of stacked subplots, there may be multiple axes
+ * (and therefore multiple data values) corresponding to a single hover or click event.
+ *
+ * For linear and log axes, this conversion has no effect beyond validating the inputs.
+ * However, for some axes types, the converted values may be of a different type than the
+ * inputs:
+ *  - For category axes, `c2d` converts calcdata values (numeric) into category labels (strings)
+ *  - For date axes, `c2d` converts calcdata values (numeric values in ms) into date strings
+ *
+ * For axes which don't define `c2d` (e.g. geo, map), the inputs are passed through untouched.
+ *
+ * @param {Array} axArray : axes corresponding to each value in valArray
+ * @param {Array} valArray : calcdata values
+ * @return {Array} : data values, computed by calling `ax.c2d` (if defined) on each input value
+ */
+exports.c2dApply = function (axArray, valArray) {
+    if(axArray.length !== valArray.length) {
+        Lib.warn('c2dApply: axArray and valArray must be the same length');
+    }
+    var out = new Array(valArray.length);
+    for (var i = 0; i < valArray.length; i++) {
+        var ax = axArray && axArray[i];
+        out[i] = ax && ax.c2d ? ax.c2d(valArray[i]) : valArray[i];
+    }
+    return out;
+};
+
 exports.getDistanceFunction = function (mode, dx, dy, dxy) {
     if (mode === 'closest') return dxy || exports.quadrature(dx, dy);
     return mode.charAt(0) === 'x' ? dx : dy;

src/components/fx/hover.js

@@ -976,8 +976,8 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
             points: points,
             xaxes: xaArray,
             yaxes: yaArray,
-            xvals: xvalArray,
-            yvals: yvalArray
+            xvals: helpers.c2dApply(xaArray, xvalArray),
+            yvals: helpers.c2dApply(yaArray, yvalArray)
         });
     }
 }