implement arrayOk hoverinfo in Fx.hover

- make base hoverinfo `arrayOk: true`
- merge array hoverinfo in calcdata while
  coercing its flags
- look for per-point hoverinfo, fallback to trace hoverinfo
- add checks string (vs array) hoverinfo values

Author: etpinard

src/components/fx/calc.js

@@ -10,9 +10,33 @@
 
 var Lib = require('../../lib');
 var Registry = require('../../registry');
+var baseAttrs = require('../../plots/attributes');
 
 module.exports = function calc(gd) {
     var calcdata = gd.calcdata;
+    var fullLayout = gd._fullLayout;
+
+    function makeCoerceHoverInfo(fullTrace) {
+        var moduleAttrs = fullTrace._module.attributes;
+        var attrs = moduleAttrs.hoverinfo ?
+            {hoverinfo: moduleAttrs.hoverinfo} :
+            baseAttrs;
+        var valObj = attrs.hoverinfo;
+        var dflt;
+
+        if(fullLayout._dataLength === 1) {
+            var flags = valObj.dflt === 'all' ?
+                valObj.flags.slice() :
+                valObj.dflt.split('+');
+
+            flags.splice(flags.indexOf('name'), 1);
+            dflt = flags.join('+');
+        }
+
+        return function(val) {
+            return Lib.coerce({hoverinfo: val}, {}, attrs, 'hoverinfo', dflt);
+        };
+    }
 
     for(var i = 0; i < calcdata.length; i++) {
         var cd = calcdata[i];
@@ -22,6 +46,7 @@ module.exports = function calc(gd) {
 
         var mergeFn = Registry.traceIs(trace, '2dMap') ? paste : Lib.mergeArray;
 
+        mergeFn(trace.hoverinfo, cd, 'hi', makeCoerceHoverInfo(trace));
         mergeFn(trace.hoverlabel.bgcolor, cd, 'hbg');
         mergeFn(trace.hoverlabel.bordercolor, cd, 'hbc');
         mergeFn(trace.hoverlabel.font.size, cd, 'hts');
@@ -30,8 +55,10 @@ module.exports = function calc(gd) {
     }
 };
 
-function paste(traceAttr, cd, cdAttr) {
+function paste(traceAttr, cd, cdAttr, fn) {
+    fn = fn || Lib.identity;
+
     if(Array.isArray(traceAttr)) {
-        cd[0][cdAttr] = traceAttr;
+        cd[0][cdAttr] = fn(traceAttr);
     }
 }

src/components/fx/hover.js

@@ -558,7 +558,7 @@ function createHoverText(hoverData, opts) {
     // to have common labels
     var i, traceHoverinfo;
     for(i = 0; i < hoverData.length; i++) {
-        traceHoverinfo = hoverData[i].trace.hoverinfo;
+        traceHoverinfo = hoverData[i].hoverinfo || hoverData[i].trace.hoverinfo;
         var parts = traceHoverinfo.split('+');
         if(parts.indexOf('all') === -1 &&
             parts.indexOf(hovermode) === -1) {
@@ -1056,6 +1056,30 @@ function cleanPoint(d, hovermode) {
     var cd0 = d.cd[0];
     var cd = d.cd[d.index] || {};
 
+    function fill(key, calcKey, traceKey) {
+        var val;
+
+        if(cd[calcKey]) {
+            val = cd[calcKey];
+        } else if(cd0[calcKey]) {
+            var arr = cd0[calcKey];
+            if(Array.isArray(arr) && Array.isArray(arr[d.index[0]])) {
+                val = arr[d.index[0]][d.index[1]];
+            }
+        } else {
+            val = Lib.nestedProperty(trace, traceKey).get();
+        }
+
+        if(val) d[key] = val;
+    }
+
+    fill('hoverinfo', 'hi', 'hoverinfo');
+    fill('color', 'hbg', 'hoverlabel.bgcolor');
+    fill('borderColor', 'hbc', 'hoverlabel.bordercolor');
+    fill('fontFamily', 'htf', 'hoverlabel.font.family');
+    fill('fontSize', 'hts', 'hoverlabel.font.size');
+    fill('fontColor', 'htc', 'hoverlabel.font.color');
+
     d.posref = hovermode === 'y' ? (d.x0 + d.x1) / 2 : (d.y0 + d.y1) / 2;
 
     // then constrain all the positions to be on the plot
@@ -1123,7 +1147,7 @@ function cleanPoint(d, hovermode) {
         if(hovermode === 'y') d.distance += 1;
     }
 
-    var infomode = d.trace.hoverinfo;
+    var infomode = d.hoverinfo || d.trace.hoverinfo;
     if(infomode !== 'all') {
         infomode = infomode.split('+');
         if(infomode.indexOf('x') === -1) d.xLabel = undefined;
@@ -1133,29 +1157,6 @@ function cleanPoint(d, hovermode) {
         if(infomode.indexOf('name') === -1) d.name = undefined;
     }
 
-    function fill(key, calcKey, traceKey) {
-        var val;
-
-        if(cd[calcKey]) {
-            val = cd[calcKey];
-        } else if(cd0[calcKey]) {
-            var arr = cd0[calcKey];
-            if(Array.isArray(arr) && Array.isArray(arr[d.index[0]])) {
-                val = arr[d.index[0]][d.index[1]];
-            }
-        } else {
-            val = Lib.nestedProperty(trace, traceKey).get();
-        }
-
-        if(val) d[key] = val;
-    }
-
-    fill('color', 'hbg', 'hoverlabel.bgcolor');
-    fill('borderColor', 'hbc', 'hoverlabel.bordercolor');
-    fill('fontFamily', 'htf', 'hoverlabel.font.family');
-    fill('fontSize', 'hts', 'hoverlabel.font.size');
-    fill('fontColor', 'htc', 'hoverlabel.font.color');
-
     return d;
 }
 

src/lib/coerce.js

@@ -196,7 +196,7 @@ exports.valObjects = {
             'Values in `extras` cannot be combined.'
         ].join(' '),
         requiredOpts: ['flags'],
-        otherOpts: ['dflt', 'extras'],
+        otherOpts: ['dflt', 'extras', 'arrayOk'],
         coerceFunction: function(v, propOut, dflt, opts) {
             if(typeof v !== 'string') {
                 propOut.set(dflt);

src/lib/index.js

@@ -349,10 +349,22 @@ lib.noneOrAll = function(containerIn, containerOut, attrList) {
     }
 };
 
-lib.mergeArray = function(traceAttr, cd, cdAttr) {
+/** merge data array into calcdata items
+ *
+ * @param {array} traceAttr : trace attribute
+ * @param {object} cd : calcdata trace
+ * @param {string} cdAttr : calcdata key
+ * @param {function} [fn] : optional function to apply to each array item
+ *
+ */
+lib.mergeArray = function(traceAttr, cd, cdAttr, fn) {
+    fn = fn || lib.identity;
+
     if(Array.isArray(traceAttr)) {
         var imax = Math.min(traceAttr.length, cd.length);
-        for(var i = 0; i < imax; i++) cd[i][cdAttr] = traceAttr[i];
+        for(var i = 0; i < imax; i++) {
+            cd[i][cdAttr] = fn(traceAttr[i]);
+        }
     }
 };
 

src/plot_api/helpers.js

@@ -415,7 +415,7 @@ exports.swapXYData = function(trace) {
             Lib.swapAttrs(trace, ['error_?.color', 'error_?.thickness', 'error_?.width']);
         }
     }
-    if(trace.hoverinfo) {
+    if(typeof trace.hoverinfo === 'string') {
         var hoverInfoParts = trace.hoverinfo.split('+');
         for(i = 0; i < hoverInfoParts.length; i++) {
             if(hoverInfoParts[i] === 'x') hoverInfoParts[i] = 'y';

src/plots/attributes.js

@@ -74,6 +74,7 @@ module.exports = {
         role: 'info',
         flags: ['x', 'y', 'z', 'text', 'name'],
         extras: ['all', 'none', 'skip'],
+        arrayOk: true,
         dflt: 'all',
         description: [
             'Determines which trace information appear on hover.',

test/jasmine/tests/hover_label_test.js

@@ -1034,14 +1034,18 @@ describe('Test hover label custom styling:', function() {
     function assertLabel(className, expectation) {
         var g = d3.select('g.' + className);
 
-        var path = g.select('path');
-        expect(path.style('fill')).toEqual(expectation.path[0], 'bgcolor');
-        expect(path.style('stroke')).toEqual(expectation.path[1], 'bordercolor');
-
-        var text = g.select({hovertext: 'text.nums', axistext: 'text'}[className]);
-        expect(parseInt(text.style('font-size'))).toEqual(expectation.text[0], 'font.size');
-        expect(text.style('font-family').split(',')[0]).toEqual(expectation.text[1], 'font.family');
-        expect(text.style('fill')).toEqual(expectation.text[2], 'font.color');
+        if(expectation === null) {
+            expect(g.size()).toBe(0);
+        } else {
+            var path = g.select('path');
+            expect(path.style('fill')).toEqual(expectation.path[0], 'bgcolor');
+            expect(path.style('stroke')).toEqual(expectation.path[1], 'bordercolor');
+
+            var text = g.select({hovertext: 'text.nums', axistext: 'text'}[className]);
+            expect(parseInt(text.style('font-size'))).toEqual(expectation.text[0], 'font.size');
+            expect(text.style('font-family').split(',')[0]).toEqual(expectation.text[1], 'font.family');
+            expect(text.style('fill')).toEqual(expectation.text[2], 'font.color');
+        }
     }
 
     function assertPtLabel(expectation) {
@@ -1112,8 +1116,40 @@ describe('Test hover label custom styling:', function() {
                 text: [13, 'Arial', 'rgb(255, 255, 255)']
             });
 
+            // test arrayOk case
+            return Plotly.restyle(gd, 'hoverinfo', [['skip', 'name', 'x']]);
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[0] });
+
+            assertPtLabel(null);
+            assertCommonLabel(null);
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[1] });
+
+            assertPtLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(68, 68, 68)'],
+                text: [20, 'Arial', 'rgb(0, 128, 0)']
+            });
+            assertCommonLabel(null);
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[2] });
+
+            assertPtLabel(null);
+            assertCommonLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
+
             // test base case
-            return Plotly.update(gd, { hoverlabel: null }, { hoverlabel: null });
+            return Plotly.update(gd, {
+                hoverlabel: null,
+                hoverinfo: null
+            }, {
+                hoverlabel: null
+            });
         })
         .then(function() {
             _hover(gd, { xval: gd._fullData[0].x[0] });