use Fx.castHoverOption to setup pie loneHover args

- pie trace array hoverlabel settings were broken before
  this patch when pie `trace.sort = true` (the default by the way)
  as this reorders the calcdata items which led to fx/calc filling
  hoverlabel field in the wrong calcdata items.
- to solve the problem, simply don't rely on calcdata for hoverlabel
  setting in pie traces (as we currently do for gl3d and gl2d).

Author: etpinard

src/components/fx/calc.js

@@ -25,11 +25,17 @@ module.exports = function calc(gd) {
         var cd = calcdata[i];
         var trace = cd[0].trace;
 
-        if(!trace.hoverlabel) continue;
+        // don't include hover calc fields for pie traces
+        // as calcdata items might be sorted by value and
+        // won't match the data array order.
+        if(Registry.traceIs(trace, 'pie')) continue;
 
         var mergeFn = Registry.traceIs(trace, '2dMap') ? paste : Lib.mergeArray;
 
         mergeFn(trace.hoverinfo, cd, 'hi', makeCoerceHoverInfo(trace));
+
+        if(!trace.hoverlabel) continue;
+
         mergeFn(trace.hoverlabel.bgcolor, cd, 'hbg');
         mergeFn(trace.hoverlabel.bordercolor, cd, 'hbc');
         mergeFn(trace.hoverlabel.font.size, cd, 'hts');

src/traces/pie/plot.js

@@ -124,20 +124,18 @@ module.exports = function plot(gd, cdpie) {
                     if(hoverinfo.indexOf('value') !== -1) thisText.push(helpers.formatPieValue(pt.v, separators));
                     if(hoverinfo.indexOf('percent') !== -1) thisText.push(helpers.formatPiePercent(pt.v / cd0.vTotal, separators));
 
-                    var hoverLabelOpts = trace2.hoverlabel;
-
                     Fx.loneHover({
                         x0: hoverCenterX - rInscribed * cd0.r,
                         x1: hoverCenterX + rInscribed * cd0.r,
                         y: hoverCenterY,
                         text: thisText.join('<br>'),
                         name: hoverinfo.indexOf('name') !== -1 ? trace2.name : undefined,
                         idealAlign: pt.pxmid[0] < 0 ? 'left' : 'right',
-                        color: pt.hbg || hoverLabelOpts.bgcolor || pt.color,
-                        borderColor: pt.hbc || hoverLabelOpts.bordercolor,
-                        fontFamily: pt.htf || hoverLabelOpts.font.family,
-                        fontSize: pt.hts || hoverLabelOpts.font.size,
-                        fontColor: pt.htc || hoverLabelOpts.font.color
+                        color: Fx.castHoverOption(trace, pt.i, 'bgcolor') || pt.color,
+                        borderColor: Fx.castHoverOption(trace, pt.i, 'bordercolor'),
+                        fontFamily: Fx.castHoverOption(trace, pt.i, 'font.family'),
+                        fontSize: Fx.castHoverOption(trace, pt.i, 'font.size'),
+                        fontColor: Fx.castHoverOption(trace, pt.i, 'font.color')
                     }, {
                         container: fullLayout2._hoverlayer.node(),
                         outerContainer: fullLayout2._paper.node()

test/jasmine/tests/hover_pie_test.js

@@ -242,9 +242,9 @@ describe('pie hovering', function() {
                 assertLabel(['4', 'SUP', '5', '33.3%']);
 
                 return Plotly.restyle(gd, {
-                    'hoverlabel.bgcolor': [['red', 'green', 'blue']],
+                    'hoverlabel.bgcolor': [['red', 'green', 'blue', 'yellow', 'red']],
                     'hoverlabel.bordercolor': 'yellow',
-                    'hoverlabel.font.size': [[15, 20, 30]],
+                    'hoverlabel.font.size': [[15, 20, 30, 20, 15]],
                     'hoverlabel.font.family': 'Roboto',
                     'hoverlabel.font.color': 'blue'
                 });