set Fx defaults after legend defaults so unified hover label can inherit

Author: antoinerg

src/components/fx/hover.js

@@ -991,7 +991,7 @@ function createHoverText(hoverData, opts, gd) {
             legend: {
                 title: {text: t0, font: fullLayout.hoverlabel.font},
                 font: fullLayout.hoverlabel.font,
-                bgcolor: fullLayout.hoverlabel.bgcolor || fullLayout.paper_bgcolor,
+                bgcolor: fullLayout.hoverlabel.bgcolor,
                 bordercolor: fullLayout.hoverlabel.bordercolor,
                 borderwidth: 1,
                 tracegroupgap: 7,

src/components/fx/hoverlabel_defaults.js

@@ -16,23 +16,23 @@ module.exports = function handleHoverLabelDefaults(contIn, contOut, coerce, opts
 
     function inheritFontAttr(attr) {
         if(!opts.font[attr]) {
-            if(contIn.legend && contIn.legend.font && contIn.legend.font[attr]) {
-                opts.font[attr] = contIn.legend.font[attr];
-            } else if(contIn.font && contIn.font[attr]) {
-                opts.font[attr] = contIn.font[attr];
-            }
+            opts.font[attr] = contOut.legend ? contOut.legend.font[attr] : contOut.font[attr];
         }
     }
 
-    // In unified hover, inherit from legend if available
-    if(contIn && isUnifiedHover(contIn.hovermode)) {
+    // In unified hover, inherit from layout.legend if available or layout
+    if(contOut && isUnifiedHover(contOut.hovermode)) {
         if(!opts.font) opts.font = {};
         inheritFontAttr('size');
         inheritFontAttr('family');
         inheritFontAttr('color');
 
-        if(!opts.bgcolor && contIn.legend && contIn.legend.bgcolor) opts.bgcolor = contIn.legend.bgcolor;
-        if(!opts.bordercolor && contIn.legend && contIn.legend.bordercolor) opts.bordercolor = contIn.legend.bordercolor;
+        if(contOut.legend) {
+            if(!opts.bgcolor) opts.bgcolor = contOut.legend.bgcolor;
+            if(!opts.bordercolor) opts.bordercolor = contOut.legend.bordercolor;
+        } else {
+            if(!opts.bgcolor) opts.bgcolor = contOut.paper_bgcolor;
+        }
     }
 
     coerce('hoverlabel.bgcolor', opts.bgcolor);

src/components/fx/layout_defaults.js

@@ -12,6 +12,7 @@ var Lib = require('../../lib');
 var isUnifiedHover = require('./helpers').isUnifiedHover;
 var layoutAttributes = require('./layout_attributes');
 var handleHoverModeDefaults = require('./hovermode_defaults');
+var handleHoverLabelDefaults = require('./hoverlabel_defaults');
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
     function coerce(attr, dflt) {
@@ -40,4 +41,6 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
     )) {
         layoutOut.dragmode = 'pan';
     }
+
+    handleHoverLabelDefaults(layoutIn, layoutOut, coerce);
 };

src/core.js

@@ -42,8 +42,8 @@ register(require('./traces/scatter'));
 
 // register all registrable components modules
 register([
-    require('./components/fx'),
     require('./components/legend'),
+    require('./components/fx'),
     require('./components/annotations'),
     require('./components/annotations3d'),
     require('./components/shapes'),

test/jasmine/tests/hover_label_test.js

@@ -4376,7 +4376,21 @@ describe('hovermode: (x|y)unified', function() {
 
                 assertRectColor(bgcolor[2], bgcolor[2]);
 
-                // Finally, check that a hoverlabel.bgcolor defined in template wins
+                // Check that a legend.bgcolor defined in template works
+                delete mockCopy.layout;
+                mockCopy.layout = {
+                    hovermode: 'x unified',
+                    template: { layout: { legend: { bgcolor: bgcolor[1], bordercolor: bgcolor[1] } } }
+                };
+
+                return Plotly.newPlot(gd, mockCopy);
+            })
+            .then(function(gd) {
+                _hover(gd, { xval: 3 });
+
+                assertRectColor(bgcolor[1], bgcolor[1]);
+
+                // Check that a hoverlabel.bgcolor defined in template wins
                 delete mockCopy.layout;
                 mockCopy.layout = {
                     hovermode: 'x unified',
@@ -4431,6 +4445,20 @@ describe('hovermode: (x|y)unified', function() {
 
                 assertFont('Arial', '22px', 'rgb(30, 30, 30)');
 
+                // Check that a legend.font defined in template wins
+                delete mockCopy.layout;
+                mockCopy.layout = {
+                    hovermode: 'x unified',
+                    template: { layout: { legend: {font: {size: 5, family: 'Mono', color: 'rgb(5, 5, 5)'}}}},
+                };
+
+                return Plotly.newPlot(gd, mockCopy);
+            })
+            .then(function() {
+                _hover(gd, { xval: 3 });
+
+                assertFont('Mono', '5px', 'rgb(5, 5, 5)');
+
                 // Finally, check that a hoverlabel.font defined in template wins
                 delete mockCopy.layout;
                 mockCopy.layout = {