Merge pull request #3436 from plotly/map_hovertemplates

add hovertemplate to choropleth, scattergeo and scattermapbox

Author: nicolaskruchten

src/traces/choropleth/attributes.js

@@ -8,6 +8,7 @@
 
 'use strict';
 
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var scatterGeoAttrs = require('../scattergeo/attributes');
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
@@ -72,7 +73,8 @@ module.exports = extendFlat({
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
         editType: 'calc',
         flags: ['location', 'z', 'text', 'name']
-    })
+    }),
+    hovertemplate: hovertemplateAttrs(),
 },
 
     colorscaleAttrs('', {

src/traces/choropleth/defaults.js

@@ -30,6 +30,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('locationmode');
 
     coerce('text');
+    coerce('hovertemplate');
 
     coerce('marker.line.color');
     coerce('marker.line.width');

src/traces/choropleth/hover.js

@@ -47,13 +47,18 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     pointData.index = pt.index;
     pointData.location = pt.loc;
     pointData.z = pt.z;
+    pointData.hovertemplate = pt.hovertemplate;
 
     makeHoverInfo(pointData, trace, pt, geo.mockAxis);
 
     return [pointData];
 };
 
 function makeHoverInfo(pointData, trace, pt, axis) {
+    if(trace.hovertemplate) {
+        return;
+    }
+
     var hoverinfo = pt.hi || trace.hoverinfo;
 
     var parts = (hoverinfo === 'all') ?

src/traces/scattergeo/attributes.js

@@ -8,6 +8,7 @@
 
 'use strict';
 
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var scatterAttrs = require('../scatter/attributes');
 var plotAttrs = require('../../plots/attributes');
 var colorAttributes = require('../../components/colorscale/attributes');
@@ -122,5 +123,6 @@ module.exports = overrideAll({
 
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
         flags: ['lon', 'lat', 'location', 'text', 'name']
-    })
+    }),
+    hovertemplate: hovertemplateAttrs(),
 }, 'calc', 'nested');

src/traces/scattergeo/defaults.js

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

src/traces/scattergeo/hover.js

@@ -66,11 +66,16 @@ module.exports = function hoverPoints(pointData, xval, yval) {
 
     pointData.color = getTraceColor(trace, di);
     pointData.extraText = getExtraText(trace, di, geo.mockAxis, cd[0].t.labels);
+    pointData.hovertemplate = trace.hovertemplate;
 
     return [pointData];
 };
 
 function getExtraText(trace, pt, axis, labels) {
+    if(trace.hovertemplate) {
+        return;
+    }
+
     var hoverinfo = pt.hi || trace.hoverinfo;
 
     var parts = hoverinfo === 'all' ?

src/traces/scattermapbox/attributes.js

@@ -8,6 +8,7 @@
 
 'use strict';
 
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var scatterGeoAttrs = require('../scattergeo/attributes');
 var scatterAttrs = require('../scatter/attributes');
 var mapboxAttrs = require('../../plots/mapbox/layout_attributes');
@@ -115,5 +116,6 @@ module.exports = overrideAll({
 
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
         flags: ['lon', 'lat', 'text', 'name']
-    })
+    }),
+    hovertemplate: hovertemplateAttrs(),
 }, 'calc', 'nested');

src/traces/scattermapbox/defaults.js

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

src/traces/scattermapbox/hover.js

@@ -66,11 +66,16 @@ module.exports = function hoverPoints(pointData, xval, yval) {
 
     pointData.color = getTraceColor(trace, di);
     pointData.extraText = getExtraText(trace, di, cd[0].t.labels);
+    pointData.hovertemplate = trace.hovertemplate;
 
     return [pointData];
 };
 
 function getExtraText(trace, di, labels) {
+    if(trace.hovertemplate) {
+        return;
+    }
+
     var hoverinfo = di.hi || trace.hoverinfo;
     var parts = hoverinfo.split('+');
     var isAll = parts.indexOf('all') !== -1;

test/jasmine/tests/choropleth_test.js

@@ -114,6 +114,18 @@ describe('Test choropleth hover:', function() {
         .then(done);
     });
 
+    it('should use the hovertemplate', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/geo_first.json'));
+        fig.data[1].hovertemplate = 'tpl %{z}<extra>x</extra>';
+
+        run(
+            [400, 160],
+            fig,
+            ['tpl 10', 'x']
+        )
+        .then(done);
+    });
+
     it('should generate hover label info (\'text\' single value case)', function(done) {
         var fig = Lib.extendDeep({}, require('@mocks/geo_first.json'));
         fig.data[1].text = 'tExT';

test/jasmine/tests/scattergeo_test.js

@@ -291,6 +291,14 @@ describe('Test scattergeo hover', function() {
         .then(done);
     });
 
+    it('should use the hovertemplate', function(done) {
+        Plotly.restyle(gd, 'hovertemplate', 'tpl %{lat}<extra>x</extra>').then(function() {
+            check([381, 221], ['tpl 10', 'x']);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('should generate hover label info (\'text\' single value case)', function(done) {
         Plotly.restyle(gd, 'text', 'text').then(function() {
             check([381, 221], ['(10°, 10°)\ntext', null]);

test/jasmine/tests/scattermapbox_test.js

@@ -776,6 +776,18 @@ describe('@noCI scattermapbox hover', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should pass along hovertemplate', function(done) {
+        Plotly.restyle(gd, 'hovertemplate', 'tpl').then(function() {
+            var xval = 11;
+            var yval = 11;
+
+            var out = hoverPoints(getPointData(gd), xval, yval)[0];
+
+            expect(out.hovertemplate).toEqual('tpl');
+            done();
+        });
+    });
 });
 
 describe('@noCI Test plotly events on a scattermapbox plot:', function() {