Merge pull request #5895 from plotly/unified-hover-fonts

Use `hoverlabel.font` for group titles in unified hover modes

Author: archmoj

draftlogs/5895_fix.md

@@ -0,0 +1 @@
+ - Use hoverlabel.font for group titles in unified hover modes

src/components/fx/hover.js

@@ -1029,13 +1029,15 @@ function createHoverText(hoverData, opts, gd) {
         if(hoverData.length === 0) return;
 
         // mock legend
+        var hoverlabel = fullLayout.hoverlabel;
+        var font = hoverlabel.font;
         var mockLayoutIn = {
             showlegend: true,
             legend: {
-                title: {text: t0, font: fullLayout.hoverlabel.font},
-                font: fullLayout.hoverlabel.font,
-                bgcolor: fullLayout.hoverlabel.bgcolor,
-                bordercolor: fullLayout.hoverlabel.bordercolor,
+                title: {text: t0, font: font},
+                font: font,
+                bgcolor: hoverlabel.bgcolor,
+                bordercolor: hoverlabel.bordercolor,
                 borderwidth: 1,
                 tracegroupgap: 7,
                 traceorder: fullLayout.legend ? fullLayout.legend.traceorder : undefined,
@@ -1080,6 +1082,7 @@ function createHoverText(hoverData, opts, gd) {
 
         // Draw unified hover label
         mockLegend._inHover = true;
+        mockLegend._groupTitleFont = font;
         legendDraw(gd, mockLegend);
 
         // Position the hover

src/components/legend/get_legend_data.js

@@ -4,6 +4,7 @@ var Registry = require('../../registry');
 var helpers = require('./helpers');
 
 module.exports = function getLegendData(calcdata, opts) {
+    var inHover = opts._inHover;
     var grouped = helpers.isGrouped(opts);
     var reversed = helpers.isReversed(opts);
 
@@ -39,7 +40,7 @@ module.exports = function getLegendData(calcdata, opts) {
         var trace = cd0.trace;
         var lgroup = trace.legendgroup;
 
-        if(!opts._inHover && (!trace.visible || !trace.showlegend)) continue;
+        if(!inHover && (!trace.visible || !trace.showlegend)) continue;
 
         if(Registry.traceIs(trace, 'pie-like')) {
             if(!slicesShown[lgroup]) slicesShown[lgroup] = {};
@@ -126,6 +127,7 @@ module.exports = function getLegendData(calcdata, opts) {
             var gt = legendData[i][j].trace.legendgrouptitle;
             if(gt && gt.text) {
                 groupTitle = gt;
+                if(inHover) gt.font = opts._groupTitleFont;
                 break;
             }
         }

test/jasmine/tests/hover_label_test.js

@@ -26,6 +26,8 @@ var assertElemRightTo = customAssertions.assertElemRightTo;
 var assertElemTopsAligned = customAssertions.assertElemTopsAligned;
 var assertElemInside = customAssertions.assertElemInside;
 
+var groupTitlesMock = require('@mocks/legendgroup-titles');
+
 function touch(path, options) {
     var len = path.length;
     Lib.clearThrottle();
@@ -4547,17 +4549,6 @@ 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) {
@@ -6011,6 +6002,17 @@ describe('hovermode: (x|y)unified', function() {
     });
 
     it('should use hoverlabel.font or legend.font or layout.font', function(done) {
+        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');
+        }
+
         var mockCopy = Lib.extendDeep({}, mock);
 
         // Set layout.font
@@ -6078,6 +6080,38 @@ describe('hovermode: (x|y)unified', function() {
             .then(done, done.fail);
     });
 
+    it('should use hoverlabel.font for group titles as well as traces', function(done) {
+        function assertFont(fontFamily, fontSize, fontColor) {
+            var hover = getHoverLabel();
+            var traces = hover.selectAll('g.traces');
+
+            traces.each(function() {
+                var e = d3Select(this);
+                var text = e.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');
+            });
+        }
+
+        var mockCopy = Lib.extendDeep({}, groupTitlesMock);
+
+        mockCopy.layout.hoverlabel = {
+            font: {size: 20, family: 'Mono', color: 'rgb(255, 127, 0)'}
+        };
+
+        Plotly.newPlot(gd, mockCopy)
+            .then(function(gd) {
+                _hover(gd, { xval: 0});
+
+                assertFont('Mono', '20px', 'rgb(255, 127, 0)');
+            })
+            .then(done, done.fail);
+    });
+
     it('should work with hovertemplate', function(done) {
         var mockCopy = Lib.extendDeep({}, mock);
         mockCopy.data[0].hovertemplate = 'hovertemplate: %{y:0.2f}';