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

Author: archmoj

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');
 };

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: {

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);
     }
 };

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

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);
+};

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;

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
     });
 

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
                     });
                 }

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
     });
 

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');