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
plotly · May 5, 2021 · 8ab0260 · 8ab0260
2 parents 65f739d + 7fda4b7
commit 8ab0260
Show file tree

Hide file tree

Showing 74 changed files with 53 additions and 30 deletions.
diff --git a/src/components/colorbar/defaults.js b/src/components/colorbar/defaults.js
@@ -48,14 +48,21 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
 
     handleTickValueDefaults(colorbarIn, colorbarOut, coerce, 'linear');
 
-    var opts = {outerTicks: false, font: layout.font};
+    var font = layout.font;
+    var opts = {outerTicks: false, font: font};
     if(ticklabelposition.indexOf('inside') !== -1) {
         opts.bgColor = 'black'; // could we instead use the average of colors in the scale?
     }
     handleTickLabelDefaults(colorbarIn, colorbarOut, coerce, 'linear', opts);
     handleTickMarkDefaults(colorbarIn, colorbarOut, coerce, 'linear', opts);
 
     coerce('title.text', layout._dfltTitle.colorbar);
-    Lib.coerceFont(coerce, 'title.font', layout.font);
+
+    var tickFont = colorbarOut.tickfont;
+    var dfltTitleFont = Lib.extendFlat({}, tickFont, {
+        color: font.color,
+        size: Lib.bigFont(tickFont.size)
+    });
+    Lib.coerceFont(coerce, 'title.font', dfltTitleFont);
     coerce('title.side');
 };
diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js
@@ -189,7 +189,8 @@ module.exports = {
         font: fontAttrs({
             editType: 'legend',
             description: [
-                'Sets this legend\'s title font.'
+                'Sets this legend\'s title font.',
+                'Defaults to `legend.font` with its size increased about 20%.'
             ].join(' '),
         }),
         side: {

diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js
@@ -77,12 +77,13 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     coerce('bgcolor', layoutOut.paper_bgcolor);
     coerce('bordercolor');
     coerce('borderwidth');
-    Lib.coerceFont(coerce, 'font', layoutOut.font);
+    var itemFont = Lib.coerceFont(coerce, 'font', layoutOut.font);
 
     var orientation = coerce('orientation');
+    var isHorizontal = orientation === 'h';
     var defaultX, defaultY, defaultYAnchor;
 
-    if(orientation === 'h') {
+    if(isHorizontal) {
         defaultX = 0;
 
         if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
@@ -119,7 +120,11 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 
     var titleText = coerce('title.text');
     if(titleText) {
-        coerce('title.side', orientation === 'h' ? 'left' : 'top');
-        Lib.coerceFont(coerce, 'title.font', layoutOut.font);
+        coerce('title.side', isHorizontal ? 'left' : 'top');
+        var dfltTitleFont = Lib.extendFlat({}, itemFont, {
+            size: Lib.bigFont(itemFont.size)
+        });
+
+        Lib.coerceFont(coerce, 'title.font', dfltTitleFont);
     }
 };
diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
@@ -539,6 +539,11 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
         // approximation to height offset to center the font
         // to avoid getBoundingClientRect
         if(aTitle === MAIN_TITLE) {
+            if(legendObj.title.side === 'left') {
+                // add extra space between legend title and itmes
+                width += constants.itemGap * 2;
+            }
+
             svgTextUtils.positionText(textEl,
                 bw + constants.titlePad,
                 bw + lineHeight

diff --git a/src/lib/index.js b/src/lib/index.js
@@ -1263,3 +1263,7 @@ lib.join2 = function(arr, mainSeparator, lastSeparator) {
     }
     return arr.join(mainSeparator);
 };
+
+lib.bigFont = function(size) {
+    return Math.round(1.2 * size);
+};
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -554,7 +554,7 @@ axes.prepTicks = function(ax, opts) {
 
         if(!nt) {
             if(ax.type === 'category' || ax.type === 'multicategory') {
-                minPx = ax.tickfont ? (ax.tickfont.size || 12) * 1.2 : 15;
+                minPx = ax.tickfont ? Lib.bigFont(ax.tickfont.size || 12) : 15;
                 nt = ax._length / minPx;
             } else {
                 minPx = ax._id.charAt(0) === 'y' ? 40 : 80;

diff --git a/src/plots/cartesian/axis_defaults.js b/src/plots/cartesian/axis_defaults.js
@@ -116,7 +116,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     coerce('title.text', dfltTitle);
     Lib.coerceFont(coerce, 'title.font', {
         family: font.family,
-        size: Math.round(font.size * 1.2),
+        size: Lib.bigFont(font.size),
         color: dfltFontColor
     });
 

diff --git a/src/plots/polar/layout_defaults.js b/src/plots/polar/layout_defaults.js
@@ -98,7 +98,7 @@ function handleDefaults(contIn, contOut, coerce, opts) {
                     coerceAxis('title.text');
                     Lib.coerceFont(coerceAxis, 'title.font', {
                         family: opts.font.family,
-                        size: Math.round(opts.font.size * 1.2),
+                        size: Lib.bigFont(opts.font.size),
                         color: dfltFontColor
                     });
                 }

diff --git a/src/plots/ternary/layout_defaults.js b/src/plots/ternary/layout_defaults.js
@@ -82,7 +82,7 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
 
     Lib.coerceFont(coerce, 'title.font', {
         family: options.font.family,
-        size: Math.round(options.font.size * 1.2),
+        size: Lib.bigFont(options.font.size),
         color: dfltFontColor
     });
 

diff --git a/src/traces/carpet/axis_defaults.js b/src/traces/carpet/axis_defaults.js
@@ -110,7 +110,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
     if(title) {
         Lib.coerceFont(coerce, 'title.font', {
             family: font.family,
-            size: Math.round(font.size * 1.2),
+            size: Lib.bigFont(font.size),
             color: dfltFontColor
         });
         coerce('title.offset');

diff --git a/test/image/baselines/airfoil.png b/test/image/baselines/airfoil.png
diff --git a/test/image/baselines/bar-like_textangle45.png b/test/image/baselines/bar-like_textangle45.png
diff --git a/test/image/baselines/bar-like_textangle60.png b/test/image/baselines/bar-like_textangle60.png
diff --git a/test/image/baselines/bar-marker-line-colorscales.png b/test/image/baselines/bar-marker-line-colorscales.png
diff --git a/test/image/baselines/cmid-zmid.png b/test/image/baselines/cmid-zmid.png
diff --git a/test/image/baselines/colorscale_constraint.png b/test/image/baselines/colorscale_constraint.png
diff --git a/test/image/baselines/contour-heatmap-coloring-set-contours.png b/test/image/baselines/contour-heatmap-coloring-set-contours.png
diff --git a/test/image/baselines/contour_heatmap_coloring_reversescale.png b/test/image/baselines/contour_heatmap_coloring_reversescale.png
diff --git a/test/image/baselines/geo_choropleth-legend.png b/test/image/baselines/geo_choropleth-legend.png
diff --git a/test/image/baselines/geo_choropleth-usa.png b/test/image/baselines/geo_choropleth-usa.png
diff --git a/test/image/baselines/geo_choropleth-usa_legend.png b/test/image/baselines/geo_choropleth-usa_legend.png
diff --git a/test/image/baselines/geo_europe-bubbles.png b/test/image/baselines/geo_europe-bubbles.png
diff --git a/test/image/baselines/gl2d_marker_coloraxis.png b/test/image/baselines/gl2d_marker_coloraxis.png
diff --git a/test/image/baselines/gl2d_parcoords_coloraxis.png b/test/image/baselines/gl2d_parcoords_coloraxis.png
diff --git a/test/image/baselines/gl2d_scatter-colorscale-colorbar.png b/test/image/baselines/gl2d_scatter-colorscale-colorbar.png
diff --git a/test/image/baselines/gl3d_mesh3d_coloring.png b/test/image/baselines/gl3d_mesh3d_coloring.png
diff --git a/test/image/baselines/gl3d_reversescale.png b/test/image/baselines/gl3d_reversescale.png
diff --git a/test/image/baselines/gl3d_scatter3d-colorscale-marker-and-line.png b/test/image/baselines/gl3d_scatter3d-colorscale-marker-and-line.png
diff --git a/test/image/baselines/gl3d_scatter3d-colorscale.png b/test/image/baselines/gl3d_scatter3d-colorscale.png
diff --git a/test/image/baselines/gl3d_surface_contour_start-end-size.png b/test/image/baselines/gl3d_surface_contour_start-end-size.png
diff --git a/test/image/baselines/gl3d_surface_opacityscale_contour.png b/test/image/baselines/gl3d_surface_opacityscale_contour.png
diff --git a/test/image/baselines/gl3d_tetrahedra.png b/test/image/baselines/gl3d_tetrahedra.png
diff --git a/test/image/baselines/gl3d_volume_multiple-traces.png b/test/image/baselines/gl3d_volume_multiple-traces.png
diff --git a/test/image/baselines/gl3d_volume_multiple-traces_one-cube.png b/test/image/baselines/gl3d_volume_multiple-traces_one-cube.png
diff --git a/test/image/baselines/heatmap_legend.png b/test/image/baselines/heatmap_legend.png
diff --git a/test/image/baselines/layout_metatext.png b/test/image/baselines/layout_metatext.png
diff --git a/test/image/baselines/multicategory_histograms.png b/test/image/baselines/multicategory_histograms.png
diff --git a/test/image/baselines/pie_inside-text-orientation.png b/test/image/baselines/pie_inside-text-orientation.png
diff --git a/test/image/baselines/scatter-colorscale-colorbar.png b/test/image/baselines/scatter-colorscale-colorbar.png
diff --git a/test/image/baselines/sunburst_values_colorscale.png b/test/image/baselines/sunburst_values_colorscale.png
diff --git a/test/image/baselines/ticklabelposition-4.png b/test/image/baselines/ticklabelposition-4.png
diff --git a/test/image/baselines/titles-avoid-labels.png b/test/image/baselines/titles-avoid-labels.png
diff --git a/test/image/baselines/trace_metatext.png b/test/image/baselines/trace_metatext.png
diff --git a/test/image/baselines/treemap_values_colorscale.png b/test/image/baselines/treemap_values_colorscale.png
diff --git a/test/image/baselines/uniformtext_bar-like_10_auto.png b/test/image/baselines/uniformtext_bar-like_10_auto.png
diff --git a/test/image/baselines/uniformtext_bar-like_8_horizontal.png b/test/image/baselines/uniformtext_bar-like_8_horizontal.png
diff --git a/test/image/baselines/uniformtext_bar-like_8_textangle.png b/test/image/baselines/uniformtext_bar-like_8_textangle.png
diff --git a/test/image/baselines/uniformtext_bar-like_8_textangle45.png b/test/image/baselines/uniformtext_bar-like_8_textangle45.png
diff --git a/test/image/baselines/uniformtext_pie_16_auto.png b/test/image/baselines/uniformtext_pie_16_auto.png
diff --git a/test/image/baselines/uniformtext_pie_8_horizontal.png b/test/image/baselines/uniformtext_pie_8_horizontal.png
diff --git a/test/image/baselines/uniformtext_pie_8_horizontal_center.png b/test/image/baselines/uniformtext_pie_8_horizontal_center.png
diff --git a/test/image/baselines/uniformtext_pie_8_radial.png b/test/image/baselines/uniformtext_pie_8_radial.png
diff --git a/test/image/baselines/uniformtext_pie_8_tangential.png b/test/image/baselines/uniformtext_pie_8_tangential.png
diff --git a/test/image/baselines/uniformtext_pie_inside-text-orientation.png b/test/image/baselines/uniformtext_pie_inside-text-orientation.png
diff --git a/test/image/baselines/uniformtext_pie_pull.png b/test/image/baselines/uniformtext_pie_pull.png
diff --git a/test/image/mocks/bar-like_textangle45.json b/test/image/mocks/bar-like_textangle45.json
@@ -144,7 +144,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>bar, funnel & waterfall</b><br>textangle:-45"
+                "text": "bar, funnel & waterfall<br>textangle:-45"
             }
         },
         "barmode": "stack",

diff --git a/test/image/mocks/bar-like_textangle60.json b/test/image/mocks/bar-like_textangle60.json
@@ -144,7 +144,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>bar, funnel & waterfall</b><br>textangle:-60"
+                "text": "bar, funnel & waterfall<br>textangle:-60"
             }
         },
         "barmode": "stack",

diff --git a/test/image/mocks/gl3d_mesh3d_coloring.json b/test/image/mocks/gl3d_mesh3d_coloring.json
@@ -103,7 +103,7 @@
       "bgcolor": "#eee",
       "orientation": "h",
       "title": {
-        "text": "<b>mesh3d with different coloring:</b>",
+        "text": "mesh3d with different coloring:",
         "side": "top left"
       }
     },

diff --git a/test/image/mocks/heatmap_legend.json b/test/image/mocks/heatmap_legend.json
@@ -60,7 +60,7 @@
             "orientation": "h",
             "title": {
                 "side": "top left",
-                "text": "<b><i>heatmap and contour legends<i></b>"
+                "text": "<i>heatmap and contour legends<i>"
             }
         },
         "height": 800,

diff --git a/test/image/mocks/pie_inside-text-orientation.json b/test/image/mocks/pie_inside-text-orientation.json
@@ -361,7 +361,7 @@
         },
         "legend": {
             "title": {
-                "text": "<b>inside text orientation</b>"
+                "text": "inside text orientation"
             }
         },
         "font": {

diff --git a/test/image/mocks/uniformtext_bar-like_10_auto.json b/test/image/mocks/uniformtext_bar-like_10_auto.json
@@ -136,7 +136,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>bar, funnel & waterfall uniform text</b><br>with <i>auto</i> orientation<br>minsize=8"
+                "text": "bar, funnel & waterfall uniform text<br>with <i>auto</i> orientation<br>minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_bar-like_8_horizontal.json b/test/image/mocks/uniformtext_bar-like_8_horizontal.json
@@ -143,7 +143,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>bar, funnel & waterfall uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=8"
+                "text": "bar, funnel & waterfall uniform text<br>with <i>horizontal</i> orientation<br>minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_bar-like_8_textangle.json b/test/image/mocks/uniformtext_bar-like_8_textangle.json
@@ -143,7 +143,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>bar, funnel & waterfall uniform text</b><br>with vertical orientation<br>textangle:-90 | minsize=8"
+                "text": "bar, funnel & waterfall uniform text<br>with vertical orientation<br>textangle:-90 | minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_bar-like_8_textangle45.json b/test/image/mocks/uniformtext_bar-like_8_textangle45.json
@@ -143,7 +143,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>bar, funnel & waterfall uniform text</b><br>textangle:-45 | minsize=8"
+                "text": "bar, funnel & waterfall uniform text<br>textangle:-45 | minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_pie_16_auto.json b/test/image/mocks/uniformtext_pie_16_auto.json
@@ -181,7 +181,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>pie uniform text</b><br>with <i>auto</i> orientation<br>minsize=16"
+                "text": "pie uniform text<br>with <i>auto</i> orientation<br>minsize=16"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_pie_8_horizontal.json b/test/image/mocks/uniformtext_pie_8_horizontal.json
@@ -229,7 +229,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>pie uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=8"
+                "text": "pie uniform text<br>with <i>horizontal</i> orientation<br>minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_pie_8_horizontal_center.json b/test/image/mocks/uniformtext_pie_8_horizontal_center.json
@@ -189,7 +189,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>pie uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=8"
+                "text": "pie uniform text<br>with <i>horizontal</i> orientation<br>minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_pie_8_radial.json b/test/image/mocks/uniformtext_pie_8_radial.json
@@ -237,7 +237,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>pie uniform text</b><br>with <i>radial</i> orientation<br>minsize=8"
+                "text": "pie uniform text<br>with <i>radial</i> orientation<br>minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_pie_8_tangential.json b/test/image/mocks/uniformtext_pie_8_tangential.json
@@ -237,7 +237,7 @@
         "legend": {
             "orientation": "h",
             "title": {
-                "text": "<b>pie uniform text</b><br>with <i>tangential</i> orientation<br>minsize=8"
+                "text": "pie uniform text<br>with <i>tangential</i> orientation<br>minsize=8"
             }
         },
         "uniformtext": {

diff --git a/test/image/mocks/uniformtext_pie_inside-text-orientation.json b/test/image/mocks/uniformtext_pie_inside-text-orientation.json
@@ -361,7 +361,7 @@
         },
         "legend": {
             "title": {
-                "text": "<b>inside text orientation</b>"
+                "text": "inside text orientation"
             }
         },
         "font": {

diff --git a/test/image/mocks/uniformtext_pie_pull.json b/test/image/mocks/uniformtext_pie_pull.json
@@ -124,7 +124,7 @@
         },
         "legend": {
             "title": {
-                "text": "<b>pie uniform text</b><br>with <i>horizontal</i> orientation<br>minsize=20"
+                "text": "pie uniform text<br>with <i>horizontal</i> orientation<br>minsize=20"
             }
         },
         "uniformtext": {

diff --git a/test/jasmine/tests/histogram2d_test.js b/test/jasmine/tests/histogram2d_test.js
@@ -18,6 +18,7 @@ describe('Test histogram2d', function() {
 
     function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         layout._dfltTitle = {colorbar: 'cb'};
+        layout.font = {color: '#444'};
 
         return supplyDefaultsRaw(traceIn, traceOut, defaultColor, layout);
     }

diff --git a/test/jasmine/tests/mesh3d_test.js b/test/jasmine/tests/mesh3d_test.js
@@ -10,7 +10,7 @@ describe('Test mesh3d', function() {
 
     describe('supplyDefaults', function() {
         var defaultColor = '#444';
-        var layout = {_dfltTitle: {colorbar: 'cb'}};
+        var layout = {_dfltTitle: {colorbar: 'cb'}, font: {color: '#444'}};
 
         var traceIn, traceOut;
 

diff --git a/test/jasmine/tests/surface_test.js b/test/jasmine/tests/surface_test.js
@@ -10,7 +10,7 @@ describe('Test surface', function() {
 
     describe('supplyDefaults', function() {
         var defaultColor = '#444';
-        var layout = {_dfltTitle: {colorbar: 'cb'}};
+        var layout = {_dfltTitle: {colorbar: 'cb'}, font: {color: '#444'}};
 
         var traceIn, traceOut;