ArrayOk hoverinfo fixups

src/traces/choropleth/attributes.js

@@ -34,11 +34,9 @@ module.exports = extendFlat({
         editType: 'calc',
         description: 'Sets the color values.'
     },
-    text: {
-        valType: 'data_array',
-        editType: 'calc',
+    text: extendFlat({}, ScatterGeoAttrs.text, {
         description: 'Sets the text elements associated with each location.'
-    },
+    }),
     marker: {
         line: {
             color: ScatterGeoMarkerLineAttrs.color,

src/traces/choropleth/hover.js

@@ -53,17 +53,17 @@ module.exports = function hoverPoints(pointData, xval, yval) {
 };
 
 function makeHoverInfo(pointData, trace, pt, axis) {
-    var hoverinfo = trace.hoverinfo;
+    var hoverinfo = pt.hi || trace.hoverinfo;
 
     var parts = (hoverinfo === 'all') ?
         attributes.hoverinfo.flags :
         hoverinfo.split('+');
 
-    var hasName = (parts.indexOf('name') !== -1),
-        hasLocation = (parts.indexOf('location') !== -1),
-        hasZ = (parts.indexOf('z') !== -1),
-        hasText = (parts.indexOf('text') !== -1),
-        hasIdAsNameLabel = !hasName && hasLocation;
+    var hasName = (parts.indexOf('name') !== -1);
+    var hasLocation = (parts.indexOf('location') !== -1);
+    var hasZ = (parts.indexOf('z') !== -1);
+    var hasText = (parts.indexOf('text') !== -1);
+    var hasIdAsNameLabel = !hasName && hasLocation;
 
     var text = [];
 
@@ -79,7 +79,14 @@ function makeHoverInfo(pointData, trace, pt, axis) {
     }
 
     if(hasZ) text.push(formatter(pt.z));
-    if(hasText) text.push(pt.tx);
+    if(hasText) {
+        var tx;
+
+        if(pt.tx) tx = pt.tx;
+        else if(trace.text) tx = trace.text;
+
+        if(!Array.isArray(tx)) text.push(tx);
+    }
 
     pointData.extraText = text.join('<br>');
 }

src/traces/scattercarpet/hover.js

@@ -46,18 +46,19 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     newPointData.yLabelVal = undefined;
     // TODO: nice formatting, and label by axis title, for a, b, and c?
 
-    var trace = newPointData.trace,
-        carpet = trace._carpet,
-        hoverinfo = trace.hoverinfo.split('+'),
-        text = [];
+    var trace = newPointData.trace;
+    var carpet = trace._carpet;
+    var hoverinfo = cdi.hi || trace.hoverinfo;
+    var parts = hoverinfo.split('+');
+    var text = [];
 
     function textPart(ax, val) {
         text.push(((ax.labelprefix && ax.labelprefix.length > 0) ? ax.labelprefix : (ax._hovertitle + ': ')) + val.toFixed(3) + ax.labelsuffix);
     }
 
-    if(hoverinfo.indexOf('all') !== -1) hoverinfo = ['a', 'b'];
-    if(hoverinfo.indexOf('a') !== -1) textPart(carpet.aaxis, cdi.a);
-    if(hoverinfo.indexOf('b') !== -1) textPart(carpet.baxis, cdi.b);
+    if(parts.indexOf('all') !== -1) parts = ['a', 'b'];
+    if(parts.indexOf('a') !== -1) textPart(carpet.aaxis, cdi.a);
+    if(parts.indexOf('b') !== -1) textPart(carpet.baxis, cdi.b);
 
     var ij = carpet.ab2ij([cdi.a, cdi.b]);
     var i0 = Math.floor(ij[0]);
@@ -67,7 +68,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var tj = ij[1] - j0;
 
     var xy = carpet.evalxy([], i0, j0, ti, tj);
-    text.push('y: ' + xy[1].toFixed(3));
+    text.push('y = ' + xy[1].toFixed(3));
 
     newPointData.extraText = text.join('<br>');
 

src/traces/scattergeo/hover.js

@@ -71,29 +71,31 @@ module.exports = function hoverPoints(pointData, xval, yval) {
 };
 
 function getExtraText(trace, pt, axis) {
-    var hoverinfo = trace.hoverinfo;
+    var hoverinfo = pt.hi || trace.hoverinfo;
 
-    var parts = (hoverinfo === 'all') ?
+    var parts = hoverinfo === 'all' ?
         attributes.hoverinfo.flags :
         hoverinfo.split('+');
 
-    var hasLocation = parts.indexOf('location') !== -1 && Array.isArray(trace.locations),
-        hasLon = (parts.indexOf('lon') !== -1),
-        hasLat = (parts.indexOf('lat') !== -1),
-        hasText = (parts.indexOf('text') !== -1);
-
+    var hasLocation = parts.indexOf('location') !== -1 && Array.isArray(trace.locations);
+    var hasLon = (parts.indexOf('lon') !== -1);
+    var hasLat = (parts.indexOf('lat') !== -1);
+    var hasText = (parts.indexOf('text') !== -1);
     var text = [];
 
     function format(val) {
         return Axes.tickText(axis, axis.c2l(val), 'hover').text + '\u00B0';
     }
 
-    if(hasLocation) text.push(pt.loc);
-    else if(hasLon && hasLat) {
+    if(hasLocation) {
+        text.push(pt.loc);
+    } else if(hasLon && hasLat) {
         text.push('(' + format(pt.lonlat[0]) + ', ' + format(pt.lonlat[1]) + ')');
+    } else if(hasLon) {
+        text.push('lon: ' + format(pt.lonlat[0]));
+    } else if(hasLat) {
+        text.push('lat: ' + format(pt.lonlat[1]));
     }
-    else if(hasLon) text.push('lon: ' + format(pt.lonlat[0]));
-    else if(hasLat) text.push('lat: ' + format(pt.lonlat[1]));
 
     if(hasText) {
         var tx;

src/traces/scattermapbox/hover.js

@@ -66,13 +66,14 @@ module.exports = function hoverPoints(pointData, xval, yval) {
 };
 
 function getExtraText(trace, di) {
-    var hoverinfo = trace.hoverinfo.split('+'),
-        isAll = (hoverinfo.indexOf('all') !== -1),
-        hasLon = (hoverinfo.indexOf('lon') !== -1),
-        hasLat = (hoverinfo.indexOf('lat') !== -1);
+    var hoverinfo = di.hi || trace.hoverinfo;
+    var parts = hoverinfo.split('+');
+    var isAll = parts.indexOf('all') !== -1;
+    var hasLon = parts.indexOf('lon') !== -1;
+    var hasLat = parts.indexOf('lat') !== -1;
 
-    var lonlat = di.lonlat,
-        text = [];
+    var lonlat = di.lonlat;
+    var text = [];
 
     // TODO should we use a mock axis to format hover?
     // If so, we'll need to make precision be zoom-level dependent
@@ -82,11 +83,13 @@ function getExtraText(trace, di) {
 
     if(isAll || (hasLon && hasLat)) {
         text.push('(' + format(lonlat[0]) + ', ' + format(lonlat[1]) + ')');
+    } else if(hasLon) {
+        text.push('lon: ' + format(lonlat[0]));
+    } else if(hasLat) {
+        text.push('lat: ' + format(lonlat[1]));
     }
-    else if(hasLon) text.push('lon: ' + format(lonlat[0]));
-    else if(hasLat) text.push('lat: ' + format(lonlat[1]));
 
-    if(isAll || hoverinfo.indexOf('text') !== -1) {
+    if(isAll || parts.indexOf('text') !== -1) {
         var tx;
 
         if(di.htx) tx = di.htx;

src/traces/scatterternary/hover.js

@@ -49,19 +49,20 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     newPointData.yLabelVal = undefined;
     // TODO: nice formatting, and label by axis title, for a, b, and c?
 
-    var trace = newPointData.trace,
-        ternary = trace._ternary,
-        hoverinfo = trace.hoverinfo.split('+'),
-        text = [];
+    var trace = newPointData.trace;
+    var ternary = trace._ternary;
+    var hoverinfo = cdi.hi || trace.hoverinfo;
+    var parts = hoverinfo.split('+');
+    var text = [];
 
     function textPart(ax, val) {
         text.push(ax._hovertitle + ': ' + Axes.tickText(ax, val, 'hover').text);
     }
 
-    if(hoverinfo.indexOf('all') !== -1) hoverinfo = ['a', 'b', 'c'];
-    if(hoverinfo.indexOf('a') !== -1) textPart(ternary.aaxis, cdi.a);
-    if(hoverinfo.indexOf('b') !== -1) textPart(ternary.baxis, cdi.b);
-    if(hoverinfo.indexOf('c') !== -1) textPart(ternary.caxis, cdi.c);
+    if(parts.indexOf('all') !== -1) parts = ['a', 'b', 'c'];
+    if(parts.indexOf('a') !== -1) textPart(ternary.aaxis, cdi.a);
+    if(parts.indexOf('b') !== -1) textPart(ternary.baxis, cdi.b);
+    if(parts.indexOf('c') !== -1) textPart(ternary.caxis, cdi.c);
 
     newPointData.extraText = text.join('<br>');
 

test/jasmine/assets/custom_assertions.js

@@ -59,6 +59,92 @@ exports.assertHoverLabelStyle = function(g, expectation, msg, textSelector) {
     expect(textStyle.fill).toBe(expectation.fontColor, msg + ': font.color');
 };
 
+function assertLabelContent(label, expectation, msg) {
+    var lines = label.selectAll('tspan');
+    var lineCnt = lines.size();
+    var expectMultiLine = Array.isArray(expectation);
+
+    function extract(sel) {
+        return sel.node() ? sel.html() : null;
+    }
+
+    if(lineCnt > 0) {
+        if(expectMultiLine) {
+            expect(lines.size()).toBe(expectation.length, msg + ': # of lines');
+            lines.each(function(_, i) {
+                var l = d3.select(this);
+                expect(extract(l)).toBe(expectation[i], msg + ': tspan line ' + i);
+            });
+        } else {
+            fail('Expected a single-line label, found multiple lines');
+        }
+    } else {
+        if(!expectMultiLine) {
+            expect(extract(label)).toBe(expectation, msg + ': text content');
+        } else {
+            fail('Expected a multi-line label, found single');
+        }
+    }
+}
+
+function count(selector) {
+    return d3.selectAll(selector).size();
+}
+
+exports.assertHoverLabelContent = function(expectation, msg) {
+    if(!msg) msg = '';
+
+    var ptSelector = 'g.hovertext';
+    var ptExpectation = expectation[0];
+    var ptMsg = msg + ' point hover label';
+    var ptCnt = count(ptSelector);
+
+    var axSelector = 'g.axistext';
+    var axExpectation = expectation[1];
+    var axMsg = 'common axis hover label';
+    var axCnt = count(axSelector);
+
+    if(ptCnt === 1) {
+        assertLabelContent(
+            d3.select(ptSelector + '> text.nums'),
+            ptExpectation[0],
+            ptMsg + ' (nums)'
+        );
+        assertLabelContent(
+            d3.select(ptSelector + '> text.name'),
+            ptExpectation[1],
+            ptMsg + ' (name)'
+        );
+    } else if(ptCnt > 1) {
+        expect(ptCnt).toBe(ptExpectation.length, ptMsg + ' # of visible nodes');
+
+        d3.selectAll(ptSelector).each(function(_, i) {
+            assertLabelContent(
+                d3.select(this).select('text.nums'),
+                ptExpectation[i][0],
+                ptMsg + ' (nums ' + i + ')'
+            );
+            assertLabelContent(
+                d3.select(this).select('text.name'),
+                ptExpectation[i][1],
+                ptMsg + ' (name ' + i + ')'
+            );
+        });
+    } else {
+        expect(ptExpectation).toBe(null, ptMsg + ' should not be displayed');
+    }
+
+    if(axCnt > 0) {
+        assertLabelContent(
+            d3.select(axSelector + '> text'),
+            axExpectation,
+            axMsg
+        );
+    } else {
+        expect(axExpectation).toBe(null, axMsg + ' should not be displayed');
+    }
+};
+
 exports.assertClip = function(sel, isClipped, size, msg) {
     expect(sel.size()).toBe(size, msg + ' clip path (selection size)');
 

test/jasmine/tests/carpet_test.js

@@ -11,6 +11,9 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
 
+var mouseEvent = require('../assets/mouse_event');
+var assertHoverLabelContent = require('../assets/custom_assertions').assertHoverLabelContent;
+
 describe('carpet supplyDefaults', function() {
     'use strict';
 
@@ -565,3 +568,50 @@ describe('scattercarpet array attributes', function() {
         .then(done);
     });
 });
+
+describe('scattercarpet hover labels', function() {
+    var gd;
+
+    afterEach(destroyGraphDiv);
+
+    function run(pos, fig, content) {
+        gd = createGraphDiv();
+
+        return Plotly.plot(gd, fig).then(function() {
+            mouseEvent('mousemove', pos[0], pos[1]);
+            assertHoverLabelContent([content, null]);
+        });
+    }
+
+    it('should generate hover label (base)', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
+
+        run(
+            [200, 200], fig,
+            [['a = 0.200', 'b = 3.500', 'y = 2.900'], 'a = 0.2']
+        )
+        .then(done);
+    });
+
+    it('should generate hover label with \'hoverinfo\' set', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
+        fig.data[5].hoverinfo = 'a+y';
+
+        run(
+            [200, 200], fig,
+            [['a = 0.200', 'y = 2.900'], null]
+        )
+        .then(done);
+    });
+
+    it('should generate hover label with arrayOk \'hoverinfo\' settings', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
+        fig.data[5].hoverinfo = ['a+b', 'a+b', 'a+b', 'b+y'];
+
+        run(
+            [200, 200], fig,
+            [['b = 3.500', 'y = 2.900'], null]
+        )
+        .then(done);
+    });
+});