diff --git a/draftlogs/5895_fix.md b/draftlogs/5895_fix.md new file mode 100644 index 00000000000..b43f8b4aa43 --- /dev/null +++ b/draftlogs/5895_fix.md @@ -0,0 +1 @@ + - Use hoverlabel.font for group titles in unified hover modes diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index e9e92749801..7ea1d78e4aa 100644 --- a/src/components/fx/hover.js +++ b/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 diff --git a/src/components/legend/get_legend_data.js b/src/components/legend/get_legend_data.js index 6e54ac137f9..202064202a1 100644 --- a/src/components/legend/get_legend_data.js +++ b/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; } } diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 9ceeba1bcb2..9e695041126 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/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}';