Hover on fills

src/lib/coerce.js

@@ -192,7 +192,7 @@ exports.valObjects = {
  propOut.set(dflt);
  return;
  }
- if(opts.extras.indexOf(v) !== -1) {
+ if((opts.extras || []).indexOf(v) !== -1) {
  propOut.set(v);
  return;
  }

src/traces/scatter/attributes.js

@@ -92,6 +92,17 @@ module.exports = {
  'then the default is *lines+markers*. Otherwise, *lines*.'
  ].join(' ')
  },
+ hoveron: {
+ valType: 'flaglist',
+ flags: ['points', 'fills'],
+ role: 'info',
+ description: [
+ 'Do the hover effects highlight individual points (markers or',
+ 'line points) or do they highlight filled regions?',
+ 'If the fill is *toself* or *tonext* and there are no markers',
+ 'or text, then the default is *fills*, otherwise it is *points*.'
+ ].join(' ')
+ },
  line: {
  color: {
  valType: 'color',

src/traces/scatter/defaults.js

@@ -53,8 +53,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
  handleTextDefaults(traceIn, traceOut, layout, coerce);
  }
 
+ var dfltHoverOn = [];
+
  if(subTypes.hasMarkers(traceOut) || subTypes.hasText(traceOut)) {
  coerce('marker.maxdisplayed');
+ dfltHoverOn.push('points');
  }
 
  coerce('fill');
@@ -63,6 +66,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
  if(!subTypes.hasLines(traceOut)) handleLineShapeDefaults(traceIn, traceOut, coerce);
  }
 
+ if(traceOut.fill === 'tonext' || traceOut.fill === 'toself') {
+ dfltHoverOn.push('fills');
+ }
+ coerce('hoveron', dfltHoverOn.join('+') || 'points');
+
  errorBarsSupplyDefaults(traceIn, traceOut, defaultColor, {axis: 'y'});
  errorBarsSupplyDefaults(traceIn, traceOut, defaultColor, {axis: 'x', inherit: 'y'});
 };

src/traces/scatter/hover.js

@@ -9,61 +9,150 @@
 
 'use strict';
 
+var Lib = require('../../lib');
 var Fx = require('../../plots/cartesian/graph_interact');
+var constants = require('../../plots/cartesian/constants');
 var ErrorBars = require('../../components/errorbars');
 var getTraceColor = require('./get_trace_color');
+var Color = require('../../components/color');
 
 
 module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
  var cd = pointData.cd,
  trace = cd[0].trace,
  xa = pointData.xa,
  ya = pointData.ya,
- dx = function(di) {
- // scatter points: d.mrc is the calculated marker radius
- // adjust the distance so if you're inside the marker it
- // always will show up regardless of point size, but
- // prioritize smaller points
- var rad = Math.max(3, di.mrc || 0);
- return Math.max(Math.abs(xa.c2p(di.x) - xa.c2p(xval)) - rad, 1 - 3 / rad);
- },
- dy = function(di) {
- var rad = Math.max(3, di.mrc || 0);
- return Math.max(Math.abs(ya.c2p(di.y) - ya.c2p(yval)) - rad, 1 - 3 / rad);
- },
- dxy = function(di) {
- var rad = Math.max(3, di.mrc || 0),
- dx = Math.abs(xa.c2p(di.x) - xa.c2p(xval)),
- dy = Math.abs(ya.c2p(di.y) - ya.c2p(yval));
- return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
- },
- distfn = Fx.getDistanceFunction(hovermode, dx, dy, dxy);
-
- 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 di = cd[pointData.index],
- xc = xa.c2p(di.x, true),
- yc = ya.c2p(di.y, true),
- rad = di.mrc || 1;
-
- pointData.color = getTraceColor(trace, di);
-
- pointData.x0 = xc - rad;
- pointData.x1 = xc + rad;
- pointData.xLabelVal = di.x;
-
- pointData.y0 = yc - rad;
- pointData.y1 = yc + rad;
- pointData.yLabelVal = di.y;
-
- if(di.tx) pointData.text = di.tx;
- else if(trace.text) pointData.text = trace.text;
-
- ErrorBars.hoverInfo(di, trace, pointData);
-
- return [pointData];
+ xpx = xa.c2p(xval),
+ ypx = ya.c2p(yval),
+ pt = [xpx, ypx];
+
+ // look for points to hover on first, then take fills only if we
+ // didn't find a point
+ if(trace.hoveron.indexOf('points') !== -1) {
+ var dx = function(di) {
+ // scatter points: d.mrc is the calculated marker radius
+ // adjust the distance so if you're inside the marker it
+ // always will show up regardless of point size, but
+ // prioritize smaller points
+ var rad = Math.max(3, di.mrc || 0);
+ return Math.max(Math.abs(xa.c2p(di.x) - xpx) - rad, 1 - 3 / rad);
+ },
+ dy = function(di) {
+ var rad = Math.max(3, di.mrc || 0);
+ return Math.max(Math.abs(ya.c2p(di.y) - ypx) - rad, 1 - 3 / rad);
+ },
+ dxy = function(di) {
+ var rad = Math.max(3, di.mrc || 0),
+ dx = xa.c2p(di.x) - xpx,
+ dy = ya.c2p(di.y) - ypx;
+ return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
+ },
+ distfn = Fx.getDistanceFunction(hovermode, dx, dy, dxy);
+
+ Fx.getClosest(cd, distfn, pointData);
+
+ // skip the rest (for this trace) if we didn't find a close point
+ if(pointData.index !== false) {
+
+ // the closest data point
+ var di = cd[pointData.index],
+ xc = xa.c2p(di.x, true),
+ yc = ya.c2p(di.y, true),
+ rad = di.mrc || 1;
+
+ Lib.extendFlat(pointData, {
+ color: getTraceColor(trace, di),
+
+ x0: xc - rad,
+ x1: xc + rad,
+ xLabelVal: di.x,
+
+ y0: yc - rad,
+ y1: yc + rad,
+ yLabelVal: di.y
+ });
+
+ if(di.tx) pointData.text = di.tx;
+ else if(trace.text) pointData.text = trace.text;
+
+ ErrorBars.hoverInfo(di, trace, pointData);
+
+ return [pointData];
+ }
+ }
+
+ // even if hoveron is 'fills', only use it if we have polygons too
+ if(trace.hoveron.indexOf('fills') !== -1 && trace._polygons) {
+ var polygons = trace._polygons,
+ polygonsIn = [],
+ inside = false,
+ xmin = Infinity,
+ xmax = -Infinity,
+ ymin = Infinity,
+ ymax = -Infinity,
+ i, j, polygon, pts, xCross, x0, x1, y0, y1;
+
+ for(i = 0; i < polygons.length; i++) {
+ polygon = polygons[i];
+ // TODO: this is not going to work right for curved edges, it will
+ // act as though they're straight. That's probably going to need
+ // the elements themselves to capture the events. Worth it?
+ if(polygon.contains(pt)) {
+ inside = !inside;
+ // TODO: need better than just the overall bounding box
+ polygonsIn.push(polygon);
+ ymin = Math.min(ymin, polygon.ymin);
+ ymax = Math.max(ymax, polygon.ymax);
+ }
+ }
+
+ if(inside) {
+ // find the overall left-most and right-most points of the
+ // polygon(s) we're inside at their combined vertical midpoint.
+ // This is where we will draw the hover label.
+ // Note that this might not be the vertical midpoint of the
+ // whole trace, if it's disjoint.
+ var yAvg = (ymin + ymax) / 2;
+ for(i = 0; i < polygonsIn.length; i++) {
+ pts = polygonsIn[i].pts;
+ for(j = 1; j < pts.length; j++) {
+ y0 = pts[j - 1][1];
+ y1 = pts[j][1];
+ if((y0 > yAvg) !== (y1 >= yAvg)) {
+ x0 = pts[j - 1][0];
+ x1 = pts[j][0];
+ xCross = x0 + (x1 - x0) * (yAvg - y0) / (y1 - y0);
+ xmin = Math.min(xmin, xCross);
+ xmax = Math.max(xmax, xCross);
+ }
+ }
+ }
+
+ // get only fill or line color for the hover color
+ var color = Color.defaultLine;
+ if(Color.opacity(trace.fillcolor)) color = trace.fillcolor;
+ else if(Color.opacity((trace.line || {}).color)) {
+ color = trace.line.color;
+ }
+
+ Lib.extendFlat(pointData, {
+ // never let a 2D override 1D type as closest point
+ distance: constants.MAXDIST + 10,
+ x0: xmin,
+ x1: xmax,
+ y0: yAvg,
+ y1: yAvg,
+ color: color
+ });
+
+ delete pointData.index;
+
+ if(trace.text && !Array.isArray(trace.text)) {
+ pointData.text = String(trace.text);
+ }
+ else pointData.text = trace.name;
+
+ return [pointData];
+ }
+ }
 };

src/traces/scatter/plot.js

@@ -15,6 +15,8 @@ var Lib = require('../../lib');
 var Drawing = require('../../components/drawing');
 var ErrorBars = require('../../components/errorbars');
 
+var polygonTester = require('../../lib/polygon').tester;
+
 var subTypes = require('./subtypes');
 var arraysToCalcdata = require('./arrays_to_calcdata');
 var linePoints = require('./line_points');
@@ -41,6 +43,7 @@ module.exports = function plot(gd, plotinfo, cdscatter) {
 
  // BUILD LINES AND FILLS
  var prevpath = '',
+ prevPolygons = [],
  ownFillEl3, ownFillDir, tonext, nexttonext;
 
  scattertraces.each(function(d) {
@@ -125,12 +128,23 @@ module.exports = function plot(gd, plotinfo, cdscatter) {
  linear: line.shape === 'linear'
  });
 
+ // since we already have the pixel segments here, use them to make
+ // polygons for hover on fill
+ // TODO: can we skip this if hoveron!=fills? That would mean we
+ // need to redraw when you change hoveron...
+ var thisPolygons = trace._polygons = new Array(segments.length),
+ i;
+
+ for(i = 0; i < segments.length; i++) {
+ trace._polygons[i] = polygonTester(segments[i]);
+ }
+
  if(segments.length) {
  var pt0 = segments[0][0],
  lastSegment = segments[segments.length - 1],
  pt1 = lastSegment[lastSegment.length - 1];
 
- for(var i = 0; i < segments.length; i++) {
+ for(i = 0; i < segments.length; i++) {
  var pts = segments[i];
  thispath = pathfn(pts);
  thisrevpath = revpathfn(pts);
@@ -185,8 +199,10 @@ module.exports = function plot(gd, plotinfo, cdscatter) {
  // existing curve or off the end of it
  tonext.attr('d', fullpath + 'L' + prevpath.substr(1) + 'Z');
  }
+ trace._polygons = trace._polygons.concat(prevPolygons);
  }
  prevpath = revpath;
+ prevPolygons = thisPolygons;
  }
  });
 

src/traces/scatterternary/attributes.js

@@ -117,6 +117,7 @@ module.exports = {
  hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
  flags: ['a', 'b', 'c', 'text', 'name']
  }),
+ hoveron: scatterAttrs.hoveron,
  _nestedModules: {
  'marker.colorbar': 'Colorbar'
  }

src/traces/scatterternary/defaults.js

@@ -81,8 +81,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
  handleTextDefaults(traceIn, traceOut, layout, coerce);
  }
 
+ var dfltHoverOn = [];
+
  if(subTypes.hasMarkers(traceOut) || subTypes.hasText(traceOut)) {
  coerce('marker.maxdisplayed');
+ dfltHoverOn.push('points');
  }
 
  coerce('fill');
@@ -92,4 +95,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
  }
 
  coerce('hoverinfo', (layout._dataLength === 1) ? 'a+b+c+text' : undefined);
+
+ if(traceOut.fill === 'tonext' || traceOut.fill === 'toself') {
+ dfltHoverOn.push('fills');
+ }
+ coerce('hoveron', dfltHoverOn.join('+') || 'points');
 };

src/traces/scatterternary/hover.js

@@ -17,6 +17,10 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
  var scatterPointData = scatterHover(pointData, xval, yval, hovermode);
  if(!scatterPointData || scatterPointData[0].index === false) return;
 
+ // if hovering on a fill, we don't show any point data so the label is
+ // unchanged from what scatter gives us.
+ if(scatterPointData[0].index === undefined) return scatterPointData;
+
  var newPointData = scatterPointData[0],
  cdi = newPointData.cd[newPointData.index];
 

test/jasmine/assets/create_graph_div.js

@@ -4,5 +4,11 @@ module.exports = function createGraphDiv() {
  var gd = document.createElement('div');
  gd.id = 'graph';
  document.body.appendChild(gd);
+
+ // force the graph to be at position 0,0 no matter what
+ gd.style.position = 'fixed';
+ gd.style.left = 0;
+ gd.style.top = 0;
+
  return gd;
 };