More hovertemplates!

src/components/fx/hover.js

@@ -940,7 +940,7 @@ function createHoverText(hoverData, opts, gd) {
             text = d[(hovermode === 'x' ? 'y' : 'x') + 'Label'] || '';
         }
         else if(d.xLabel === undefined) {
-            if(d.yLabel !== undefined) text = d.yLabel;
+            if(d.yLabel !== undefined && d.trace.type !== 'scattercarpet') text = d.yLabel;
         }
         else if(d.yLabel === undefined) text = d.xLabel;
         else text = '(' + d.xLabel + ', ' + d.yLabel + ')';

src/components/fx/hovertemplate_attributes.js

@@ -31,8 +31,7 @@ module.exports = function(opts, extra) {
         valType: 'string',
         role: 'info',
         dflt: '',
-        arrayOk: true,
-        editType: 'none',
+        editType: opts.editType || 'none',
         description: [
             'Template string used for rendering the information that appear on hover box.',
             'Note that this will override `hoverinfo`.',
@@ -46,5 +45,9 @@ module.exports = function(opts, extra) {
         ].join(' ')
     };
 
+    if(opts.arrayOk !== false) {
+        hovertemplate.arrayOk = true;
+    }
+
     return hovertemplate;
 };

src/plots/gl3d/scene.js

@@ -71,18 +71,21 @@ function render(scene) {
         var pdata = project(scene.glplot.cameraParams, selection.dataCoordinate);
         trace = lastPicked.data;
         var ptNumber = selection.index;
-        var hoverinfo = Fx.castHoverinfo(trace, scene.fullLayout, ptNumber);
-        var hoverinfoParts = hoverinfo.split('+');
-        var isHoverinfoAll = hoverinfo === 'all';
 
-        var xVal = formatter('xaxis', selection.traceCoordinate[0]);
-        var yVal = formatter('yaxis', selection.traceCoordinate[1]);
-        var zVal = formatter('zaxis', selection.traceCoordinate[2]);
+        var labels = {
+            xLabel: formatter('xaxis', selection.traceCoordinate[0]),
+            yLabel: formatter('yaxis', selection.traceCoordinate[1]),
+            zLabel: formatter('zaxis', selection.traceCoordinate[2])
+        };
+
+        var hoverinfo = Fx.castHoverinfo(trace, scene.fullLayout, ptNumber);
+        var hoverinfoParts = (hoverinfo || '').split('+');
+        var isHoverinfoAll = hoverinfo && hoverinfo === 'all';
 
-        if(!isHoverinfoAll) {
-            if(hoverinfoParts.indexOf('x') === -1) xVal = undefined;
-            if(hoverinfoParts.indexOf('y') === -1) yVal = undefined;
-            if(hoverinfoParts.indexOf('z') === -1) zVal = undefined;
+        if(!trace.hovertemplate && !isHoverinfoAll) {
+            if(hoverinfoParts.indexOf('x') === -1) labels.xLabel = undefined;
+            if(hoverinfoParts.indexOf('y') === -1) labels.yLabel = undefined;
+            if(hoverinfoParts.indexOf('z') === -1) labels.zLabel = undefined;
             if(hoverinfoParts.indexOf('text') === -1) selection.textLabel = undefined;
             if(hoverinfoParts.indexOf('name') === -1) lastPicked.name = undefined;
         }
@@ -91,27 +94,38 @@ function render(scene) {
         var vectorTx = [];
 
         if(trace.type === 'cone' || trace.type === 'streamtube') {
+            labels.uLabel = formatter('xaxis', selection.traceCoordinate[3]);
             if(isHoverinfoAll || hoverinfoParts.indexOf('u') !== -1) {
-                vectorTx.push('u: ' + formatter('xaxis', selection.traceCoordinate[3]));
+                vectorTx.push('u: ' + labels.uLabel);
             }
+
+            labels.vLabel = formatter('yaxis', selection.traceCoordinate[4]);
             if(isHoverinfoAll || hoverinfoParts.indexOf('v') !== -1) {
-                vectorTx.push('v: ' + formatter('yaxis', selection.traceCoordinate[4]));
+                vectorTx.push('v: ' + labels.vLabel);
             }
+
+            labels.wLabel = formatter('zaxis', selection.traceCoordinate[5]);
             if(isHoverinfoAll || hoverinfoParts.indexOf('w') !== -1) {
-                vectorTx.push('w: ' + formatter('zaxis', selection.traceCoordinate[5]));
+                vectorTx.push('w: ' + labels.wLabel);
             }
+
+            labels.normLabel = selection.traceCoordinate[6].toPrecision(3);
             if(isHoverinfoAll || hoverinfoParts.indexOf('norm') !== -1) {
-                vectorTx.push('norm: ' + selection.traceCoordinate[6].toPrecision(3));
+                vectorTx.push('norm: ' + labels.normLabel);
             }
-            if(trace.type === 'streamtube' && (isHoverinfoAll || hoverinfoParts.indexOf('divergence') !== -1)) {
-                vectorTx.push('divergence: ' + selection.traceCoordinate[7].toPrecision(3));
+            if(trace.type === 'streamtube') {
+                labels.divergenceLabel = selection.traceCoordinate[7].toPrecision(3);
+                if(isHoverinfoAll || hoverinfoParts.indexOf('divergence') !== -1) {
+                    vectorTx.push('divergence: ' + labels.divergenceLabel);
+                }
             }
             if(selection.textLabel) {
                 vectorTx.push(selection.textLabel);
             }
             tx = vectorTx.join('<br>');
         } else if(trace.type === 'isosurface') {
-            vectorTx.push('value: ' + Axes.tickText(scene.mockAxis, scene.mockAxis.d2l(selection.traceCoordinate[3]), 'hover').text);
+            labels.valueLabel = Axes.tickText(scene.mockAxis, scene.mockAxis.d2l(selection.traceCoordinate[3]), 'hover').text;
+            vectorTx.push('value: ' + labels.valueLabel);
             if(selection.textLabel) {
                 vectorTx.push(selection.textLabel);
             }
@@ -120,27 +134,6 @@ function render(scene) {
             tx = selection.textLabel;
         }
 
-        if(scene.fullSceneLayout.hovermode) {
-            Fx.loneHover({
-                x: (0.5 + 0.5 * pdata[0] / pdata[3]) * width,
-                y: (0.5 - 0.5 * pdata[1] / pdata[3]) * height,
-                xLabel: xVal,
-                yLabel: yVal,
-                zLabel: zVal,
-                text: tx,
-                name: lastPicked.name,
-                color: Fx.castHoverOption(trace, ptNumber, 'bgcolor') || lastPicked.color,
-                borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
-                fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
-                fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
-                fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color')
-            }, {
-                container: svgContainer,
-                gd: scene.graphDiv
-            });
-        }
-
-        // TODO not sure if streamtube x/y/z should be emitted as x/y/z
         var pointData = {
             x: selection.traceCoordinate[0],
             y: selection.traceCoordinate[1],
@@ -151,18 +144,41 @@ function render(scene) {
             pointNumber: ptNumber
         };
 
+        Fx.appendArrayPointValue(pointData, trace, ptNumber);
+
         if(trace._module.eventData) {
             pointData = trace._module.eventData(pointData, selection, trace, {}, ptNumber);
         }
 
-        Fx.appendArrayPointValue(pointData, trace, ptNumber);
-
         var eventData = {points: [pointData]};
 
+        if(scene.fullSceneLayout.hovermode) {
+            Fx.loneHover({
+                trace: trace,
+                x: (0.5 + 0.5 * pdata[0] / pdata[3]) * width,
+                y: (0.5 - 0.5 * pdata[1] / pdata[3]) * height,
+                xLabel: labels.xLabel,
+                yLabel: labels.yLabel,
+                zLabel: labels.zLabel,
+                text: tx,
+                name: lastPicked.name,
+                color: Fx.castHoverOption(trace, ptNumber, 'bgcolor') || lastPicked.color,
+                borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
+                fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
+                fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
+                fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color'),
+                hovertemplate: Lib.castOption(trace, ptNumber, 'hovertemplate'),
+                hovertemplateLabels: Lib.extendFlat({}, pointData, labels),
+                eventData: [pointData]
+            }, {
+                container: svgContainer,
+                gd: scene.graphDiv
+            });
+        }
+
         if(selection.buttons && selection.distance < 5) {
             scene.graphDiv.emit('plotly_click', eventData);
-        }
-        else {
+        } else {
             scene.graphDiv.emit('plotly_hover', eventData);
         }
 

src/traces/cone/attributes.js

@@ -10,6 +10,7 @@
 
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var mesh3dAttrs = require('../mesh3d/attributes');
 var baseAttrs = require('../../plots/attributes');
 
@@ -157,7 +158,8 @@ var attrs = {
             'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
             'these elements will be seen in the hover labels.'
         ].join(' ')
-    }
+    },
+    hovertemplate: hovertemplateAttrs({editType: 'calc'}, {keys: ['norm']})
 };
 
 extendFlat(attrs, colorscaleAttrs('', {

src/traces/cone/defaults.js

@@ -52,6 +52,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'c'});
 
     coerce('text');
+    coerce('hovertemplate');
 
     // disable 1D transforms (for now)
     traceOut._length = null;

src/traces/cone/index.js

@@ -22,6 +22,10 @@ module.exports = {
     },
     calc: require('./calc'),
     plot: require('./convert'),
+    eventData: function(out, pt) {
+        out.norm = pt.traceCoordinate[6];
+        return out;
+    },
 
     meta: {
         description: [

src/traces/contour/attributes.js

@@ -35,6 +35,7 @@ module.exports = extendFlat({
     xtype: heatmapAttrs.xtype,
     ytype: heatmapAttrs.ytype,
     zhoverformat: heatmapAttrs.zhoverformat,
+    hovertemplate: heatmapAttrs.hovertemplate,
 
     connectgaps: heatmapAttrs.connectgaps,
 

src/traces/contour/defaults.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var Lib = require('../../lib');
@@ -34,6 +33,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('hovertemplate');
+
     var isConstraint = (coerce('contours.type') === 'constraint');
     coerce('connectgaps', Lib.isArray1D(traceOut.z));
 

src/traces/heatmap/attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var scatterAttrs = require('../scatter/attributes');
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
 
@@ -111,6 +112,8 @@ module.exports = extendFlat({
             'https://github.com/d3/d3-format/blob/master/README.md#locale_format'
         ].join(' ')
     },
+    hovertemplate: hovertemplateAttrs()
+}, {
     transforms: undefined
 },
     colorscaleAttrs('', {

src/traces/heatmap/defaults.js

@@ -29,6 +29,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('hovertemplate');
 
     handleStyleDefaults(traceIn, traceOut, coerce, layout);
 

src/traces/histogram/event_data.js

@@ -13,6 +13,9 @@ module.exports = function eventData(out, pt, trace, cd, pointNumber) {
     out.x = 'xVal' in pt ? pt.xVal : pt.x;
     out.y = 'yVal' in pt ? pt.yVal : pt.y;
 
+    // for 2d histograms
+    if('zLabelVal' in pt) out.z = pt.zLabelVal;
+
     if(pt.xa) out.xaxis = pt.xa;
     if(pt.ya) out.yaxis = pt.ya;
 

src/traces/histogram2d/attributes.js

@@ -11,6 +11,7 @@
 var histogramAttrs = require('../histogram/attributes');
 var makeBinAttrs = require('../histogram/bin_attributes');
 var heatmapAttrs = require('../heatmap/attributes');
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
 
@@ -47,7 +48,8 @@ module.exports = extendFlat(
         xgap: heatmapAttrs.xgap,
         ygap: heatmapAttrs.ygap,
         zsmooth: heatmapAttrs.zsmooth,
-        zhoverformat: heatmapAttrs.zhoverformat
+        zhoverformat: heatmapAttrs.zhoverformat,
+        hovertemplate: hovertemplateAttrs({}, {keys: 'z'})
     },
     colorscaleAttrs('', {
         cLetter: 'z',

src/traces/histogram2d/defaults.js

@@ -29,4 +29,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     colorscaleDefaults(
         traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'}
     );
+    coerce('hovertemplate');
 };

src/traces/histogram2dcontour/attributes.js

@@ -34,7 +34,8 @@ module.exports = extendFlat({
     ncontours: contourAttrs.ncontours,
     contours: contourAttrs.contours,
     line: contourAttrs.line,
-    zhoverformat: histogram2dAttrs.zhoverformat
+    zhoverformat: histogram2dAttrs.zhoverformat,
+    hovertemplate: histogram2dAttrs.hovertemplate
 },
     colorscaleAttrs('', {
         cLetter: 'z',

src/traces/histogram2dcontour/defaults.js

@@ -31,4 +31,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     handleContoursDefaults(traceIn, traceOut, coerce, coerce2);
     handleStyleDefaults(traceIn, traceOut, coerce, layout);
+    coerce('hovertemplate');
 };

src/traces/isosurface/attributes.js

@@ -10,6 +10,7 @@
 
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var meshAttrs = require('../mesh3d/attributes');
 var baseAttrs = require('../../plots/attributes');
 
@@ -224,7 +225,8 @@ var attrs = module.exports = overrideAll(extendFlat({
             'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
             'these elements will be seen in the hover labels.'
         ].join(' ')
-    }
+    },
+    hovertemplate: hovertemplateAttrs()
 },
 
 colorscaleAttrs('', {

src/traces/isosurface/defaults.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var Registry = require('../../registry');
@@ -85,6 +84,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     // Coerce remaining properties
     [
         'text',
+        'hovertemplate',
         'lighting.ambient',
         'lighting.diffuse',
         'lighting.specular',

src/traces/mesh3d/attributes.js

@@ -10,6 +10,7 @@
 
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var surfaceAtts = require('../surface/attributes');
 var baseAttrs = require('../../plots/attributes');
 
@@ -89,6 +90,7 @@ module.exports = extendFlat({
             'these elements will be seen in the hover labels.'
         ].join(' ')
     },
+    hovertemplate: hovertemplateAttrs({editType: 'calc'}),
 
     delaunayaxis: {
         valType: 'enumerated',

src/traces/mesh3d/defaults.js

@@ -88,6 +88,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('hovertemplate');
 
     // disable 1D transforms
     // x/y/z should match lengths, and i/j/k should match as well, but