Merge pull request #3398 from plotly/more_hovertemplates

adding hovertemplates to polar bar and scatter and ternary scatter

Author: nicolaskruchten

src/traces/barpolar/attributes.js

@@ -8,6 +8,7 @@
 
 'use strict';
 
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var scatterPolarAttrs = require('../scatterpolar/attributes');
 var barAttrs = require('../bar/attributes');
@@ -69,6 +70,7 @@ module.exports = {
     marker: barAttrs.marker,
 
     hoverinfo: scatterPolarAttrs.hoverinfo,
+    hovertemplate: hovertemplateAttrs(),
 
     selected: barAttrs.selected,
     unselected: barAttrs.unselected

src/traces/barpolar/defaults.js

@@ -33,6 +33,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('width');
 
     coerce('text');
+    coerce('hovertemplate');
     // coerce('hovertext');
 
     // var textPosition = coerce('textposition');

src/traces/barpolar/hover.js

@@ -61,6 +61,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     var _cdi = Lib.extendFlat({}, cdi, {r: cdi.s, theta: cdi.p});
     fillHoverText(cdi, trace, pointData);
     makeHoverPointText(_cdi, trace, subplot, pointData);
+    pointData.hovertemplate = trace.hovertemplate;
     pointData.color = getTraceColor(trace, cdi);
     pointData.xLabelVal = pointData.yLabelVal = undefined;
 

src/traces/scatterpolar/attributes.js

@@ -8,6 +8,7 @@
 
 'use strict';
 
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var scatterAttrs = require('../scatter/attributes');
 var plotAttrs = require('../../plots/attributes');
@@ -130,6 +131,7 @@ module.exports = {
         flags: ['r', 'theta', 'text', 'name']
     }),
     hoveron: scatterAttrs.hoveron,
+    hovertemplate: hovertemplateAttrs(),
 
     selected: scatterAttrs.selected,
     unselected: scatterAttrs.unselected

src/traces/scatterpolar/defaults.js

@@ -35,6 +35,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     coerce('mode', len < PTS_LINESONLY ? 'lines+markers' : 'lines');
     coerce('text');
     coerce('hovertext');
+    if(traceOut.hoveron !== 'fills') coerce('hovertemplate');
 
     if(subTypes.hasLines(traceOut)) {
         handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);

src/traces/scatterpolar/hover.js

@@ -32,41 +32,44 @@ function hoverPoints(pointData, xval, yval, hovermode) {
     newPointData.xLabelVal = undefined;
     newPointData.yLabelVal = undefined;
     makeHoverPointText(cdi, trace, subplot, newPointData);
-
+    newPointData.hovertemplate = trace.hovertemplate;
     return scatterPointData;
 }
 
 function makeHoverPointText(cdi, trace, subplot, pointData) {
+
     var radialAxis = subplot.radialAxis;
     var angularAxis = subplot.angularAxis;
-    var hoverinfo = cdi.hi || trace.hoverinfo;
-    var parts = hoverinfo.split('+');
-    var text = [];
-
     radialAxis._hovertitle = 'r';
     angularAxis._hovertitle = 'θ';
 
+    var hoverinfo = cdi.hi || trace.hoverinfo;
+    var text = [];
     function textPart(ax, val) {
         text.push(ax._hovertitle + ': ' + Axes.tickText(ax, val, 'hover').text);
     }
 
-    if(parts.indexOf('all') !== -1) parts = ['r', 'theta', 'text'];
-    if(parts.indexOf('r') !== -1) {
-        textPart(radialAxis, radialAxis.c2l(cdi.r));
-    }
-    if(parts.indexOf('theta') !== -1) {
-        var theta = cdi.theta;
-        textPart(
-            angularAxis,
-            angularAxis.thetaunit === 'degrees' ? Lib.rad2deg(theta) : theta
-        );
-    }
-    if(parts.indexOf('text') !== -1 && pointData.text) {
-        text.push(pointData.text);
-        delete pointData.text;
-    }
+    if(!trace.hovertemplate) {
+        var parts = hoverinfo.split('+');
+
+        if(parts.indexOf('all') !== -1) parts = ['r', 'theta', 'text'];
+        if(parts.indexOf('r') !== -1) {
+            textPart(radialAxis, radialAxis.c2l(cdi.r));
+        }
+        if(parts.indexOf('theta') !== -1) {
+            var theta = cdi.theta;
+            textPart(
+                angularAxis,
+                angularAxis.thetaunit === 'degrees' ? Lib.rad2deg(theta) : theta
+            );
+        }
+        if(parts.indexOf('text') !== -1 && pointData.text) {
+            text.push(pointData.text);
+            delete pointData.text;
+        }
 
-    pointData.extraText = text.join('<br>');
+        pointData.extraText = text.join('<br>');
+    }
 }
 
 module.exports = {

src/traces/scatterpolargl/attributes.js

@@ -23,6 +23,7 @@ module.exports = {
 
     text: scatterPolarAttrs.text,
     hovertext: scatterPolarAttrs.hovertext,
+    hovertemplate: scatterPolarAttrs.hovertemplate,
 
     line: scatterGlAttrs.line,
     connectgaps: scatterGlAttrs.connectgaps,

src/traces/scatterpolargl/defaults.js

@@ -35,6 +35,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode', len < PTS_LINESONLY ? 'lines+markers' : 'lines');
     coerce('text');
     coerce('hovertext');
+    if(traceOut.hoveron !== 'fills') coerce('hovertemplate');
 
     if(subTypes.hasLines(traceOut)) {
         handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);

src/traces/scatterternary/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');
@@ -147,4 +148,5 @@ module.exports = {
         flags: ['a', 'b', 'c', 'text', 'name']
     }),
     hoveron: scatterAttrs.hoveron,
+    hovertemplate: hovertemplateAttrs(),
 };

src/traces/scatterternary/defaults.js

@@ -61,6 +61,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     coerce('text');
     coerce('hovertext');
+    if(traceOut.hoveron !== 'fills') coerce('hovertemplate');
 
     var defaultMode = len < constants.PTS_LINESONLY ? 'lines+markers' : 'lines';
     coerce('mode', defaultMode);

src/traces/scatterternary/hover.js

@@ -52,19 +52,18 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var trace = newPointData.trace;
     var ternary = newPointData.subplot;
     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(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);
-
+    if(!trace.hovertemplate) {
+        var parts = hoverinfo.split('+');
+        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>');
-
+    newPointData.hovertemplate = trace.hovertemplate;
     return scatterPointData;
 };

test/jasmine/tests/barpolar_test.js

@@ -115,6 +115,22 @@ describe('Test barpolar hover:', function() {
             extraText: 'r: 1<br>θ: 0°',
             color: '#1f77b4'
         }
+    }, {
+        desc: 'hovertemplate',
+        traces: [{
+            r: [1, 2, 3],
+            theta: [0, 90, 180],
+            hovertemplate: 'tpl',
+        }],
+        xval: 1,
+        yval: 0,
+        exp: {
+            index: 0,
+            x: 263.33,
+            y: 200,
+            hovertemplate: 'tpl',
+            color: '#1f77b4'
+        }
     }, {
         desc: 'with custom text scalar',
         traces: [{

test/jasmine/tests/scatterpolar_test.js

@@ -109,6 +109,14 @@ describe('Test scatterpolar hover:', function() {
         desc: 'base',
         nums: 'r: 4.022892\nθ: 128.342°',
         name: 'Trial 3'
+    }, {
+        desc: 'with hovertemplate',
+        patch: function(fig) {
+            fig.data[2].hovertemplate = 'template %{r} %{theta}';
+            return fig;
+        },
+        nums: 'template 4.02289202968 128.342009045',
+        name: 'Trial 3'
     }, {
         desc: '(no labels - out of sector)',
         patch: function(fig) {

test/jasmine/tests/scatterpolargl_test.js

@@ -44,6 +44,14 @@ describe('Test scatterpolargl hover:', function() {
         desc: 'base',
         nums: 'r: 3.886013\nθ: 125.2822°',
         name: 'Trial 3'
+    }, {
+        desc: 'with hovertemplate',
+        patch: function(fig) {
+            fig.data[2].hovertemplate = 'template %{r} %{theta}';
+            return fig;
+        },
+        nums: 'template 3.88601339194 125.282157112',
+        name: 'Trial 3'
     }, {
         desc: '(no labels - out of sector)',
         patch: function(fig) {

test/jasmine/tests/scatterternary_test.js

@@ -402,6 +402,22 @@ describe('scatterternary hover', function() {
         .then(done);
     });
 
+    it('should pass along hovertemplate on hover', function(done) {
+        var xval = 0.42;
+        var yval = 0.37;
+        var hovermode = 'closest';
+        var scatterPointData;
+        Plotly.restyle(gd, {
+            hovertemplate: 'tpl'
+        })
+        .then(function() {
+            scatterPointData = _hover(gd, xval, yval, hovermode);
+            expect(scatterPointData[0].hovertemplate).toEqual('tpl');
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
 });
 
 describe('Test scatterternary *cliponaxis*', function() {