Histogram events & bin hover label improvements

devtools/test_dashboard/perf.js

@@ -42,7 +42,7 @@ window.timeit = function(f, n, nchunk, arg) {
  times.sort();
  var min = (times[0]).toFixed(4);
  var max = (times[n - 1]).toFixed(4);
- var median = (times[Math.ceil(n / 2)]).toFixed(4);
+ var median = (times[Math.min(Math.ceil(n / 2), n - 1)]).toFixed(4);
  var mean = (totalTime / n).toFixed(4);
  console.log((f.name || 'function') + ' timing (ms) - min: ' + min +
  ' max: ' + max +

src/components/fx/hover.js

@@ -1063,8 +1063,7 @@ 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.xVal = d.xa.c2d(d.xLabelVal);

src/lib/search.js

@@ -12,6 +12,11 @@
 var isNumeric = require('fast-isnumeric');
 var loggers = require('./loggers');
 
+// don't trust floating point equality - fraction of bin size to call
+// "on the line" and ensure that they go the right way specified by
+// linelow
+var roundingError = 1e-9;
+
 
 /**
  * findBin - find the bin for val - note that it can return outside the
@@ -26,20 +31,21 @@ var loggers = require('./loggers');
 exports.findBin = function(val, bins, linelow) {
  if(isNumeric(bins.start)) {
  return linelow ?
- Math.ceil((val - bins.start) / bins.size) - 1 :
- Math.floor((val - bins.start) / bins.size);
+ Math.ceil((val - bins.start) / bins.size - roundingError) - 1 :
+ Math.floor((val - bins.start) / bins.size + roundingError);
  }
  else {
- var n1 = 0,
-  n2 = bins.length,
-  c = 0,
-  n,
-   test;
- if(bins[bins.length - 1] >= bins[0]) {
+ var n1 = 0;
+ var n2 = bins.length;
+ var c = 0;
+ var binSize = (n2 > 1) ? (bins[n2 - 1] - bins[0]) / (n2 - 1) : 1;
+ var n, test;
+ if(binSize >= 0) {
  test = linelow ? lessThan : lessOrEqual;
  } else {
  test = linelow ? greaterOrEqual : greaterThan;
  }
+ val += binSize * roundingError * (linelow ? -1 : 1) * (binSize >= 0 ? 1 : -1);
  // c is just to avoid infinite loops if there's an error
  while(n1 < n2 && c++ < 100) {
  n = Math.floor((n1 + n2) / 2);

src/plots/cartesian/axes.js

@@ -28,6 +28,7 @@ var ONEHOUR = constants.ONEHOUR;
 var ONEMIN = constants.ONEMIN;
 var ONESEC = constants.ONESEC;
 var MINUS_SIGN = constants.MINUS_SIGN;
+var BADNUM = constants.BADNUM;
 
 var MID_SHIFT = require('../../constants/alignment').MID_SHIFT;
 
@@ -1216,12 +1217,28 @@ axes.tickText = function(ax, x, hover) {
  return out;
 };
 
-axes.hoverLabelText = function(ax, val) {
+/**
+ * create text for a hover label on this axis, with special handling of
+ * log axes (where negative values can't be displayed but can appear in hover text)
+ *
+ * @param {object} ax: the axis to format text for
+ * @param {number} val: calcdata value to format
+ * @param {Optional(number)} val2: a second value to display
+ *
+ * @returns {string} `val` formatted as a string appropriate to this axis, or
+ * `val` and `val2` as a range (ie '<val> - <val2>') if `val2` is provided and
+ * it's different from `val`.
+ */
+axes.hoverLabelText = function(ax, val, val2) {
+ if(val2 !== BADNUM && val2 !== val) {
+ return axes.hoverLabelText(ax, val) + ' - ' + axes.hoverLabelText(ax, val2);
+ }
+
  var logOffScale = (ax.type === 'log' && val <= 0);
  var tx = axes.tickText(ax, ax.c2l(logOffScale ? -val : val), 'hover').text;
 
  if(logOffScale) {
- return val === 0 ? '0' : '-' + tx;
+ return val === 0 ? '0' : MINUS_SIGN + tx;
  }
 
  // TODO: should we do something special if the axis calendar and

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);
- };
+ function thisBarMinPos(di) { return di[posLetter] - di.w / 2; }
+ function thisBarMaxPos(di) { return di[posLetter] + di.w / 2; }
 
- 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;
- }
-
- minPos = (hovermode === 'closest') ?
+ var minPos = (hovermode === 'closest') ?
  thisBarMinPos :
  function(di) {
  /*
@@ -60,44 +36,66 @@ 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[sizeLetter + '0'] = pointData[sizeLetter + '1'] = sa.c2p(di[sizeLetter], true);
+ pointData[sizeLetter + 'LabelVal'] = size;
 
- pointData.y0 = ya.c2p(minPos(di), true);
- pointData.y1 = ya.c2p(maxPos(di), true);
- pointData.yLabelVal = di.p;
- }
- 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;
- }
+ pointData[posLetter + '0'] = pa.c2p(minPos(di), true);
+ pointData[posLetter + '1'] = pa.c2p(maxPos(di), true);
+ pointData[posLetter + 'LabelVal'] = di.p;
 
  fillHoverText(di, trace, pointData);
  ErrorBars.hoverInfo(di, trace, pointData);

src/traces/heatmap/calc.js

@@ -40,14 +40,15 @@ module.exports = function calc(gd, trace) {
  y0,
  dy,
  z,
- i;
+ i,
+ binned;
 
  // cancel minimum tick spacings (only applies to bars and boxes)
  xa._minDtick = 0;
  ya._minDtick = 0;
 
  if(isHist) {
- var binned = histogram2dCalc(gd, trace);
+ binned = histogram2dCalc(gd, trace);
  x = binned.x;
  x0 = binned.x0;
  dx = binned.dx;
@@ -128,6 +129,12 @@ module.exports = function calc(gd, trace) {
 
  var cd0 = {x: xArray, y: yArray, z: z, text: trace.text};
 
+ if(isHist) {
+ cd0.xRanges = binned.xRanges;
+ cd0.yRanges = binned.yRanges;
+ cd0.pts = binned.pts;
+ }
+
  // auto-z and autocolorscale if applicable
  colorscaleCalc(trace, z, '', 'z');