882 - Chart Title Alignment

src/plot_api/helpers.js

@@ -241,6 +241,7 @@ function cleanTitle(titleContainer) {
             };
         }
 
+        // TODO 882 DRY UP?
         // titlefont -> title.font
         var oldFontAttrSet = Lib.isPlainObject(titleContainer.titlefont);
         var newFontAttrSet = titleContainer.title && Lib.isPlainObject(titleContainer.title.font);
@@ -261,6 +262,13 @@ function cleanTitle(titleContainer) {
         if(oldSideAttrSet && !newSideAttrSet) {
             nestTitleAttr('titleside', 'side');
         }
+
+        // titleoffset -> title.offset
+        var oldOffsetAttrSet = titleContainer.titleoffset;
+        var newOffsetAttrSet = titleContainer.title && titleContainer.title.offset;
+        if(oldOffsetAttrSet && !newOffsetAttrSet) {
+            nestTitleAttr('titleoffset', 'offset');
+        }
     }
 
     function nestTitleAttr(oldAttrName, newAttrName) {
@@ -483,6 +491,8 @@ exports.cleanData = function(data) {
         if(trace.colorbar) cleanTitle(trace.colorbar);
         if(trace.marker && trace.marker.colorbar) cleanTitle(trace.marker.colorbar);
         if(trace.line && trace.line.colorbar) cleanTitle(trace.line.colorbar);
+        if(trace.aaxis) cleanTitle(trace.aaxis);
+        if(trace.baxis) cleanTitle(trace.baxis);
     }
 };
 

src/plot_api/plot_api.js

@@ -1730,6 +1730,8 @@ function cleanDeprecatedAttributeKeys(aobj) {
             replace(key, key.replace('titleposition', 'title.position'));
         } else if(key.indexOf('titleside') > -1) {
             replace(key, key.replace('titleside', 'title.side'));
+        } else if(key.indexOf('titleoffset') > -1) {
+            replace(key, key.replace('titleoffset', 'title.offset'));
         }
     }
 

src/traces/carpet/axis_attributes.js

@@ -34,26 +34,38 @@ module.exports = {
         editType: 'calc'
     },
     title: {
-        valType: 'string',
-        role: 'info',
+        text: {
+            valType: 'string',
+            role: 'info',
+            editType: 'calc',
+            description: [
+                'Sets the title of this axis.',
+                'Note that before the existence of `title.text`, the title\'s',
+                'contents used to be defined as the `title` attribute itself.',
+                'This behavior has been deprecated.'
+            ].join(' ')
+        },
+        font: fontAttrs({
+            editType: 'calc',
+            description: [
+                'Sets this axis\' title font.',
+                'Note that the title\'s font used to be set',
+                'by the now deprecated `titlefont` attribute.'
+            ].join(' ')
+        }),
+        offset: {
+            valType: 'number',
+            role: 'info',
+            dflt: 10,
+            editType: 'calc',
+            description: [
+                'An additional amount by which to offset the title from the tick',
+                'labels, given in pixels.',
+                'Note that this used to be set',
+                'by the now deprecated `titleoffset` attribute.'
+            ].join(' '),
+        },
         editType: 'calc',
-        description: 'Sets the title of this axis.'
-    },
-    titlefont: fontAttrs({
-        editType: 'calc',
-        description: [
-            'Sets this axis\' title font.'
-        ].join(' ')
-    }),
-    titleoffset: {
-        valType: 'number',
-        role: 'info',
-        dflt: 10,
-        editType: 'calc',
-        description: [
-            'An additional amount by which to offset the title from the tick',
-            'labels, given in pixels'
-        ].join(' '),
     },
     type: {
         valType: 'enumerated',
@@ -494,5 +506,30 @@ module.exports = {
         editType: 'calc',
         description: 'The stride between grid lines along the axis'
     },
+
+    _deprecated: {
+        title: {
+            valType: 'string',
+            role: 'info',
+            editType: 'calc',
+            description: [
+                'Deprecated in favor of `title.text`.',
+                'Note that value of `title` is no longer a simple',
+                '*string* but a set of sub-attributes.'
+            ].join(' ')
+        },
+        titlefont: fontAttrs({
+            editType: 'calc',
+            description: 'Deprecated in favor of `title.font`.'
+        }),
+        titleoffset: {
+            valType: 'number',
+            role: 'info',
+            dflt: 10,
+            editType: 'calc',
+            description: 'Deprecated in favor of `title.offset`.'
+        }
+    },
+
     editType: 'calc'
 };

src/traces/carpet/axis_defaults.js

@@ -113,14 +113,14 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
     // inherit from global font color in case that was provided.
     var dfltFontColor = (dfltColor === containerIn.color) ? dfltColor : font.color;
 
-    coerce('title');
-    Lib.coerceFont(coerce, 'titlefont', {
+    coerce('title.text');
+    Lib.coerceFont(coerce, 'title.font', {
         family: font.family,
         size: Math.round(font.size * 1.2),
         color: dfltFontColor
     });
 
-    coerce('titleoffset');
+    coerce('title.offset');
 
     coerce('tickangle');
 
@@ -203,11 +203,6 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
     // but no, we *actually* want to coerce this.
     coerce('tickmode');
 
-    if(!containerOut.title || (containerOut.title && containerOut.title.length === 0)) {
-        delete containerOut.titlefont;
-        delete containerOut.titleoffset;
-    }
-
     return containerOut;
 };
 

src/traces/carpet/plot.js

@@ -197,7 +197,7 @@ var midShift = ((1 - alignmentConstants.MID_SHIFT) / lineSpacing) + 1;
 
 function drawAxisTitle(gd, layer, trace, t, xy, dxy, axis, xa, ya, labelOrientation, labelClass) {
     var data = [];
-    if(axis.title) data.push(axis.title);
+    if(axis.title.text) data.push(axis.title.text);
     var titleJoin = layer.selectAll('text.' + labelClass).data(data);
     var offset = labelOrientation.maxExtent;
 
@@ -213,16 +213,16 @@ function drawAxisTitle(gd, layer, trace, t, xy, dxy, axis, xa, ya, labelOrientat
         }
 
         // In addition to the size of the labels, add on some extra padding:
-        var titleSize = axis.titlefont.size;
-        offset += titleSize + axis.titleoffset;
+        var titleSize = axis.title.font.size;
+        offset += titleSize + axis.title.offset;
 
         var labelNorm = labelOrientation.angle + (labelOrientation.flip < 0 ? 180 : 0);
         var angleDiff = (labelNorm - orientation.angle + 450) % 360;
         var reverseTitle = angleDiff > 90 && angleDiff < 270;
 
         var el = d3.select(this);
 
-        el.text(axis.title || '')
+        el.text(axis.title.text)
             .call(svgTextUtils.convertToTspans, gd);
 
         if(reverseTitle) {
@@ -236,7 +236,7 @@ function drawAxisTitle(gd, layer, trace, t, xy, dxy, axis, xa, ya, labelOrientat
             )
             .classed('user-select-none', true)
             .attr('text-anchor', 'middle')
-            .call(Drawing.font, axis.titlefont);
+            .call(Drawing.font, axis.title.font);
     });
 
     titleJoin.exit().remove();