update histograms to include input point numbers in events and smart ranges in hover labels

Author: alexcjohnson

src/components/fx/hover.js

@@ -1063,14 +1063,13 @@ function cleanPoint(d, hovermode) {
     d.y0 = Lib.constrain(d.y0, 0, d.ya._length);
     d.y1 = Lib.constrain(d.y1, 0, d.ya._length);
 
-    // and convert the x and y label values into objects
-    // formatted as text, with font info
+    // 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);
+        d.xLabel = ('xLabel' in d) ? d.xLabel : getDimText(d, 'x');
         d.xVal = d.xa.c2d(d.xLabelVal);
     }
     if(d.yLabelVal !== undefined) {
-        d.yLabel = ('yLabel' in d) ? d.yLabel : Axes.hoverLabelText(d.ya, d.yLabelVal);
+        d.yLabel = ('yLabel' in d) ? d.yLabel : getDimText(d, 'y');
         d.yVal = d.ya.c2d(d.yLabelVal);
     }
     if(d.zLabelVal !== undefined) d.zLabel = String(d.zLabelVal);
@@ -1113,6 +1112,24 @@ function cleanPoint(d, hovermode) {
     return d;
 }
 
+// get text for either a value range (val0 .. val1) if it exists,
+// or single value (val) if the range does not exist
+function getDimText(d, axLetter) {
+    var val = d[axLetter + 'LabelVal'];
+    var val0 = d[axLetter + 'LabelVal0'];
+    var val1 = d[axLetter + 'LabelVal1'];
+    var ax = d[axLetter + 'a'];
+
+    if(val0 !== undefined && val1 !== undefined) {
+        var text0 = Axes.hoverLabelText(ax, val0);
+        var text1 = Axes.hoverLabelText(ax, val1);
+
+        if(text0 === text1) return text0;
+        return text0 + ' - ' + text1;
+    }
+    return Axes.hoverLabelText(ax, val);
+}
+
 function createSpikelines(hoverData, opts) {
     var hovermode = opts.hovermode;
     var container = opts.container;

src/traces/bar/hover.js

@@ -18,37 +18,13 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
     var t = cd[0].t;
-    var xa = pointData.xa;
-    var ya = pointData.ya;
 
-    var posVal, thisBarMinPos, thisBarMaxPos, minPos, maxPos, dx, dy;
+    var posVal, sizeVal, posLetter, sizeLetter, dx, dy;
 
-    var positionFn = function(di) {
-        return Fx.inbox(minPos(di) - posVal, maxPos(di) - posVal);
-    };
-
-    if(trace.orientation === 'h') {
-        posVal = yval;
-        thisBarMinPos = function(di) { return di.y - di.w / 2; };
-        thisBarMaxPos = function(di) { return di.y + di.w / 2; };
-        dx = function(di) {
-            // add a gradient so hovering near the end of a
-            // bar makes it a little closer match
-            return Fx.inbox(di.b - xval, di.x - xval) + (di.x - xval) / (di.x - di.b);
-        };
-        dy = positionFn;
-    }
-    else {
-        posVal = xval;
-        thisBarMinPos = function(di) { return di.x - di.w / 2; };
-        thisBarMaxPos = function(di) { return di.x + di.w / 2; };
-        dy = function(di) {
-            return Fx.inbox(di.b - yval, di.y - yval) + (di.y - yval) / (di.y - di.b);
-        };
-        dx = positionFn;
-    }
+    function thisBarMinPos(di) { return di[posLetter] - di.w / 2; }
+    function thisBarMaxPos(di) { return di[posLetter] + di.w / 2; }
 
-    minPos = (hovermode === 'closest') ?
+    var minPos = (hovermode === 'closest') ?
         thisBarMinPos :
         function(di) {
             /*
@@ -60,44 +36,74 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
             return Math.min(thisBarMinPos(di), di.p - t.bargroupwidth / 2);
         };
 
-    maxPos = (hovermode === 'closest') ?
+    var maxPos = (hovermode === 'closest') ?
         thisBarMaxPos :
         function(di) {
             return Math.max(thisBarMaxPos(di), di.p + t.bargroupwidth / 2);
         };
 
+    function positionFn(di) {
+        return Fx.inbox(minPos(di) - posVal, maxPos(di) - posVal);
+    }
+
+    function sizeFn(di) {
+        // add a gradient so hovering near the end of a
+        // bar makes it a little closer match
+        return Fx.inbox(di.b - sizeVal, di[sizeLetter] - sizeVal) +
+            (di[sizeLetter] - sizeVal) / (di[sizeLetter] - di.b);
+    }
+
+    if(trace.orientation === 'h') {
+        posVal = yval;
+        sizeVal = xval;
+        posLetter = 'y';
+        sizeLetter = 'x';
+        dx = sizeFn;
+        dy = positionFn;
+    }
+    else {
+        posVal = xval;
+        sizeVal = yval;
+        posLetter = 'x';
+        sizeLetter = 'y';
+        dy = sizeFn;
+        dx = positionFn;
+    }
+
+    var pa = pointData[posLetter + 'a'];
+    var sa = pointData[sizeLetter + 'a'];
+
     var distfn = Fx.getDistanceFunction(hovermode, dx, dy);
     Fx.getClosest(cd, distfn, pointData);
 
     // skip the rest (for this trace) if we didn't find a close point
     if(pointData.index === false) return;
 
     // the closest data point
-    var index = pointData.index,
-        di = cd[index],
-        mc = di.mcc || trace.marker.color,
-        mlc = di.mlcc || trace.marker.line.color,
-        mlw = di.mlw || trace.marker.line.width;
+    var index = pointData.index;
+    var di = cd[index];
+    var mc = di.mcc || trace.marker.color;
+    var mlc = di.mlcc || trace.marker.line.color;
+    var mlw = di.mlw || trace.marker.line.width;
+
     if(Color.opacity(mc)) pointData.color = mc;
     else if(Color.opacity(mlc) && mlw) pointData.color = mlc;
 
     var size = (trace.base) ? di.b + di.s : di.s;
-    if(trace.orientation === 'h') {
-        pointData.x0 = pointData.x1 = xa.c2p(di.x, true);
-        pointData.xLabelVal = size;
-
-        pointData.y0 = ya.c2p(minPos(di), true);
-        pointData.y1 = ya.c2p(maxPos(di), true);
-        pointData.yLabelVal = di.p;
+    pointData[sizeLetter + '0'] = pointData[sizeLetter + '1'] = sa.c2p(di[sizeLetter], true);
+    pointData[sizeLetter + 'LabelVal'] = size;
+
+    pointData[posLetter + '0'] = pa.c2p(minPos(di), true);
+    pointData[posLetter + '1'] = pa.c2p(maxPos(di), true);
+    pointData[posLetter + 'LabelVal'] = di.p;
+    // for histograms
+    if(di.p0 !== undefined && di.p1 !== undefined) {
+        pointData[posLetter + 'LabelVal0'] = di.p0;
+        pointData[posLetter + 'LabelVal1'] = di.p1;
     }
-    else {
-        pointData.y0 = pointData.y1 = ya.c2p(di.y, true);
-        pointData.yLabelVal = size;
 
-        pointData.x0 = xa.c2p(minPos(di), true);
-        pointData.x1 = xa.c2p(maxPos(di), true);
-        pointData.xLabelVal = di.p;
-    }
+    // for histograms
+    if(di.pts) pointData.pts = di.pts;
 
     fillHoverText(di, trace, pointData);
     ErrorBars.hoverInfo(di, trace, pointData);