add 'hoverinfo' to scattergeo traces

Author: etpinard

Diff for: src/traces/scattergeo/attributes.js

@@ -56,9 +56,23 @@ module.exports = {
             'If a single string, the same string appears over',
             'all the data points.',
             'If an array of string, the items are mapped in order to the',
-            'this trace\'s (lon,lat) or `locations` coordinates.'
+            'this trace\'s (lon,lat) or `locations` coordinates.',
+            'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
+            'these elements will be seen in the hover labels.'
         ].join(' ')
     }),
+    hovertext: extendFlat({}, scatterAttrs.hovertext, {
+        description: [
+            'Sets hover text elements associated with each (lon,lat) pair',
+            'or item in `locations`.',
+            'If a single string, the same string appears over',
+            'all the data points.',
+            'If an array of string, the items are mapped in order to the',
+            'this trace\'s (lon,lat) or `locations` coordinates.',
+            'To be seen, trace `hoverinfo` must contain a *text* flag.'
+        ].join(' ')
+    }),
+
     textfont: scatterAttrs.textfont,
     textposition: scatterAttrs.textposition,
 

Diff for: src/traces/scattergeo/defaults.js

@@ -32,6 +32,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('hovertext');
     coerce('mode');
 
     if(subTypes.hasLines(traceOut)) {

Diff for: src/traces/scattergeo/hover.js

@@ -101,7 +101,13 @@ function getExtraText(trace, pt, axis) {
     else if(hasLat) text.push('lat: ' + format(pt.lonlat[1]));
 
     if(hasText) {
-        var tx = pt.tx || trace.text;
+        var tx;
+
+        if(pt.htx) tx = pt.htx;
+        else if(trace.hovertext) tx = trace.hovertext;
+        else if(pt.tx) tx = pt.tx;
+        else if(trace.text) tx = trace.text;
+
         if(!Array.isArray(tx)) text.push(tx);
     }
 

Diff for: test/jasmine/tests/scattergeo_test.js

@@ -1,9 +1,15 @@
+var Plotly = require('@lib');
 var Plots = require('@src/plots/plots');
 var Lib = require('@src/lib');
 var BADNUM = require('@src/constants/numerical').BADNUM;
 
 var ScatterGeo = require('@src/traces/scattergeo');
 
+var d3 = require('d3');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var customMatchers = require('../assets/custom_matchers');
+var mouseEvent = require('../assets/mouse_event');
 
 describe('Test scattergeo defaults', function() {
     var traceIn,
@@ -221,3 +227,66 @@ describe('Test scattergeo calc', function() {
         ]);
     });
 });
+
+describe('Test scattergeo hover', function() {
+    var gd;
+
+    // we can't mock ScatterGeo.hoverPoints
+    // because geo hover relies on mouse event
+    // to set the c2p conversion functions
+
+    beforeAll(function() {
+        jasmine.addMatchers(customMatchers);
+    });
+
+    beforeEach(function(done) {
+        gd = createGraphDiv();
+
+        Plotly.plot(gd, [{
+            type: 'scattergeo',
+            lon: [10, 20, 30],
+            lat: [10, 20, 30],
+            text: ['A', 'B', 'C']
+        }])
+        .then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    function assertHoverLabels(expected) {
+        var hoverText = d3.selectAll('g.hovertext').selectAll('tspan');
+
+        hoverText.each(function(_, i) {
+            expect(this.innerHTML).toEqual(expected[i]);
+        });
+    }
+
+    it('should generate hover label info (base case)', function() {
+        mouseEvent('mousemove', 381, 221);
+        assertHoverLabels(['(10°, 10°)', 'A']);
+    });
+
+    it('should generate hover label info (\'text\' single value case)', function(done) {
+        Plotly.restyle(gd, 'text', 'text').then(function() {
+            mouseEvent('mousemove', 381, 221);
+            assertHoverLabels(['(10°, 10°)', 'text']);
+        })
+        .then(done);
+    });
+
+    it('should generate hover label info (\'hovertext\' single value case)', function(done) {
+        Plotly.restyle(gd, 'hovertext', 'hovertext').then(function() {
+            mouseEvent('mousemove', 381, 221);
+            assertHoverLabels(['(10°, 10°)', 'hovertext']);
+        })
+        .then(done);
+    });
+
+    it('should generate hover label info (\'hovertext\' array case)', function(done) {
+        Plotly.restyle(gd, 'hovertext', ['Apple', 'Banana', 'Orange']).then(function() {
+            mouseEvent('mousemove', 381, 221);
+            assertHoverLabels(['(10°, 10°)', 'Apple']);
+        })
+        .then(done);
+    });
+});