add arrayOk support for hoverinfo for gl3d, gl2d and pie traces

- To do so, add Fx.castHoverinfo helper and use it during
  gl3d, gl2d and pie hover where
  hoverinfo (trace-wide and per-pt array) is extracted from fullData

Author: etpinard

src/components/fx/index.js

@@ -35,7 +35,9 @@ module.exports = {
     getDistanceFunction: helpers.getDistanceFunction,
     getClosest: helpers.getClosest,
     inbox: helpers.inbox,
+
     castHoverOption: castHoverOption,
+    castHoverinfo: castHoverinfo,
 
     hover: require('./hover').hover,
     unhover: dragElement.unhover,
@@ -57,18 +59,16 @@ function loneUnhover(containerOrSelection) {
     selection.selectAll('.spikeline').remove();
 }
 
-// Handler for trace-wide vs per-point hover label options
+// helpers for traces that use Fx.loneHover
+
 function castHoverOption(trace, ptNumber, attr) {
-    var labelOpts = trace.hoverlabel || {};
-    var val = Lib.nestedProperty(labelOpts, attr).get();
-
-    if(Array.isArray(val)) {
-        if(Array.isArray(ptNumber) && Array.isArray(val[ptNumber[0]])) {
-            return val[ptNumber[0]][ptNumber[1]];
-        } else {
-            return val[ptNumber];
-        }
-    } else {
-        return val;
+    return Lib.castOption(trace, ptNumber, 'hoverlabel.' + attr);
+}
+
+function castHoverinfo(trace, fullLayout, ptNumber) {
+    function _coerce(val) {
+        return Lib.coerceHoverinfo({hoverinfo: val}, {_module: trace._module}, fullLayout);
     }
+
+    return Lib.castOption(trace, ptNumber, 'hoverinfo', _coerce);
 }

src/lib/index.js

@@ -368,6 +368,31 @@ lib.mergeArray = function(traceAttr, cd, cdAttr, fn) {
     }
 };
 
+/** Handler for trace-wide vs per-point options
+ *
+ * @param {object} trace : (full) trace object
+ * @param {number} ptNumber : index of the point in question
+ * @param {string} astr : attribute string
+ * @param {function} [fn] : optional function to apply to each array item
+ *
+ * @return {any}
+ */
+lib.castOption = function(trace, ptNumber, astr, fn) {
+    fn = fn || lib.identity;
+
+    var val = lib.nestedProperty(trace, astr).get();
+
+    if(Array.isArray(val)) {
+        if(Array.isArray(ptNumber) && Array.isArray(val[ptNumber[0]])) {
+            return fn(val[ptNumber[0]][ptNumber[1]]);
+        } else {
+            return fn(val[ptNumber]);
+        }
+    } else {
+        return val;
+    }
+};
+
 /** Returns target as set by 'target' transform attribute
  *
  * @param {object} trace : full trace object

src/plots/gl2d/scene2d.js

@@ -623,8 +623,11 @@ proto.draw = function() {
                 // also it's important to copy, otherwise data is lost by the time event data is read
                 this.emitPointAction(nextSelection, 'plotly_hover');
 
-                var hoverinfo = selection.hoverinfo;
-                if(hoverinfo !== 'all') {
+                var trace = this.fullData[selection.trace.index] || {};
+                var ptNumber = selection.pointIndex;
+                var hoverinfo = Fx.castHoverinfo(trace, fullLayout, ptNumber);
+
+                if(hoverinfo && hoverinfo !== 'all') {
                     var parts = hoverinfo.split('+');
                     if(parts.indexOf('x') === -1) selection.traceCoord[0] = undefined;
                     if(parts.indexOf('y') === -1) selection.traceCoord[1] = undefined;
@@ -633,9 +636,6 @@ proto.draw = function() {
                     if(parts.indexOf('name') === -1) selection.name = undefined;
                 }
 
-                var trace = this.fullData[selection.trace.index] || {};
-                var ptNumber = selection.pointIndex;
-
                 Fx.loneHover({
                     x: selection.screenCoord[0],
                     y: selection.screenCoord[1],

src/plots/gl3d/scene.js

@@ -67,8 +67,8 @@ function render(scene) {
     if(lastPicked !== null) {
         var pdata = project(scene.glplot.cameraParams, selection.dataCoordinate);
         trace = lastPicked.data;
-        var hoverinfo = trace.hoverinfo;
         var ptNumber = selection.index;
+        var hoverinfo = Fx.castHoverinfo(trace, scene.fullLayout, ptNumber);
 
         var xVal = formatter('xaxis', selection.traceCoordinate[0]),
             yVal = formatter('yaxis', selection.traceCoordinate[1]),

src/traces/pie/plot.js

@@ -89,9 +89,9 @@ module.exports = function plot(gd, cdpie) {
                     evt.originalEvent = d3.event;
 
                     // in case fullLayout or fullData has changed without a replot
-                    var fullLayout2 = gd._fullLayout,
-                        trace2 = gd._fullData[trace.index],
-                        hoverinfo = trace2.hoverinfo;
+                    var fullLayout2 = gd._fullLayout;
+                    var trace2 = gd._fullData[trace.index];
+                    var hoverinfo = Fx.castHoverinfo(trace2, fullLayout2, pt.i);
 
                     if(hoverinfo === 'all') hoverinfo = 'label+text+value+percent+name';
 

test/jasmine/tests/gl2d_click_test.js

@@ -145,6 +145,25 @@ describe('Test hover and click interactions', function() {
         expect(text.style('fill')).toEqual(expected.fontColor, 'font.color');
     }
 
+    function assertHoveLabelContent(expected) {
+        var label = expected.label;
+
+        if(label === undefined) return;
+
+        var g = d3.select('.hovertext');
+
+        if(label === null) {
+            expect(g.size()).toBe(0);
+        } else {
+            var lines = g.selectAll('text.nums');
+
+            expect(lines.size()).toBe(label.length);
+            lines.each(function(_, i) {
+                expect(d3.select(this).text()).toEqual(label[i]);
+            });
+        }
+    }
+
     // returns basic hover/click/unhover runner for one xy position
     function makeRunner(pos, expected, opts) {
         opts = opts || {};
@@ -162,6 +181,7 @@ describe('Test hover and click interactions', function() {
                 .then(function(eventData) {
                     assertEventData(eventData, expected);
                     assertHoverLabelStyle(d3.select('g.hovertext'), expected);
+                    assertHoveLabelContent(expected);
                 })
                 .then(_click)
                 .then(function(eventData) {
@@ -196,6 +216,7 @@ describe('Test hover and click interactions', function() {
                 color: 'yellow'
             }
         };
+        _mock.data[0].hoverinfo = _mock.data[0].x.map(function(_, i) { return i % 2 ? 'y' : 'x'; });
         _mock.data[0].hoverlabel = {
             bgcolor: 'blue',
             bordercolor: _mock.data[0].x.map(function(_, i) { return i % 2 ? 'red' : 'green'; })
@@ -204,6 +225,7 @@ describe('Test hover and click interactions', function() {
         var run = makeRunner([655, 317], {
             x: 15.772,
             y: 0.387,
+            label: ['0.387'],
             curveNumber: 0,
             pointNumber: 33,
             bgColor: 'rgb(0, 0, 255)',

test/jasmine/tests/gl_plot_interact_test.js

@@ -180,7 +180,23 @@ describe('Test gl3d plots', function() {
         .then(_hover)
         .then(function() {
             assertHoverLabelStyle('rgb(0, 128, 0)', 'rgb(255, 255, 0)', 20, 'Roboto', 'rgb(0, 255, 255)');
+
+            return Plotly.restyle(gd, 'hoverinfo', [[null, null, 'y', null]]);
         })
+        .then(_hover)
+        .then(function() {
+            var label = d3.selectAll('g.hovertext');
+
+            expect(label.size()).toEqual(1);
+            expect(label.select('text').text()).toEqual('c');
+
+            return Plotly.restyle(gd, 'hoverinfo', [[null, null, 'dont+know', null]]);
+        })
+        .then(_hover)
+        .then(function() {
+            assertHoverText('x: 二 6, 2017', 'y: c', 'z: 100k', 'Clementine');
+        })
+        .catch(fail)
         .then(done);
     });
 
@@ -207,6 +223,11 @@ describe('Test gl3d plots', function() {
             assertHoverLabelStyle('rgb(68, 68, 68)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)');
 
             Plotly.restyle(gd, {
+                'hoverinfo': [[
+                    ['all', 'all', 'all'],
+                    ['all', 'all', 'y'],
+                    ['all', 'all', 'all']
+                ]],
                 'hoverlabel.bgcolor': 'white',
                 'hoverlabel.font.size': 9,
                 'hoverlabel.font.color': [[
@@ -219,6 +240,11 @@ describe('Test gl3d plots', function() {
         .then(_hover)
         .then(function() {
             assertHoverLabelStyle('rgb(255, 255, 255)', 'rgb(68, 68, 68)', 9, 'Arial', 'rgb(0, 255, 255)');
+
+            var label = d3.selectAll('g.hovertext');
+
+            expect(label.size()).toEqual(1);
+            expect(label.select('text').text()).toEqual('2');
         })
         .then(done);
     });

test/jasmine/tests/hover_label_test.js

@@ -1146,7 +1146,8 @@ describe('Test hover label custom styling:', function() {
             // test base case
             return Plotly.update(gd, {
                 hoverlabel: null,
-                hoverinfo: null
+                // all these items should be display as 'all'
+                hoverinfo: [['i+dont+what+im+doing', null, undefined]]
             }, {
                 hoverlabel: null
             });

test/jasmine/tests/hover_pie_test.js

@@ -255,6 +255,18 @@ describe('pie hovering', function() {
                     ['4', 'SUP', '5', '33.3%'],
                     ['rgb(255, 0, 0)', 'rgb(255, 255, 0)', 15, 'Roboto', 'rgb(0, 0, 255)']
                 );
+
+                return Plotly.restyle(gd, 'hoverinfo', [[null, null, null, null, 'label+percent']]);
+            })
+            .then(_hover)
+            .then(function() {
+                assertLabel(['4', '33.3%']);
+
+                return Plotly.restyle(gd, 'hoverinfo', [[null, null, null, null, 'dont+know+what+im-doing']]);
+            })
+            .then(_hover)
+            .then(function() {
+                assertLabel(['4', 'SUP', '5', '33.3%']);
             })
             .catch(fail)
             .then(done);