display start and end periods on hover

Author: archmoj

src/components/fx/hover.js

@@ -20,6 +20,7 @@ var Drawing = require('../drawing');
 var Color = require('../color');
 var dragElement = require('../dragelement');
 var Axes = require('../../plots/cartesian/axes');
+var instanceOrPeriod = require('../../plots/cartesian/instance_or_period');
 var Registry = require('../../registry');
 
 var helpers = require('./helpers');
@@ -1589,11 +1590,17 @@ function cleanPoint(d, hovermode) {
 
     // and convert the x and y label values into formatted text
     if(d.xLabelVal !== undefined) {
-        d.xLabel = ('xLabel' in d) ? d.xLabel : Axes.hoverLabelText(d.xa, d.xLabelVal);
+        if(!('xLabel' in d)) {
+            var xx = instanceOrPeriod(d, trace, 'x');
+            d.xLabel = Axes.hoverLabelText(d.xa, xx[0], xx[1]);
+        }
         d.xVal = d.xa.c2d(d.xLabelVal);
     }
     if(d.yLabelVal !== undefined) {
-        d.yLabel = ('yLabel' in d) ? d.yLabel : Axes.hoverLabelText(d.ya, d.yLabelVal);
+        if(!('yLabel' in d)) {
+            var yy = instanceOrPeriod(d, trace, 'y');
+            d.yLabel = Axes.hoverLabelText(d.ya, yy[0], yy[1]);
+        }
         d.yVal = d.ya.c2d(d.yLabelVal);
     }
 

src/plots/cartesian/instance_or_period.js

@@ -0,0 +1,34 @@
+/**
+* Copyright 2012-2020, 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';
+
+var alignPeriod = require('./align_period');
+
+module.exports = function instanceOrPeriod(d, trace, axLetter) {
+    var ax = d[axLetter + 'a'];
+    if(trace[axLetter + 'period']) {
+        var vals = [
+            d[axLetter + 'LabelVal']
+        ];
+
+        var mockTrace = {};
+        mockTrace[axLetter + 'period'] = trace[axLetter + 'period'];
+        mockTrace[axLetter + 'period0'] = trace[axLetter + 'period0'];
+        var alignment = axLetter + 'periodalignment';
+
+        mockTrace[alignment] = 'start';
+        var startTime = alignPeriod(mockTrace, ax, axLetter, vals)[0];
+
+        mockTrace[alignment] = 'end';
+        var endTime = alignPeriod(mockTrace, ax, axLetter, vals)[0];
+
+        return [startTime, endTime];
+    }
+    return [d[axLetter + 'LabelVal']];
+};

src/traces/histogram/hover.js

@@ -11,6 +11,7 @@
 
 var barHover = require('../bar/hover').hoverPoints;
 var hoverLabelText = require('../../plots/cartesian/axes').hoverLabelText;
+var instanceOrPeriod = require('../../plots/cartesian/instance_or_period');
 
 module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var pts = barHover(pointData, xval, yval, hovermode);
@@ -23,8 +24,11 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
 
     if(!trace.cumulative.enabled) {
         var posLetter = trace.orientation === 'h' ? 'y' : 'x';
-
-        pointData[posLetter + 'Label'] = hoverLabelText(pointData[posLetter + 'a'], di.ph0, di.ph1);
+        var pp = instanceOrPeriod(pointData, trace, posLetter);
+        var ax = pointData[posLetter + 'a'];
+        var label = hoverLabelText(ax, di.ph0, di.ph1);
+        if(pp[1] !== undefined) label += ' - ' + hoverLabelText(ax, pp[0], pp[1]);
+        pointData[posLetter + 'Label'] = label;
     }
 
     return pts;

src/traces/histogram2d/hover.js

@@ -11,6 +11,7 @@
 
 var heatmapHover = require('../heatmap/hover');
 var hoverLabelText = require('../../plots/cartesian/axes').hoverLabelText;
+var instanceOrPeriod = require('../../plots/cartesian/instance_or_period');
 
 module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLayer, contour) {
     var pts = heatmapHover(pointData, xval, yval, hovermode, hoverLayer, contour);
@@ -22,11 +23,25 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay
     var ny = indices[0];
     var nx = indices[1];
     var cd0 = pointData.cd[0];
+    var trace = cd0.trace;
     var xRange = cd0.xRanges[nx];
     var yRange = cd0.yRanges[ny];
 
-    pointData.xLabel = hoverLabelText(pointData.xa, xRange[0], xRange[1]);
-    pointData.yLabel = hoverLabelText(pointData.ya, yRange[0], yRange[1]);
+    var x0 = xRange[0];
+    var x1 = xRange[1];
+    var xx = instanceOrPeriod(pointData, trace, 'x');
+    var xa = pointData.xa;
+    var xLabel = hoverLabelText(xa, x0, x1);
+    if(xx[1] !== undefined) xLabel = hoverLabelText(xa, xx[0], xx[1]);
+    pointData.xLabel = xLabel;
+
+    var y0 = yRange[0];
+    var y1 = yRange[1];
+    var yy = instanceOrPeriod(pointData, trace, 'y');
+    var ya = pointData.ya;
+    var yLabel = hoverLabelText(ya, y0, y1);
+    if(yy[1] !== undefined) yLabel = hoverLabelText(ya, yy[0], yy[1]);
+    pointData.yLabel = yLabel;
 
     return pts;
 };