fixes #2044 - add hoverinfo arrayOk support to ...

etpinard · etpinard · commit 0a772397436c · 2017-10-03T16:34:58.000-04:00
... scattergeo, choropleth, scatterternary and scattermapbox - these are all the trace type that rely on `extraText` built in their _module.hoverPoints method - this commit should've been part of PR #1761
diff --git a/src/traces/choropleth/hover.js b/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 = [];
 
diff --git a/src/traces/scattercarpet/hover.js b/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]);
diff --git a/src/traces/scattergeo/hover.js b/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;
diff --git a/src/traces/scattermapbox/hover.js b/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;
diff --git a/src/traces/scatterternary/hover.js b/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>');
 
diff --git a/test/jasmine/tests/carpet_test.js b/test/jasmine/tests/carpet_test.js
@@ -603,4 +603,15 @@ describe('scattercarpet hover labels', function() {
         )
         .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);
+    });
 });
diff --git a/test/jasmine/tests/choropleth_test.js b/test/jasmine/tests/choropleth_test.js
@@ -128,4 +128,16 @@ describe('Test choropleth hover:', function() {
         )
         .then(done);
     });
+
+    it('should generate hover label with arrayOk \'hoverinfo\' settings', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/geo_first.json'));
+        fig.data[1].hoverinfo = ['location', 'z', 'location+name'];
+
+        run(
+            [400, 160],
+            fig,
+            ['RUS', 'trace 1']
+        )
+        .then(done);
+    });
 });
diff --git a/test/jasmine/tests/scattergeo_test.js b/test/jasmine/tests/scattergeo_test.js
@@ -315,4 +315,10 @@ describe('Test scattergeo hover', function() {
         .then(done);
     });
 
+    it('should generate hover label with arrayOk \'hoverinfo\' settings', function(done) {
+        Plotly.restyle(gd, 'hoverinfo', [['lon', null, 'lat+name']]).then(function() {
+            check([381, 221], ['lon: 10°', null]);
+        })
+        .then(done);
+    });
 });
diff --git a/test/jasmine/tests/scattermapbox_test.js b/test/jasmine/tests/scattermapbox_test.js
@@ -7,6 +7,7 @@ var convert = require('@src/traces/scattermapbox/convert');
 
 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 click = require('../assets/click');
@@ -604,6 +605,31 @@ describe('@noCI scattermapbox hover', function() {
         })
         .then(done);
     });
+
+    it('should generate hover label (\'hoverinfo\' array case)', function(done) {
+        function check(expected) {
+            var out = hoverPoints(getPointData(gd), 11, 11)[0];
+            expect(out.extraText).toEqual(expected);
+        }
+
+        Plotly.restyle(gd, 'hoverinfo', [['lon', 'lat', 'lon+lat+name']]).then(function() {
+            check('lon: 10°');
+            return Plotly.restyle(gd, 'hoverinfo', [['lat', 'lon', 'name']]);
+        })
+        .then(function() {
+            check('lat: 10°');
+            return Plotly.restyle(gd, 'hoverinfo', [['text', 'lon', 'name']]);
+        })
+        .then(function() {
+            check('Apple');
+            return Plotly.restyle(gd, 'hoverinfo', [[null, 'lon', 'name']]);
+        })
+        .then(function() {
+            check('(10°, 10°)<br>Apple');
+        })
+        .catch(fail)
+        .then(done);
+    });
 });
 
 describe('@noCI Test plotly events on a scattermapbox plot:', function() {
diff --git a/test/jasmine/tests/ternary_test.js b/test/jasmine/tests/ternary_test.js
@@ -145,6 +145,17 @@ describe('ternary plots', function() {
                     fontSize: 13,
                     fontFamily: 'Gravitas'
                 }, 'after hoverlabel styling restyle call');
+
+                return Plotly.restyle(gd, 'hoverinfo', [['a', 'b+c', 'b']]);
+            })
+            .then(function() {
+                check('Component A: 0.5', {
+                    bgcolor: 'rgb(31, 119, 180)',
+                    bordercolor: 'rgb(0, 0, 255)',
+                    fontColor: 'rgb(0, 0, 255)',
+                    fontSize: 13,
+                    fontFamily: 'Gravitas'
+                }, 'after hoverlabel styling restyle call');
             })
             .catch(fail)
             .then(done);
