Skip to content

Commit 8ab0260

Browse files
archmojarchmoj
authored
Merge pull request #5611 from plotly/legend-title-size
New defaults for colorbar.title.font and legend.title.font to depend on colorbar.tickfont and legend.font and increase their sizes
2 parents 65f739d + 7fda4b7 commit 8ab0260

File tree

74 files changed

+53
-30
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+53
-30
lines changed

‎src/components/colorbar/defaults.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,21 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
4848

4949
handleTickValueDefaults(colorbarIn, colorbarOut, coerce, 'linear');
5050

51-
var opts = {outerTicks: false, font: layout.font};
51+
var font = layout.font;
52+
var opts = {outerTicks: false, font: font};
5253
if(ticklabelposition.indexOf('inside') !== -1) {
5354
opts.bgColor = 'black'; // could we instead use the average of colors in the scale?
5455
}
5556
handleTickLabelDefaults(colorbarIn, colorbarOut, coerce, 'linear', opts);
5657
handleTickMarkDefaults(colorbarIn, colorbarOut, coerce, 'linear', opts);
5758

5859
coerce('title.text', layout._dfltTitle.colorbar);
59-
Lib.coerceFont(coerce, 'title.font', layout.font);
60+
61+
var tickFont = colorbarOut.tickfont;
62+
var dfltTitleFont = Lib.extendFlat({}, tickFont, {
63+
color: font.color,
64+
size: Lib.bigFont(tickFont.size)
65+
});
66+
Lib.coerceFont(coerce, 'title.font', dfltTitleFont);
6067
coerce('title.side');
6168
};

‎src/components/legend/attributes.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,8 @@ module.exports = {
189189
font: fontAttrs({
190190
editType: 'legend',
191191
description: [
192-
'Sets this legend\'s title font.'
192+
'Sets this legend\'s title font.',
193+
'Defaults to `legend.font` with its size increased about 20%.'
193194
].join(' '),
194195
}),
195196
side: {

‎src/components/legend/defaults.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,13 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
7777
coerce('bgcolor', layoutOut.paper_bgcolor);
7878
coerce('bordercolor');
7979
coerce('borderwidth');
80-
Lib.coerceFont(coerce, 'font', layoutOut.font);
80+
var itemFont = Lib.coerceFont(coerce, 'font', layoutOut.font);
8181

8282
var orientation = coerce('orientation');
83+
var isHorizontal = orientation === 'h';
8384
var defaultX, defaultY, defaultYAnchor;
8485

85-
if(orientation === 'h') {
86+
if(isHorizontal) {
8687
defaultX = 0;
8788

8889
if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
@@ -119,7 +120,11 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
119120

120121
var titleText = coerce('title.text');
121122
if(titleText) {
122-
coerce('title.side', orientation === 'h' ? 'left' : 'top');
123-
Lib.coerceFont(coerce, 'title.font', layoutOut.font);
123+
coerce('title.side', isHorizontal ? 'left' : 'top');
124+
var dfltTitleFont = Lib.extendFlat({}, itemFont, {
125+
size: Lib.bigFont(itemFont.size)
126+
});
127+
128+
Lib.coerceFont(coerce, 'title.font', dfltTitleFont);
124129
}
125130
};

‎src/components/legend/draw.js

+5
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,11 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
539539
// approximation to height offset to center the font
540540
// to avoid getBoundingClientRect
541541
if(aTitle === MAIN_TITLE) {
542+
if(legendObj.title.side === 'left') {
543+
// add extra space between legend title and itmes
544+
width += constants.itemGap * 2;
545+
}
546+
542547
svgTextUtils.positionText(textEl,
543548
bw + constants.titlePad,
544549
bw + lineHeight

‎src/lib/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -1263,3 +1263,7 @@ lib.join2 = function(arr, mainSeparator, lastSeparator) {
12631263
}
12641264
return arr.join(mainSeparator);
12651265
};
1266+
1267+
lib.bigFont = function(size) {
1268+
return Math.round(1.2 * size);
1269+
};

‎src/plots/cartesian/axes.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -554,7 +554,7 @@ axes.prepTicks = function(ax, opts) {
554554

555555
if(!nt) {
556556
if(ax.type === 'category' || ax.type === 'multicategory') {
557-
minPx = ax.tickfont ? (ax.tickfont.size || 12) * 1.2 : 15;
557+
minPx = ax.tickfont ? Lib.bigFont(ax.tickfont.size || 12) : 15;
558558
nt = ax._length / minPx;
559559
} else {
560560
minPx = ax._id.charAt(0) === 'y' ? 40 : 80;

‎src/plots/cartesian/axis_defaults.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
116116
coerce('title.text', dfltTitle);
117117
Lib.coerceFont(coerce, 'title.font', {
118118
family: font.family,
119-
size: Math.round(font.size * 1.2),
119+
size: Lib.bigFont(font.size),
120120
color: dfltFontColor
121121
});
122122

‎src/plots/polar/layout_defaults.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function handleDefaults(contIn, contOut, coerce, opts) {
9898
coerceAxis('title.text');
9999
Lib.coerceFont(coerceAxis, 'title.font', {
100100
family: opts.font.family,
101-
size: Math.round(opts.font.size * 1.2),
101+
size: Lib.bigFont(opts.font.size),
102102
color: dfltFontColor
103103
});
104104
}

‎src/plots/ternary/layout_defaults.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
8282

8383
Lib.coerceFont(coerce, 'title.font', {
8484
family: options.font.family,
85-
size: Math.round(options.font.size * 1.2),
85+
size: Lib.bigFont(options.font.size),
8686
color: dfltFontColor
8787
});
8888

‎src/traces/carpet/axis_defaults.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
110110
if(title) {
111111
Lib.coerceFont(coerce, 'title.font', {
112112
family: font.family,
113-
size: Math.round(font.size * 1.2),
113+
size: Lib.bigFont(font.size),
114114
color: dfltFontColor
115115
});
116116
coerce('title.offset');

‎test/image/baselines/airfoil.png

488 Bytes

‎test/image/baselines/bar-like_textangle45.png

112 Bytes

‎test/image/baselines/bar-like_textangle60.png

180 Bytes

‎test/image/baselines/bar-marker-line-colorscales.png

-7 Bytes

‎test/image/baselines/cmid-zmid.png

1.08 KB

‎test/image/baselines/colorscale_constraint.png

371 Bytes

‎test/image/baselines/contour-heatmap-coloring-set-contours.png

603 Bytes

‎test/image/baselines/contour_heatmap_coloring_reversescale.png

-2.59 KB

‎test/image/baselines/geo_choropleth-legend.png

-21 Bytes

‎test/image/baselines/geo_choropleth-usa.png

-514 Bytes

‎test/image/baselines/geo_choropleth-usa_legend.png

-1.04 KB

‎test/image/baselines/geo_europe-bubbles.png

83 Bytes

‎test/image/baselines/gl2d_marker_coloraxis.png

180 Bytes

‎test/image/baselines/gl2d_parcoords_coloraxis.png

76 Bytes

‎test/image/baselines/gl2d_scatter-colorscale-colorbar.png

227 Bytes

‎test/image/baselines/gl3d_mesh3d_coloring.png

5.98 KB

‎test/image/baselines/gl3d_reversescale.png

190 Bytes

‎test/image/baselines/gl3d_scatter3d-colorscale-marker-and-line.png

-745 Bytes

‎test/image/baselines/gl3d_scatter3d-colorscale.png

-142 Bytes

‎test/image/baselines/gl3d_surface_contour_start-end-size.png

3.88 KB

‎test/image/baselines/gl3d_surface_opacityscale_contour.png

-885 Bytes

‎test/image/baselines/gl3d_tetrahedra.png

757 Bytes

‎test/image/baselines/gl3d_volume_multiple-traces.png

-6.84 KB

‎test/image/baselines/gl3d_volume_multiple-traces_one-cube.png

334 Bytes

‎test/image/baselines/heatmap_legend.png

-1.5 KB

‎test/image/baselines/layout_metatext.png

123 Bytes

‎test/image/baselines/multicategory_histograms.png

453 Bytes

‎test/image/baselines/pie_inside-text-orientation.png

-2.45 KB

‎test/image/baselines/scatter-colorscale-colorbar.png

138 Bytes

‎test/image/baselines/sunburst_values_colorscale.png

-602 Bytes

‎test/image/baselines/ticklabelposition-4.png

230 Bytes

‎test/image/baselines/titles-avoid-labels.png

437 Bytes

‎test/image/baselines/trace_metatext.png

128 Bytes

‎test/image/baselines/treemap_values_colorscale.png

-1.16 KB

‎test/image/baselines/uniformtext_bar-like_10_auto.png

-788 Bytes

‎test/image/baselines/uniformtext_bar-like_8_horizontal.png

-1.11 KB

‎test/image/baselines/uniformtext_bar-like_8_textangle.png

685 Bytes

‎test/image/baselines/uniformtext_bar-like_8_textangle45.png

316 Bytes

‎test/image/baselines/uniformtext_pie_16_auto.png

-127 Bytes

‎test/image/baselines/uniformtext_pie_8_horizontal.png

-165 Bytes

‎test/image/baselines/uniformtext_pie_8_horizontal_center.png

697 Bytes

‎test/image/baselines/uniformtext_pie_8_radial.png

64 Bytes

‎test/image/baselines/uniformtext_pie_8_tangential.png

-54 Bytes

‎test/image/baselines/uniformtext_pie_inside-text-orientation.png

3.86 KB

‎test/image/baselines/uniformtext_pie_pull.png

-733 Bytes

‎test/image/mocks/bar-like_textangle45.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
"legend": {
145145
"orientation": "h",
146146
"title": {
147-
"text": "<b>bar, funnel & waterfall</b><br>textangle:-45"
147+
"text": "bar, funnel & waterfall<br>textangle:-45"
148148
}
149149
},
150150
"barmode": "stack",

‎test/image/mocks/bar-like_textangle60.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
"legend": {
145145
"orientation": "h",
146146
"title": {
147-
"text": "<b>bar, funnel & waterfall</b><br>textangle:-60"
147+
"text": "bar, funnel & waterfall<br>textangle:-60"
148148
}
149149
},
150150
"barmode": "stack",

‎test/image/mocks/gl3d_mesh3d_coloring.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
"bgcolor": "#eee",
104104
"orientation": "h",
105105
"title": {
106-
"text": "<b>mesh3d with different coloring:</b>",
106+
"text": "mesh3d with different coloring:",
107107
"side": "top left"
108108
}
109109
},

‎test/image/mocks/heatmap_legend.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"orientation": "h",
6161
"title": {
6262
"side": "top left",
63-
"text": "<b><i>heatmap and contour legends<i></b>"
63+
"text": "<i>heatmap and contour legends<i>"
6464
}
6565
},
6666
"height": 800,

‎test/image/mocks/pie_inside-text-orientation.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@
361361
},
362362
"legend": {
363363
"title": {
364-
"text": "<b>inside text orientation</b>"
364+
"text": "inside text orientation"
365365
}
366366
},
367367
"font": {

‎test/image/mocks/uniformtext_bar-like_10_auto.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
"legend": {
137137
"orientation": "h",
138138
"title": {
139-
"text": "<b>bar, funnel & waterfall uniform text</b><br>with <i>auto</i> orientation<br>minsize=8"
139+
"text": "bar, funnel & waterfall uniform text<br>with <i>auto</i> orientation<br>minsize=8"
140140
}
141141
},
142142
"uniformtext": {

‎test/image/mocks/uniformtext_bar-like_8_horizontal.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
"legend": {
144144
"orientation": "h",
145145
"title": {
146-
"text": "<b>bar, funnel & waterfall uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=8"
146+
"text": "bar, funnel & waterfall uniform text<br>with <i>horizontal</i> orientation<br>minsize=8"
147147
}
148148
},
149149
"uniformtext": {

‎test/image/mocks/uniformtext_bar-like_8_textangle.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
"legend": {
144144
"orientation": "h",
145145
"title": {
146-
"text": "<b>bar, funnel & waterfall uniform text</b><br>with vertical orientation<br>textangle:-90 | minsize=8"
146+
"text": "bar, funnel & waterfall uniform text<br>with vertical orientation<br>textangle:-90 | minsize=8"
147147
}
148148
},
149149
"uniformtext": {

‎test/image/mocks/uniformtext_bar-like_8_textangle45.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
"legend": {
144144
"orientation": "h",
145145
"title": {
146-
"text": "<b>bar, funnel & waterfall uniform text</b><br>textangle:-45 | minsize=8"
146+
"text": "bar, funnel & waterfall uniform text<br>textangle:-45 | minsize=8"
147147
}
148148
},
149149
"uniformtext": {

‎test/image/mocks/uniformtext_pie_16_auto.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@
181181
"legend": {
182182
"orientation": "h",
183183
"title": {
184-
"text": "<b>pie uniform text</b><br>with <i>auto</i> orientation<br>minsize=16"
184+
"text": "pie uniform text<br>with <i>auto</i> orientation<br>minsize=16"
185185
}
186186
},
187187
"uniformtext": {

‎test/image/mocks/uniformtext_pie_8_horizontal.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@
229229
"legend": {
230230
"orientation": "h",
231231
"title": {
232-
"text": "<b>pie uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=8"
232+
"text": "pie uniform text<br>with <i>horizontal</i> orientation<br>minsize=8"
233233
}
234234
},
235235
"uniformtext": {

‎test/image/mocks/uniformtext_pie_8_horizontal_center.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@
189189
"legend": {
190190
"orientation": "h",
191191
"title": {
192-
"text": "<b>pie uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=8"
192+
"text": "pie uniform text<br>with <i>horizontal</i> orientation<br>minsize=8"
193193
}
194194
},
195195
"uniformtext": {

‎test/image/mocks/uniformtext_pie_8_radial.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@
237237
"legend": {
238238
"orientation": "h",
239239
"title": {
240-
"text": "<b>pie uniform text</b><br>with <i>radial</i> orientation<br>minsize=8"
240+
"text": "pie uniform text<br>with <i>radial</i> orientation<br>minsize=8"
241241
}
242242
},
243243
"uniformtext": {

‎test/image/mocks/uniformtext_pie_8_tangential.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@
237237
"legend": {
238238
"orientation": "h",
239239
"title": {
240-
"text": "<b>pie uniform text</b><br>with <i>tangential</i> orientation<br>minsize=8"
240+
"text": "pie uniform text<br>with <i>tangential</i> orientation<br>minsize=8"
241241
}
242242
},
243243
"uniformtext": {

‎test/image/mocks/uniformtext_pie_inside-text-orientation.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@
361361
},
362362
"legend": {
363363
"title": {
364-
"text": "<b>inside text orientation</b>"
364+
"text": "inside text orientation"
365365
}
366366
},
367367
"font": {

‎test/image/mocks/uniformtext_pie_pull.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
},
125125
"legend": {
126126
"title": {
127-
"text": "<b>pie uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=20"
127+
"text": "pie uniform text<br>with <i>horizontal</i> orientation<br>minsize=20"
128128
}
129129
},
130130
"uniformtext": {

‎test/jasmine/tests/histogram2d_test.js

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ describe('Test histogram2d', function() {
1818

1919
function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
2020
layout._dfltTitle = {colorbar: 'cb'};
21+
layout.font = {color: '#444'};
2122

2223
return supplyDefaultsRaw(traceIn, traceOut, defaultColor, layout);
2324
}

‎test/jasmine/tests/mesh3d_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('Test mesh3d', function() {
1010

1111
describe('supplyDefaults', function() {
1212
var defaultColor = '#444';
13-
var layout = {_dfltTitle: {colorbar: 'cb'}};
13+
var layout = {_dfltTitle: {colorbar: 'cb'}, font: {color: '#444'}};
1414

1515
var traceIn, traceOut;
1616

‎test/jasmine/tests/surface_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('Test surface', function() {
1010

1111
describe('supplyDefaults', function() {
1212
var defaultColor = '#444';
13-
var layout = {_dfltTitle: {colorbar: 'cb'}};
13+
var layout = {_dfltTitle: {colorbar: 'cb'}, font: {color: '#444'}};
1414

1515
var traceIn, traceOut;
1616

0 commit comments

Comments
 (0)