unified hover: honor hoverlabel.font, then legend.font, then layout.font

Author: antoinerg

src/components/fx/hover.js

@@ -989,8 +989,8 @@ function createHoverText(hoverData, opts, gd) {
         var mockLayoutIn = {
             showlegend: true,
             legend: {
-                title: {text: t0, font: fullLayout.font},
-                font: fullLayout.font,
+                title: {text: t0, font: fullLayout.hoverlabel.font},
+                font: fullLayout.hoverlabel.font,
                 bgcolor: fullLayout.hoverlabel.bgcolor,
                 borderwidth: 1,
                 tracegroupgap: 7,

src/components/fx/hoverlabel_defaults.js

@@ -15,7 +15,9 @@ module.exports = function handleHoverLabelDefaults(contIn, contOut, coerce, opts
     opts = opts || {};
 
     if(contIn && isUnifiedHover(contIn.hovermode)) {
-        opts.bgcolor = contIn.legend ? contIn.legend.bgcolor : contIn.paper_bgcolor;
+        if(!opts.bgcolor) opts.bgcolor = contIn.legend ? contIn.legend.bgcolor : contIn.paper_bgcolor;
+        // Merge in decreasing order of importance layout.font, layout.legend.font and hoverlabel.font
+        opts.font = Lib.extendFlat({}, contIn.font, contIn.legend ? contIn.legend.font : {}, opts.font);
     }
 
     coerce('hoverlabel.bgcolor', opts.bgcolor);

test/jasmine/tests/hover_label_test.js

@@ -3988,14 +3988,18 @@ describe('hovermode: (x|y)unified', function() {
         Lib.clearThrottle();
     }
 
+    function getHoverLabel() {
+        var hoverLayer = d3.select('g.hoverlayer');
+        return hoverLayer.select('g.legend');
+    }
+
     function assertElementCount(selector, size) {
         var g = d3.selectAll(selector);
         expect(g.size()).toBe(size);
     }
 
     function assertLabel(expectation) {
-        var hoverLayer = d3.select('g.hoverlayer');
-        var hover = hoverLayer.select('g.legend');
+        var hover = getHoverLabel();
         var title = hover.select('text.legendtitletext');
         var traces = hover.selectAll('g.traces');
 
@@ -4011,15 +4015,13 @@ describe('hovermode: (x|y)unified', function() {
     }
 
     function assertBgcolor(color) {
-        var hoverLayer = d3.select('g.hoverlayer');
-        var hover = hoverLayer.select('g.legend');
+        var hover = getHoverLabel();
         var bg = hover.select('rect.bg');
         expect(bg.node().style.fill).toBe(color);
     }
 
     function assertSymbol(exp) {
-        var hoverLayer = d3.select('g.hoverlayer');
-        var hover = hoverLayer.select('g.legend');
+        var hover = getHoverLabel();
         var traces = hover.selectAll('g.traces');
         expect(traces.size()).toBe(exp.length);
 
@@ -4034,6 +4036,17 @@ describe('hovermode: (x|y)unified', function() {
         });
     }
 
+    function assertFont(fontFamily, fontSize, fontColor) {
+        var hover = getHoverLabel();
+        var text = hover.select('text.legendtext');
+        var node = text.node();
+
+        var textStyle = window.getComputedStyle(node);
+        expect(textStyle.fontFamily.split(',')[0]).toBe(fontFamily, 'wrong font family');
+        expect(textStyle.fontSize).toBe(fontSize, 'wrong font size');
+        expect(textStyle.fill).toBe(fontColor, 'wrong font color');
+    }
+
     it('set smart defaults for spikeline in x unified', function(done) {
         Plotly.newPlot(gd, [{y: [4, 6, 5]}], {'hovermode': 'x unified', 'xaxis': {'color': 'red'}})
             .then(function(gd) {
@@ -4371,6 +4384,61 @@ describe('hovermode: (x|y)unified', function() {
             .then(done);
     });
 
+    it('should use hoverlabel.font or legend.font or layout.font', function(done) {
+        var mockCopy = Lib.extendDeep({}, mock);
+
+        // Set layout.font
+        mockCopy.layout.font = {size: 20, family: 'Mono', color: 'rgb(10, 10, 10)'};
+        Plotly.newPlot(gd, mockCopy)
+            .then(function(gd) {
+                _hover(gd, { xval: 3});
+
+                assertFont('Mono', '20px', 'rgb(10, 10, 10)');
+
+                // Set legend.font which should win over layout font
+                return Plotly.relayout(gd, {
+                    'showlegend': true,
+                    'legend.font.size': 15,
+                    'legend.font.family': 'Helvetica',
+                    'legend.font.color': 'rgb(20, 20, 20)'
+                });
+            })
+            .then(function(gd) {
+                _hover(gd, { xval: 3 });
+
+                assertFont('Helvetica', '15px', 'rgb(20, 20, 20)');
+
+                // Set hoverlabel.font which should win over legend.font
+                return Plotly.relayout(gd, {
+                    'hoverlabel.font.size': 22,
+                    'hoverlabel.font.family': 'Arial',
+                    'hoverlabel.font.color': 'rgb(30, 30, 30)'
+                });
+            })
+            .then(function() {
+                _hover(gd, { xval: 3 });
+
+                assertFont('Arial', '22px', 'rgb(30, 30, 30)');
+
+                // Finally, check that a hoverlabel.font defined in template wins
+                delete mockCopy.layout;
+                mockCopy.layout = {
+                    hovermode: 'x unified',
+                    template: { layout: { hoverlabel: { font: {family: 'Mono', size: 30, color: 'red'}}}},
+                    legend: {font: {size: 20, family: 'Mono', color: 'rgb(10, 10, 10)'}}
+                };
+
+                return Plotly.newPlot(gd, mockCopy);
+            })
+            .then(function() {
+                _hover(gd, { xval: 3 });
+
+                assertFont('Mono', '30px', 'rgb(255, 0, 0)');
+            })
+            .catch(failTest)
+            .then(done);
+    });
+
     it('should work with hovertemplate', function(done) {
         var mockCopy = Lib.extendDeep({}, mock);
         mockCopy.data[0].hovertemplate = 'hovertemplate: %{y:0.2f}';