bullet-proof barpolar hover

Author: etpinard

src/traces/bar/hover.js

@@ -14,7 +14,7 @@ var Registry = require('../../registry');
 var Color = require('../../components/color');
 var fillHoverText = require('../scatter/fill_hover_text');
 
-module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
+function hoverPoints(pointData, xval, yval, hovermode) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
     var t = cd[0].t;
@@ -117,12 +117,6 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     // the closest data point
     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;
     pointData[sizeLetter + '0'] = pointData[sizeLetter + '1'] = sa.c2p(di[sizeLetter], true);
@@ -139,8 +133,23 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     // in case of bars shifted within groups
     pointData[posLetter + 'Spike'] = pa.c2p(di.p, true);
 
+    pointData.color = getTraceColor(trace, di);
     fillHoverText(di, trace, pointData);
     Registry.getComponentMethod('errorbars', 'hoverInfo')(di, trace, pointData);
 
     return [pointData];
+}
+
+function getTraceColor(trace, di) {
+    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)) return mc;
+    else if(Color.opacity(mlc) && mlw) return mlc;
+}
+
+module.exports = {
+    hoverPoints: hoverPoints,
+    getTraceColor: getTraceColor
 };

src/traces/bar/index.js

@@ -22,7 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
 Bar.plot = require('./plot');
 Bar.style = require('./style').style;
 Bar.styleOnSelect = require('./style').styleOnSelect;
-Bar.hoverPoints = require('./hover');
+Bar.hoverPoints = require('./hover').hoverPoints;
 Bar.selectPoints = require('./select');
 
 Bar.moduleType = 'trace';

src/traces/barpolar/hover.js

@@ -8,71 +8,63 @@
 
 'use strict';
 
-var barHover = require('../bar/hover');
-var makeHoverPointText = require('../scatterpolar/hover').makeHoverPointText;
-var Color = require('../../components/color')
 var Fx = require('../../components/fx');
 var Lib = require('../../lib');
+var getTraceColor = require('../bar/hover').getTraceColor;
+var makeHoverPointText = require('../scatterpolar/hover').makeHoverPointText;
 var isPtInsidePolygon = require('../../plots/polar/helpers').isPtInsidePolygon;
 
-module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
+module.exports = function hoverPoints(pointData, xval, yval) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
-    var t = cd[0].t;
 
     var subplot = pointData.subplot;
     var radialAxis = subplot.radialAxis;
     var angularAxis = subplot.angularAxis;
-    var xa = subplot.xaxis;
-    var ya = subplot.yaxis;
     var inboxFn = subplot.vangles ? isPtInsidePolygon : Lib.isPtInsideSector;
+    var maxHoverDistance = pointData.maxHoverDistance;
+    var period = angularAxis._period || 2 * Math.PI;
 
+    // polar.(x|y)axis.p2c doesn't get the reversed radial axis range case right
     if(radialAxis.range[0] > radialAxis.range[1]) {
-        xval = -xval;
-        yval = -yval;
+        xval *= -1;
+        yval *= -1;
     }
 
     var rVal = Math.abs(radialAxis.g2p(Math.sqrt(xval * xval + yval * yval)));
     var thetaVal = Math.atan2(yval, xval);
 
-    // TODO add padding around sector to show labels,
-    // when hovering "close to" them
     var distFn = function(di) {
-        var rBnds = [di.s0, di.s1].map(radialAxis.c2p);
-        var thetaBnds = [di.p0, di.p1].map(angularAxis.c2g).map(Lib.rad2deg);
-        return inboxFn(rVal, thetaVal, rBnds, thetaBnds, subplot.vangles) ?
-            1 :
-            Infinity;
+        if(inboxFn(rVal, thetaVal,
+            [di.rp0, di.rp1],
+            [di.thetag0, di.thetag1].map(Lib.rad2deg),
+            subplot.vangles)
+        ) {
+            return maxHoverDistance +
+                // add a little to the pseudo-distance for wider bars, so that like scatter,
+                // if you are over two overlapping bars, the narrower one wins.
+                Math.min(1, Math.abs(di.thetag1 - di.thetag0) / period) - 1 +
+                // add a gradient so hovering near the end of a
+                // bar makes it a little closer match
+                (di.rp1 - rVal) / (di.rp1 - di.rp0) - 1;
+        } else {
+            return Infinity;
+        }
     };
 
     Fx.getClosest(cd, distFn, pointData);
-
-    // skip the rest (for this trace) if we didn't find a close point
     if(pointData.index === false) return;
 
     var index = pointData.index;
     var cdi = cd[index];
-    var rg = radialAxis.c2g(cdi.s1);
-    // TODO include offset here?
-    var thetag = angularAxis.c2g(cdi.p);
-    var xp = xa.c2p(rg * Math.cos(thetag));
-    var yp = ya.c2p(rg * Math.sin(thetag));
 
-    // TODO use 'extents' like in Bar.hover?
-    pointData.x0 = pointData.x1 = xp;
-    pointData.y0 = pointData.y1 = yp;
+    pointData.x0 = pointData.x1 = cdi.ct[0];
+    pointData.y0 = pointData.y1 = cdi.ct[1];
 
     var _cdi = Lib.extendFlat({}, cdi, {r: cdi.s, theta: cdi.p});
     pointData.extraText = makeHoverPointText(_cdi, trace, subplot);
-    pointData.xLabelVal = undefined;
-    pointData.yLabelVal = undefined;
-
-    // TODO DRY-up with Bar.hover
-    var mc = cdi.mcc || trace.marker.color;
-    var mlc = cdi.mlcc || trace.marker.line.color;
-    var mlw = cdi.mlw || trace.marker.line.width;
-    if(Color.opacity(mc)) pointData.color = mc;
-    else if(Color.opacity(mlc) && mlw) pointData.color = mlc;
+    pointData.color = getTraceColor(trace, cdi);
+    pointData.xLabelVal = pointData.yLabelVal = undefined;
 
     return [pointData];
 };

src/traces/barpolar/plot.js

@@ -55,10 +55,10 @@ module.exports = function plot(gd, subplot, cdbar) {
             var s0 = di.s0 = di.b;
             var s1 = di.s1 = s0 + di.s;
 
-            var rp0 = radialAxis.c2p(s0);
-            var rp1 = radialAxis.c2p(s1);
-            var thetag0 = angularAxis.c2g(p0);
-            var thetag1 = angularAxis.c2g(p1);
+            var rp0 = di.rp0 = radialAxis.c2p(s0);
+            var rp1 = di.rp1 = radialAxis.c2p(s1);
+            var thetag0 = di.thetag0 = angularAxis.c2g(p0);
+            var thetag1 = di.thetag1 = angularAxis.c2g(p1);
 
             var dPath;
 

src/traces/histogram/hover.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-var barHover = require('../bar/hover');
+var barHover = require('../bar/hover').hoverPoints;
 var hoverLabelText = require('../../plots/cartesian/axes').hoverLabelText;
 
 module.exports = function hoverPoints(pointData, xval, yval, hovermode) {