fix hover for funnel, waterfall, heatmap, contour, box, ohlc, candlestick and histograms

 - and do not support violin for now

Author: archmoj

src/traces/bar/calc.js

@@ -18,7 +18,7 @@ var calcSelection = require('../scatter/calc_selection');
 module.exports = function calc(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis || 'x');
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
-    var size, pos, oPos;
+    var size, pos, origPos;
 
     var sizeOpts = {
         msUTC: !!(trace.base || trace.base === 0)
@@ -27,13 +27,13 @@ module.exports = function calc(gd, trace) {
     var hasPeriod;
     if(trace.orientation === 'h') {
         size = xa.makeCalcdata(trace, 'x', sizeOpts);
-        oPos = ya.makeCalcdata(trace, 'y');
-        pos = alignPeriod(trace, ya, 'y', oPos);
+        origPos = ya.makeCalcdata(trace, 'y');
+        pos = alignPeriod(trace, ya, 'y', origPos);
         hasPeriod = !!trace.yperiodalignment;
     } else {
         size = ya.makeCalcdata(trace, 'y', sizeOpts);
-        oPos = xa.makeCalcdata(trace, 'x');
-        pos = alignPeriod(trace, xa, 'x', oPos);
+        origPos = xa.makeCalcdata(trace, 'x');
+        pos = alignPeriod(trace, xa, 'x', origPos);
         hasPeriod = !!trace.xperiodalignment;
     }
 
@@ -46,7 +46,7 @@ module.exports = function calc(gd, trace) {
         cd[i] = { p: pos[i], s: size[i] };
 
         if(hasPeriod) {
-            cd[i].orig_p = oPos[i]; // used by hover
+            cd[i].orig_p = origPos[i]; // used by hover
         }
 
         if(trace.ids) {

src/traces/box/calc.js

@@ -30,19 +30,24 @@ module.exports = function calc(gd, trace) {
     var valAxis, valLetter;
     var posAxis, posLetter;
 
+    var hasPeriod;
     if(trace.orientation === 'h') {
         valAxis = xa;
         valLetter = 'x';
         posAxis = ya;
         posLetter = 'y';
+        hasPeriod = !!trace.yperiodalignment;
     } else {
         valAxis = ya;
         valLetter = 'y';
         posAxis = xa;
         posLetter = 'x';
+        hasPeriod = !!trace.xperiodalignment;
     }
 
-    var posArray = getPos(trace, posLetter, posAxis, fullLayout[numKey]);
+    var allPosArrays = getPosArrays(trace, posLetter, posAxis, fullLayout[numKey]);
+    var posArray = allPosArrays[0];
+    var origPos = allPosArrays[1];
     var dv = Lib.distinctVals(posArray);
     var posDistinct = dv.vals;
     var dPos = dv.minDiff / 2;
@@ -78,6 +83,9 @@ module.exports = function calc(gd, trace) {
 
             cdi = {};
             cdi.pos = cdi[posLetter] = posi;
+            if(hasPeriod && origPos) {
+                cdi.orig_p = origPos[i]; // used by hover
+            }
 
             cdi.q1 = d2c('q1');
             cdi.med = d2c('median');
@@ -304,15 +312,15 @@ module.exports = function calc(gd, trace) {
 // so if you want one box
 // per trace, set x0 (y0) to the x (y) value or category for this trace
 // (or set x (y) to a constant array matching y (x))
-function getPos(trace, posLetter, posAxis, num) {
+function getPosArrays(trace, posLetter, posAxis, num) {
     var hasPosArray = posLetter in trace;
     var hasPos0 = posLetter + '0' in trace;
     var hasPosStep = 'd' + posLetter in trace;
 
     if(hasPosArray || (hasPos0 && hasPosStep)) {
-        var pos = posAxis.makeCalcdata(trace, posLetter);
-        pos = alignPeriod(trace, posAxis, posLetter, pos);
-        return pos;
+        var origPos = posAxis.makeCalcdata(trace, posLetter);
+        var pos = alignPeriod(trace, posAxis, posLetter, origPos);
+        return [pos, origPos];
     }
 
     var pos0;
@@ -340,7 +348,7 @@ function getPos(trace, posLetter, posAxis, num) {
     var out = new Array(len);
     for(var i = 0; i < len; i++) out[i] = pos0c;
 
-    return out;
+    return [out];
 }
 
 function makeBins(x, dx) {

src/traces/box/hover.js

@@ -143,7 +143,7 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
     pointData[pLetter + '0'] = pAxis.c2p(di.pos + t.bPos - boxDeltaNeg, true);
     pointData[pLetter + '1'] = pAxis.c2p(di.pos + t.bPos + boxDeltaPos, true);
 
-    pointData[pLetter + 'LabelVal'] = di.pos;
+    pointData[pLetter + 'LabelVal'] = di.orig_p !== undefined ? di.orig_p : di.pos;
 
     var spikePosAttr = pLetter + 'Spike';
     pointData.spikeDistance = dxy(di) * spikePseudoDistance / hoverPseudoDistance;
@@ -257,14 +257,16 @@ function hoverOnPoints(pointData, xval, yval) {
         hovertemplate: trace.hovertemplate
     });
 
+    var origPos = di.orig_p;
+    var pos = origPos !== undefined ? origPos : di.pos;
     var pa;
     if(trace.orientation === 'h') {
         pa = ya;
         closePtData.xLabelVal = pt.x;
-        closePtData.yLabelVal = di.pos;
+        closePtData.yLabelVal = pos;
     } else {
         pa = xa;
-        closePtData.xLabelVal = di.pos;
+        closePtData.xLabelVal = pos;
         closePtData.yLabelVal = pt.y;
     }
 

src/traces/candlestick/calc.js

@@ -19,10 +19,10 @@ module.exports = function(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis);
     var ya = Axes.getFromId(gd, trace.yaxis);
 
-    var x = xa.makeCalcdata(trace, 'x');
-    x = alignPeriod(trace, xa, 'x', x);
+    var origX = xa.makeCalcdata(trace, 'x');
+    var x = alignPeriod(trace, xa, 'x', origX);
 
-    var cd = calcCommon(gd, trace, x, ya, ptFunc);
+    var cd = calcCommon(gd, trace, origX, x, ya, ptFunc);
 
     if(cd.length) {
         Lib.extendFlat(cd[0].t, {

src/traces/funnel/calc.js

@@ -17,16 +17,19 @@ var BADNUM = require('../../constants/numerical').BADNUM;
 module.exports = function calc(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis || 'x');
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
-    var size, pos, i, cdi;
+    var size, pos, origPos, i, cdi;
 
+    var hasPeriod;
     if(trace.orientation === 'h') {
         size = xa.makeCalcdata(trace, 'x');
-        pos = ya.makeCalcdata(trace, 'y');
-        pos = alignPeriod(trace, ya, 'y', pos);
+        origPos = ya.makeCalcdata(trace, 'y');
+        pos = alignPeriod(trace, ya, 'y', origPos);
+        hasPeriod = !!trace.yperiodalignment;
     } else {
         size = ya.makeCalcdata(trace, 'y');
-        pos = xa.makeCalcdata(trace, 'x');
-        pos = alignPeriod(trace, xa, 'x', pos);
+        origPos = xa.makeCalcdata(trace, 'x');
+        pos = alignPeriod(trace, xa, 'x', origPos);
+        hasPeriod = !!trace.xperiodalignment;
     }
 
     // create the "calculated data" to plot
@@ -58,6 +61,10 @@ module.exports = function calc(gd, trace) {
 
         trace._base[i] = -0.5 * cdi.s;
 
+        if(hasPeriod) {
+            cd[i].orig_p = origPos[i]; // used by hover
+        }
+
         if(trace.ids) {
             cdi.id = String(trace.ids[i]);
         }

src/traces/heatmap/calc.js

@@ -31,28 +31,26 @@ module.exports = function calc(gd, trace) {
     var isHist = Registry.traceIs(trace, 'histogram');
     var isGL2D = Registry.traceIs(trace, 'gl2d');
     var zsmooth = isContour ? 'best' : trace.zsmooth;
-    var x;
-    var x0;
-    var dx;
-    var y;
-    var y0;
-    var dy;
-    var z;
-    var i;
-    var binned;
+    var x, x0, dx, origX;
+    var y, y0, dy, origY;
+    var z, i, binned;
 
     // cancel minimum tick spacings (only applies to bars and boxes)
     xa._minDtick = 0;
     ya._minDtick = 0;
 
     if(isHist) {
         binned = histogram2dCalc(gd, trace);
+        origX = binned.orig_x;
         x = binned.x;
         x0 = binned.x0;
         dx = binned.dx;
+
+        origY = binned.orig_y;
         y = binned.y;
         y0 = binned.y0;
         dy = binned.dy;
+
         z = binned.z;
     } else {
         var zIn = trace.z;
@@ -62,10 +60,10 @@ module.exports = function calc(gd, trace) {
             y = trace._y;
             zIn = trace._z;
         } else {
-            x = trace._x = trace.x ? xa.makeCalcdata(trace, 'x') : [];
-            y = trace.y ? ya.makeCalcdata(trace, 'y') : [];
-            x = alignPeriod(trace, xa, 'x', x);
-            y = alignPeriod(trace, ya, 'y', y);
+            origX = trace.x ? xa.makeCalcdata(trace, 'x') : [];
+            origY = trace.y ? ya.makeCalcdata(trace, 'y') : [];
+            x = alignPeriod(trace, xa, 'x', origX);
+            y = alignPeriod(trace, ya, 'y', origY);
             trace._x = x;
             trace._y = y;
         }
@@ -149,6 +147,13 @@ module.exports = function calc(gd, trace) {
         hovertext: trace._hovertext || trace.hovertext
     };
 
+    if(trace.xperiodalignment && origX) {
+        cd0.orig_x = origX;
+    }
+    if(trace.yperiodalignment && origY) {
+        cd0.orig_y = origY;
+    }
+
     if(xIn && xIn.length === xArray.length - 1) cd0.xCenter = xIn;
     if(yIn && yIn.length === yArray.length - 1) cd0.yCenter = yIn;
 

src/traces/heatmap/hover.js

@@ -70,14 +70,21 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay
     var y0 = ya.c2p(y[ny]);
     var y1 = ya.c2p(y[ny + 1]);
 
+    var _x, _y;
     if(contour) {
+        _x = cd0.orig_x || x;
+        _y = cd0.orig_y || y;
+
         x1 = x0;
-        xl = x[nx];
+        xl = _x[nx];
         y1 = y0;
-        yl = y[ny];
+        yl = _y[ny];
     } else {
-        xl = xc ? xc[nx] : ((x[nx] + x[nx + 1]) / 2);
-        yl = yc ? yc[ny] : ((y[ny] + y[ny + 1]) / 2);
+        _x = cd0.orig_x || xc || x;
+        _y = cd0.orig_y || yc || y;
+
+        xl = xc ? _x[nx] : ((_x[nx] + _x[nx + 1]) / 2);
+        yl = yc ? _y[ny] : ((_y[ny] + _y[ny + 1]) / 2);
 
         if(xa && xa.type === 'category') xl = x[nx];
         if(ya && ya.type === 'category') yl = y[ny];

src/traces/histogram/calc.js

@@ -24,16 +24,19 @@ var getBinSpanLabelRound = require('./bin_label_vals');
 function calc(gd, trace) {
     var pos = [];
     var size = [];
-    var pa = Axes.getFromId(gd, trace.orientation === 'h' ? trace.yaxis : trace.xaxis);
-    var mainData = trace.orientation === 'h' ? 'y' : 'x';
+    var isHorizontal = trace.orientation === 'h';
+    var pa = Axes.getFromId(gd, isHorizontal ? trace.yaxis : trace.xaxis);
+    var mainData = isHorizontal ? 'y' : 'x';
     var counterData = {x: 'y', y: 'x'}[mainData];
     var calendar = trace[mainData + 'calendar'];
+    var hasPeriod = trace[mainData + 'periodalignment'];
     var cumulativeSpec = trace.cumulative;
     var i;
 
     var binsAndPos = calcAllAutoBins(gd, trace, pa, mainData);
     var binSpec = binsAndPos[0];
     var pos0 = binsAndPos[1];
+    var origPos = binsAndPos[2];
 
     var nonuniformBins = typeof binSpec.size === 'string';
     var binEdges = [];
@@ -186,13 +189,21 @@ function calc(gd, trace) {
                 b: 0
             };
 
+            if(hasPeriod) {
+                cdi.orig_p = origPos[i];
+            }
+
             // setup hover and event data fields,
             // N.B. pts and "hover" positions ph0/ph1 don't seem to make much sense
             // for cumulative distributions
             if(!cumulativeSpec.enabled) {
                 cdi.pts = inputPoints[i];
                 if(uniqueValsPerBin) {
-                    cdi.ph0 = cdi.ph1 = (inputPoints[i].length) ? pos0[inputPoints[i][0]] : pos[i];
+                    if(hasPeriod) {
+                        cdi.ph0 = cdi.ph1 = cdi.pts.length ? origPos[cdi.pts[0]] : cdi.orig_p;
+                    } else {
+                        cdi.ph0 = cdi.ph1 = cdi.pts.length ? pos0[cdi.pts[0]] : cdi.p;
+                    }
                 } else {
                     // Defer evaluation of ph(0|1) in crossTraceCalc
                     trace._computePh = true;
@@ -234,7 +245,7 @@ function calcAllAutoBins(gd, trace, pa, mainData, _overlayEdgeCase) {
     var groupName = trace['_' + mainData + 'bingroup'];
     var binOpts = fullLayout._histogramBinOpts[groupName];
     var isOverlay = fullLayout.barmode === 'overlay';
-    var i, traces, tracei, calendar, pos0, autoVals, cumulativeSpec;
+    var i, traces, tracei, calendar, pos0, origPos, autoVals, cumulativeSpec;
 
     var r2c = function(v) { return pa.r2c(v, 0, calendar); };
     var c2r = function(v) { return pa.c2r(v, 0, calendar); };
@@ -273,8 +284,8 @@ function calcAllAutoBins(gd, trace, pa, mainData, _overlayEdgeCase) {
 
             if(tracei.visible) {
                 var mainDatai = binOpts.dirs[i];
-                pos0 = pa.makeCalcdata(tracei, mainDatai);
-                pos0 = alignPeriod(trace, pa, mainData, pos0);
+                origPos = pa.makeCalcdata(tracei, mainDatai);
+                pos0 = alignPeriod(trace, pa, mainData, origPos);
                 tracei['_' + mainDatai + 'pos0'] = pos0;
 
                 allPos = Lib.concat(allPos, pos0);
@@ -323,7 +334,7 @@ function calcAllAutoBins(gd, trace, pa, mainData, _overlayEdgeCase) {
             // Several single-valued histograms! Stop infinite recursion,
             // just return an extra flag that tells handleSingleValueOverlays
             // to sort out this trace too
-            if(_overlayEdgeCase) return [newBinSpec, pos0, true];
+            if(_overlayEdgeCase) return [newBinSpec, pos0, origPos, true];
 
             newBinSpec = handleSingleValueOverlays(gd, trace, pa, mainData, binAttr);
         }
@@ -410,7 +421,7 @@ function calcAllAutoBins(gd, trace, pa, mainData, _overlayEdgeCase) {
         delete trace[autoBinAttr];
     }
 
-    return [traceBinOptsCalc, pos0];
+    return [traceBinOptsCalc, pos0, origPos, false];
 }
 
 /*
@@ -444,7 +455,7 @@ function handleSingleValueOverlays(gd, trace, pa, mainData, binAttr) {
         } else {
             var resulti = calcAllAutoBins(gd, tracei, pa, mainData, true);
             var binSpeci = resulti[0];
-            var isSingleValued = resulti[2];
+            var isSingleValued = resulti[3];
 
             // so we can use this result when we get to tracei in the normal
             // course of events, mark it as done and put _pos0 back