From 868a41cd1f08ff68a5368e2582c0c8a2503c0b90 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 17 Aug 2021 17:13:44 -0400 Subject: [PATCH 1/7] refactor keys in unified hover legend mock --- src/components/fx/hover.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index e9e92749801..9207824da8e 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1029,13 +1029,14 @@ function createHoverText(hoverData, opts, gd) { if(hoverData.length === 0) return; // mock legend + var hoverlabel = fullLayout.hoverlabel; 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: hoverlabel.font}, + font: hoverlabel.font, + bgcolor: hoverlabel.bgcolor, + bordercolor: hoverlabel.bordercolor, borderwidth: 1, tracegroupgap: 7, traceorder: fullLayout.legend ? fullLayout.legend.traceorder : undefined, From 9759b9f871efe56bea61b184bc27d2aa7ecf13b2 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 17 Aug 2021 17:35:41 -0400 Subject: [PATCH 2/7] use 1.1 X hoverlable.font instead of legendgrouptitle.font in unified hover --- src/components/fx/hover.js | 3 +++ src/components/legend/get_legend_data.js | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 9207824da8e..c55a475c995 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1081,6 +1081,9 @@ function createHoverText(hoverData, opts, gd) { // Draw unified hover label mockLegend._inHover = true; + mockLegend._groupTitleFont = Lib.extendFlat({}, hoverlabel.font, { + size: Math.round(hoverlabel.font.size * 1.1) // larger font size + }); 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; } } From 259c38d45e67e57ff61ad43e817366ad83018c03 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 17 Aug 2021 17:42:26 -0400 Subject: [PATCH 3/7] use 1.2 X hoverlable.font for title in unified hover --- src/components/fx/hover.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index c55a475c995..9539158989e 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1033,7 +1033,12 @@ function createHoverText(hoverData, opts, gd) { var mockLayoutIn = { showlegend: true, legend: { - title: {text: t0, font: hoverlabel.font}, + title: { + text: t0, + font: Lib.extendFlat({}, hoverlabel.font, { + size: Math.round(hoverlabel.font.size * 1.2) // larger font size + }) + }, font: hoverlabel.font, bgcolor: hoverlabel.bgcolor, bordercolor: hoverlabel.bordercolor, From 2fe049047510ba4a80becedb81990eaf371a39fd Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 17 Aug 2021 18:00:17 -0400 Subject: [PATCH 4/7] draft log for PR 5895 --- draftlogs/5895_fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/5895_fix.md diff --git a/draftlogs/5895_fix.md b/draftlogs/5895_fix.md new file mode 100644 index 00000000000..32102c07928 --- /dev/null +++ b/draftlogs/5895_fix.md @@ -0,0 +1 @@ + - Use hoverlabel.font for group titles and increase the size of main hover label in unified hover modes From 870b2e6092d4e342096958562d0b63d87fea0fee Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 24 Aug 2021 12:30:32 -0400 Subject: [PATCH 5/7] use hoverlabel font for main and group titles --- draftlogs/5895_fix.md | 2 +- src/components/fx/hover.js | 14 ++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/draftlogs/5895_fix.md b/draftlogs/5895_fix.md index 32102c07928..b43f8b4aa43 100644 --- a/draftlogs/5895_fix.md +++ b/draftlogs/5895_fix.md @@ -1 +1 @@ - - Use hoverlabel.font for group titles and increase the size of main hover label in unified hover modes + - 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 9539158989e..7ea1d78e4aa 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1030,16 +1030,12 @@ function createHoverText(hoverData, opts, gd) { // mock legend var hoverlabel = fullLayout.hoverlabel; + var font = hoverlabel.font; var mockLayoutIn = { showlegend: true, legend: { - title: { - text: t0, - font: Lib.extendFlat({}, hoverlabel.font, { - size: Math.round(hoverlabel.font.size * 1.2) // larger font size - }) - }, - font: hoverlabel.font, + title: {text: t0, font: font}, + font: font, bgcolor: hoverlabel.bgcolor, bordercolor: hoverlabel.bordercolor, borderwidth: 1, @@ -1086,9 +1082,7 @@ function createHoverText(hoverData, opts, gd) { // Draw unified hover label mockLegend._inHover = true; - mockLegend._groupTitleFont = Lib.extendFlat({}, hoverlabel.font, { - size: Math.round(hoverlabel.font.size * 1.1) // larger font size - }); + mockLegend._groupTitleFont = font; legendDraw(gd, mockLegend); // Position the hover From d95d1f1e2ab7e61c952be6494b9fd8282edca165 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 09:19:04 -0400 Subject: [PATCH 6/7] move assert function inside the test --- test/jasmine/tests/hover_label_test.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 9ceeba1bcb2..ca3c2ffef1d 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -4547,17 +4547,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 +6000,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 From 111c3ee62d706c92d240320636d272e24baffaf9 Mon Sep 17 00:00:00 2001 From: archmoj Date: Wed, 25 Aug 2021 09:41:40 -0400 Subject: [PATCH 7/7] add jasmine test --- test/jasmine/tests/hover_label_test.js | 34 ++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index ca3c2ffef1d..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(); @@ -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}';