add unifiedhovertemplate

Author: archmoj

src/components/fx/hover.js

@@ -1211,10 +1211,26 @@ function createHoverText(hoverData, opts) {
         // mock legend
         var hoverlabel = fullLayout.hoverlabel;
         var font = hoverlabel.font;
+
+        var item0 = groupedHoverData[0];
+
+        var unifiedhovertemplate = (
+            (hovermode === 'y unified') ?
+                item0.xa :
+                item0.ya
+            ).unifiedhovertemplate;
+
+        var mainText = !unifiedhovertemplate ? t0 :
+            Lib.hovertemplateString(unifiedhovertemplate, {}, fullLayout._d3locale,
+                'y unified' ?
+                    {xa: item0.xa, x: item0.xVal} :
+                    {ya: item0.ya, y: item0.yVal}
+        );
+
         var mockLayoutIn = {
             showlegend: true,
             legend: {
-                title: {text: t0, font: font},
+                title: {text: mainText, font: font},
                 font: font,
                 bgcolor: hoverlabel.bgcolor,
                 bordercolor: hoverlabel.bordercolor,

src/plots/cartesian/axis_defaults.js

@@ -100,7 +100,10 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
 
     handleCategoryOrderDefaults(containerIn, containerOut, coerce, options);
 
-    if(axType !== 'category' && !options.noHover) coerce('hoverformat');
+    if(!options.noHover) {
+        if(axType !== 'category') coerce('hoverformat');
+        if(!options.noUnifiedhovertemplate) coerce('unifiedhovertemplate');
+    }
 
     var dfltColor = coerce('color');
     // if axis.color was provided, use it for fonts too; otherwise,

src/plots/cartesian/layout_attributes.js

@@ -5,6 +5,7 @@ var colorAttrs = require('../../components/color/attributes');
 var dash = require('../../components/drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 var templatedArray = require('../../plot_api/plot_template').templatedArray;
+var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var descriptionWithDates = require('../../plots/cartesian/axis_format_attributes').descriptionWithDates;
 
 var ONEDAY = require('../../constants/numerical').ONEDAY;
@@ -975,6 +976,9 @@ module.exports = {
         editType: 'none',
         description: descriptionWithDates('hover text')
     },
+    unifiedhovertemplate: hovertemplateAttrs({
+        noSupportOther: true
+    }),
     // lines and grids
     showline: {
         valType: 'boolean',

src/plots/gl3d/layout/axis_defaults.js

@@ -51,6 +51,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 noTicklabelposition: true,
                 noTicklabeloverflow: true,
                 noInsiderange: true,
+                noUnifiedhovertemplate: true,
                 bgColor: options.bgColor,
                 calendar: options.calendar
             },

src/plots/template_attributes.js

@@ -71,7 +71,9 @@ exports.hovertemplateAttrs = function(opts, extra) {
         description: [
             'Template string used for rendering the information that appear on hover box.',
             'Note that this will override `hoverinfo`.',
-            templateFormatStringDescription({supportOther: true}),
+            templateFormatStringDescription({
+                supportOther: opts.noSupportOther ? false : true
+            }),
             'The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data.',
             'Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.',
             descPart,

test/plot-schema.json

@@ -14949,6 +14949,18 @@
      "editType": "none",
      "valType": "any"
     },
+    "unifiedhovertemplate": {
+     "arrayOk": true,
+     "description": "Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example \"y: %{y}\". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example \"Price: %{y:$.2f}\". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example \"Day: %{2019-01-01|%A}\". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.  Anything contained in tag `<extra>` is displayed in the secondary box, for example \"<extra>{fullData.name}</extra>\". To hide the secondary box completely, use an empty tag `<extra></extra>`.",
+     "dflt": "",
+     "editType": "none",
+     "valType": "string"
+    },
+    "unifiedhovertemplatesrc": {
+     "description": "Sets the source reference on Chart Studio Cloud for `unifiedhovertemplate`.",
+     "editType": "none",
+     "valType": "string"
+    },
     "visible": {
      "description": "A single toggle to hide the axis while preserving interaction like dragging. Default is true when a cheater plot is present on the axis, otherwise false",
      "editType": "plot",
@@ -16193,6 +16205,18 @@
      "editType": "none",
      "valType": "any"
     },
+    "unifiedhovertemplate": {
+     "arrayOk": true,
+     "description": "Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example \"y: %{y}\". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example \"Price: %{y:$.2f}\". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example \"Day: %{2019-01-01|%A}\". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.  Anything contained in tag `<extra>` is displayed in the secondary box, for example \"<extra>{fullData.name}</extra>\". To hide the secondary box completely, use an empty tag `<extra></extra>`.",
+     "dflt": "",
+     "editType": "none",
+     "valType": "string"
+    },
+    "unifiedhovertemplatesrc": {
+     "description": "Sets the source reference on Chart Studio Cloud for `unifiedhovertemplate`.",
+     "editType": "none",
+     "valType": "string"
+    },
     "visible": {
      "description": "A single toggle to hide the axis while preserving interaction like dragging. Default is true when a cheater plot is present on the axis, otherwise false",
      "editType": "plot",