Fix hover with period alignment points and improve positioning of spikes and unified hover label

draftlogs/5846_fix.md

@@ -0,0 +1 @@
+ - Fix misplaced hover with period positioning [[#5846](https://github.com/plotly/plotly.js/pull/5846)]

src/components/fx/hover.js

@@ -1934,7 +1934,10 @@ function getCoord(axLetter, winningPoint, fullLayout) {
     var val = winningPoint[axLetter + 'Val'];
 
     if(ax.type === 'category') val = ax._categoriesMap[val];
-    else if(ax.type === 'date') val = ax.d2c(val);
+    else if(ax.type === 'date') {
+        var period = winningPoint[axLetter + 'Period'];
+        val = ax.d2c(period !== undefined ? period : val);
+    }
 
     var cd0 = winningPoint.cd[winningPoint.index];
     if(cd0 && cd0.t && cd0.t.posLetter === ax._id) {

src/plots/cartesian/align_period.js

@@ -8,21 +8,21 @@ var constants = require('../../constants/numerical');
 var ONEAVGMONTH = constants.ONEAVGMONTH;
 
 module.exports = function alignPeriod(trace, ax, axLetter, vals) {
-    if(ax.type !== 'date') return vals;
+    if(ax.type !== 'date') return {vals: vals};
 
     var alignment = trace[axLetter + 'periodalignment'];
-    if(!alignment) return vals;
+    if(!alignment) return {vals: vals};
 
     var period = trace[axLetter + 'period'];
     var mPeriod;
     if(isNumeric(period)) {
         period = +period;
-        if(period <= 0) return vals;
+        if(period <= 0) return {vals: vals};
     } else if(typeof period === 'string' && period.charAt(0) === 'M') {
         var n = +(period.substring(1));
         if(n > 0 && Math.round(n) === n) {
             mPeriod = n;
-        } else return vals;
+        } else return {vals: vals};
     }
 
     var calendar = ax.calendar;
@@ -35,6 +35,9 @@ module.exports = function alignPeriod(trace, ax, axLetter, vals) {
     var base = dateTime2ms(period0, calendar) || 0;
 
     var newVals = [];
+    var starts = [];
+    var ends = [];
+
     var len = vals.length;
     for(var i = 0; i < len; i++) {
         var v = vals[i];
@@ -77,6 +80,14 @@ module.exports = function alignPeriod(trace, ax, axLetter, vals) {
             isEnd ? endTime :
             (startTime + endTime) / 2
         );
+
+        starts[i] = startTime;
+        ends[i] = endTime;
     }
-    return newVals;
+
+    return {
+        vals: newVals,
+        starts: starts,
+        ends: ends
+    };
 };

src/traces/bar/calc.js

@@ -10,24 +10,24 @@ 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, origPos;
+    var size, pos, origPos, pObj, hasPeriod;
 
     var sizeOpts = {
         msUTC: !!(trace.base || trace.base === 0)
     };
 
-    var hasPeriod;
     if(trace.orientation === 'h') {
         size = xa.makeCalcdata(trace, 'x', sizeOpts);
         origPos = ya.makeCalcdata(trace, 'y');
-        pos = alignPeriod(trace, ya, 'y', origPos);
+        pObj = alignPeriod(trace, ya, 'y', origPos);
         hasPeriod = !!trace.yperiodalignment;
     } else {
         size = ya.makeCalcdata(trace, 'y', sizeOpts);
         origPos = xa.makeCalcdata(trace, 'x');
-        pos = alignPeriod(trace, xa, 'x', origPos);
+        pObj = alignPeriod(trace, xa, 'x', origPos);
         hasPeriod = !!trace.xperiodalignment;
     }
+    pos = pObj.vals;
 
     // create the "calculated data" to plot
     var serieslen = Math.min(pos.length, size.length);
@@ -39,6 +39,8 @@ module.exports = function calc(gd, trace) {
 
         if(hasPeriod) {
             cd[i].orig_p = origPos[i]; // used by hover
+            cd[i].pEnd = pObj.ends[i];
+            cd[i].pStart = pObj.starts[i];
         }
 
         if(trace.ids) {

src/traces/bar/cross_trace_calc.js

@@ -436,12 +436,20 @@ function setBarCenterAndWidth(pa, sieve) {
         var barwidth = t.barwidth;
         var barwidthIsArray = Array.isArray(barwidth);
 
+        var trace = calcTrace[0].trace;
+        var isPeriod = !!trace[pLetter + 'periodalignment'];
+
         for(var j = 0; j < calcTrace.length; j++) {
             var calcBar = calcTrace[j];
 
             // store the actual bar width and position, for use by hover
             var width = calcBar.w = barwidthIsArray ? barwidth[j] : barwidth;
             calcBar[pLetter] = calcBar.p + (poffsetIsArray ? poffset[j] : poffset) + width / 2;
+
+            if(isPeriod) {
+                calcBar.wPeriod =
+                    calcBar.pEnd - calcBar.pStart;
+            }
         }
     }
 }

src/traces/bar/hover.js

@@ -57,10 +57,9 @@ function hoverOnBars(pointData, xval, yval, hovermode, opts) {
     function thisBarMaxPos(di) { return thisBarExtPos(di, 1); }
 
     function thisBarExtPos(di, sgn) {
-        if(period) {
-            return di.p + sgn * Math.abs(di.p - di.orig_p);
-        }
-        return di[posLetter] + sgn * di.w / 2;
+        var w = (period) ? di.wPeriod : di.w;
+
+        return di[posLetter] + sgn * w / 2;
     }
 
     var minPos = isClosest || period ?
@@ -180,6 +179,9 @@ function hoverOnBars(pointData, xval, yval, hovermode, opts) {
 
     var hasPeriod = di.orig_p !== undefined;
     pointData[posLetter + 'LabelVal'] = hasPeriod ? di.orig_p : di.p;
+    if(hasPeriod) {
+        pointData[posLetter + 'Period'] = di.p;
+    }
 
     pointData.labelLabel = hoverLabelText(pa, pointData[posLetter + 'LabelVal'], trace[posLetter + 'hoverformat']);
     pointData.valueLabel = hoverLabelText(sa, pointData[sizeLetter + 'LabelVal'], trace[sizeLetter + 'hoverformat']);

src/traces/box/calc.js

@@ -311,7 +311,7 @@ function getPosArrays(trace, posLetter, posAxis, num) {
 
     if(hasPosArray || (hasPos0 && hasPosStep)) {
         var origPos = posAxis.makeCalcdata(trace, posLetter);
-        var pos = alignPeriod(trace, posAxis, posLetter, origPos);
+        var pos = alignPeriod(trace, posAxis, posLetter, origPos).vals;
         return [pos, origPos];
     }
 

src/traces/candlestick/calc.js

@@ -12,7 +12,7 @@ module.exports = function(gd, trace) {
     var ya = Axes.getFromId(gd, trace.yaxis);
 
     var origX = xa.makeCalcdata(trace, 'x');
-    var x = alignPeriod(trace, xa, 'x', origX);
+    var x = alignPeriod(trace, xa, 'x', origX).vals;
 
     var cd = calcCommon(gd, trace, origX, x, ya, ptFunc);
 

src/traces/funnel/calc.js

@@ -9,20 +9,20 @@ 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, origPos, i, cdi;
+    var size, pos, origPos, pObj, hasPeriod, i, cdi;
 
-    var hasPeriod;
     if(trace.orientation === 'h') {
         size = xa.makeCalcdata(trace, 'x');
         origPos = ya.makeCalcdata(trace, 'y');
-        pos = alignPeriod(trace, ya, 'y', origPos);
+        pObj = alignPeriod(trace, ya, 'y', origPos);
         hasPeriod = !!trace.yperiodalignment;
     } else {
         size = ya.makeCalcdata(trace, 'y');
         origPos = xa.makeCalcdata(trace, 'x');
-        pos = alignPeriod(trace, xa, 'x', origPos);
+        pObj = alignPeriod(trace, xa, 'x', origPos);
         hasPeriod = !!trace.xperiodalignment;
     }
+    pos = pObj.vals;
 
     // create the "calculated data" to plot
     var serieslen = Math.min(pos.length, size.length);
@@ -55,6 +55,8 @@ module.exports = function calc(gd, trace) {
 
         if(hasPeriod) {
             cd[i].orig_p = origPos[i]; // used by hover
+            cd[i].pEnd = pObj.ends[i];
+            cd[i].pStart = pObj.starts[i];
         }
 
         if(trace.ids) {

src/traces/heatmap/calc.js

@@ -54,8 +54,8 @@ module.exports = function calc(gd, trace) {
         } else {
             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);
+            x = alignPeriod(trace, xa, 'x', origX).vals;
+            y = alignPeriod(trace, ya, 'y', origY).vals;
             trace._x = x;
             trace._y = y;
         }

src/traces/heatmap/convert_column_xyz.js

@@ -8,8 +8,8 @@ module.exports = function convertColumnData(trace, ax1, ax2, var1Name, var2Name,
     var colLen = trace._length;
     var col1 = ax1.makeCalcdata(trace, var1Name);
     var col2 = ax2.makeCalcdata(trace, var2Name);
-    col1 = alignPeriod(trace, ax1, var1Name, col1);
-    col2 = alignPeriod(trace, ax2, var2Name, col2);
+    col1 = alignPeriod(trace, ax1, var1Name, col1).vals;
+    col2 = alignPeriod(trace, ax2, var2Name, col2).vals;
 
     var textCol = trace.text;
     var hasColumnText = (textCol !== undefined && Lib.isArray1D(textCol));

src/traces/ohlc/calc.js

@@ -144,7 +144,7 @@ function convertTickWidth(gd, xa, trace) {
                 var origX = xa.makeCalcdata(tracei, 'x');
                 tracei._origX = origX;
 
-                var xcalc = alignPeriod(trace, xa, 'x', origX);
+                var xcalc = alignPeriod(trace, xa, 'x', origX).vals;
                 tracei._xcalc = xcalc;
 
                 var _minDiff = Lib.distinctVals(xcalc).minDiff;

src/traces/scatter/calc.js

@@ -18,8 +18,8 @@ function calc(gd, trace) {
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
     var origX = xa.makeCalcdata(trace, 'x');
     var origY = ya.makeCalcdata(trace, 'y');
-    var x = alignPeriod(trace, xa, 'x', origX);
-    var y = alignPeriod(trace, ya, 'y', origY);
+    var x = alignPeriod(trace, xa, 'x', origX).vals;
+    var y = alignPeriod(trace, ya, 'y', origY).vals;
 
     var serieslen = trace._length;
     var cd = new Array(serieslen);

src/traces/scatter/hover.js

@@ -28,14 +28,12 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
             var rad = Math.max(3, di.mrc || 0);
             var kink = 1 - 1 / rad;
             var dxRaw = Math.abs(xa.c2p(di.x) - xpx);
-            if(di.orig_x !== undefined) dxRaw += xa.c2p(di.orig_x) - xa.c2p(di.x);
             return (dxRaw < rad) ? (kink * dxRaw / rad) : (dxRaw - rad + kink);
         };
         var dy = function(di) {
             var rad = Math.max(3, di.mrc || 0);
             var kink = 1 - 1 / rad;
             var dyRaw = Math.abs(ya.c2p(di.y) - ypx);
-            if(di.orig_y !== undefined) dyRaw += ya.c2p(di.orig_y) - ya.c2p(di.y);
             return (dyRaw < rad) ? (kink * dyRaw / rad) : (dyRaw - rad + kink);
         };
         var dxy = function(di) {
@@ -89,6 +87,9 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
                 hovertemplate: trace.hovertemplate
             });
 
+            if(di.orig_x !== undefined) pointData.xPeriod = di.x;
+            if(di.orig_y !== undefined) pointData.yPeriod = di.y;
+
             fillText(di, trace, pointData);
             Registry.getComponentMethod('errorbars', 'hoverInfo')(di, trace, pointData);
 

src/traces/scattergl/calc.js

@@ -31,8 +31,8 @@ module.exports = function calc(gd, trace) {
 
     var origX = xa.makeCalcdata(trace, 'x');
     var origY = ya.makeCalcdata(trace, 'y');
-    var x = alignPeriod(trace, xa, 'x', origX);
-    var y = alignPeriod(trace, ya, 'y', origY);
+    var x = alignPeriod(trace, xa, 'x', origX).vals;
+    var y = alignPeriod(trace, ya, 'y', origY).vals;
     trace._x = x;
     trace._y = y;
 

src/traces/scattergl/hover.js

@@ -41,42 +41,43 @@ function hoverPoints(pointData, xval, yval, hovermode) {
 
     // pick the id closest to the point
     // note that point possibly may not be found
-    var id, ptx, pty, i, dx, dy, dist, dxy;
+    var k, closestId, ptx, pty, i, dx, dy, dist, dxy;
 
     var minDist = maxDistance;
     if(hovermode === 'x') {
         for(i = 0; i < ids.length; i++) {
-            ptx = x[ids[i]];
+            k = ids[i];
+            ptx = x[k];
             dx = Math.abs(xa.c2p(ptx) - xpx);
-            if(trace._origX && trace._origX[i] !== undefined) dx += xa.c2p(trace._origX[i]) - xa.c2p(ptx);
             if(dx < minDist) {
                 minDist = dx;
-                dy = ya.c2p(y[ids[i]]) - ypx;
-                if(trace._origY && trace._origY[i] !== undefined) dy += ya.c2p(trace._origY[i]) - ya.c2p(pty);
+                pty = y[k];
+                dy = ya.c2p(pty) - ypx;
                 dxy = Math.sqrt(dx * dx + dy * dy);
-                id = ids[i];
+                closestId = ids[i];
             }
         }
     } else {
         for(i = ids.length - 1; i > -1; i--) {
-            ptx = x[ids[i]];
-            pty = y[ids[i]];
+            k = ids[i];
+            ptx = x[k];
+            pty = y[k];
             dx = xa.c2p(ptx) - xpx;
             dy = ya.c2p(pty) - ypx;
 
             dist = Math.sqrt(dx * dx + dy * dy);
             if(dist < minDist) {
                 minDist = dxy = dist;
-                id = ids[i];
+                closestId = k;
             }
         }
     }
 
-    pointData.index = id;
+    pointData.index = closestId;
     pointData.distance = minDist;
     pointData.dxy = dxy;
 
-    if(id === undefined) return [pointData];
+    if(closestId === undefined) return [pointData];
 
     return [calcHover(pointData, x, y, trace)];
 }
@@ -176,6 +177,9 @@ function calcHover(pointData, x, y, trace) {
         hovertemplate: di.ht
     });
 
+    if(origX) pointData2.xPeriod = di.x;
+    if(origY) pointData2.yPeriod = di.y;
+
     if(di.htx) pointData2.text = di.htx;
     else if(di.tx) pointData2.text = di.tx;
     else if(trace.text) pointData2.text = trace.text;

src/traces/waterfall/calc.js

@@ -17,20 +17,20 @@ function isTotal(a) {
 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, origPos;
+    var size, pos, origPos, pObj, hasPeriod;
 
-    var hasPeriod;
     if(trace.orientation === 'h') {
         size = xa.makeCalcdata(trace, 'x');
         origPos = ya.makeCalcdata(trace, 'y');
-        pos = alignPeriod(trace, ya, 'y', origPos);
+        pObj = alignPeriod(trace, ya, 'y', origPos);
         hasPeriod = !!trace.yperiodalignment;
     } else {
         size = ya.makeCalcdata(trace, 'y');
         origPos = xa.makeCalcdata(trace, 'x');
-        pos = alignPeriod(trace, xa, 'x', origPos);
+        pObj = alignPeriod(trace, xa, 'x', origPos);
         hasPeriod = !!trace.xperiodalignment;
     }
+    pos = pObj.vals;
 
     // create the "calculated data" to plot
     var serieslen = Math.min(pos.length, size.length);
@@ -85,6 +85,8 @@ module.exports = function calc(gd, trace) {
 
         if(hasPeriod) {
             cd[i].orig_p = origPos[i]; // used by hover
+            cd[i].pEnd = pObj.ends[i];
+            cd[i].pStart = pObj.starts[i];
         }
 
         if(trace.ids) {