Skip to content

Commit a4e43a6

Browse files
rmoestlrmoestl
committed
Transition color bar to new title attr structure [882]
- This transitions all traces depending on `colorbar` as well.
1 parent a2f0543 commit a4e43a6

File tree

5 files changed

+81
-41
lines changed

5 files changed

+81
-41
lines changed

‎src/components/colorbar/attributes.js

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -175,21 +175,56 @@ module.exports = overrideAll({
175175
exponentformat: axesAttrs.exponentformat,
176176
showexponent: axesAttrs.showexponent,
177177
title: {
178-
valType: 'string',
179-
role: 'info',
180-
description: 'Sets the title of the color bar.'
178+
text: {
179+
valType: 'string',
180+
role: 'info',
181+
description: [
182+
'Sets the title of the color bar.',
183+
'Note that before the existence of `title.text`, the title\'s',
184+
'contents used to be defined as the `title` attribute itself.',
185+
'This behavior has been deprecated.'
186+
].join(' ')
187+
},
188+
font: fontAttrs({
189+
description: [
190+
'Sets this color bar\'s title font.',
191+
'Note that the title\'s font used to be set',
192+
'by the now deprecated `titlefont` attribute.'
193+
].join(' ')
194+
}),
195+
side: {
196+
valType: 'enumerated',
197+
values: ['right', 'top', 'bottom'],
198+
role: 'style',
199+
dflt: 'top',
200+
description: [
201+
'Determines the location of color bar\'s title',
202+
'with respect to the color bar.',
203+
'Note that the title\'s location used to be set',
204+
'by the now deprecated `titleside` attribute.'
205+
].join(' ')
206+
}
181207
},
182-
titlefont: fontAttrs({
183-
description: 'Sets this color bar\'s title font.'
184-
}),
185-
titleside: {
186-
valType: 'enumerated',
187-
values: ['right', 'top', 'bottom'],
188-
role: 'style',
189-
dflt: 'top',
190-
description: [
191-
'Determines the location of the colorbar title',
192-
'with respect to the color bar.'
193-
].join(' ')
208+
209+
_deprecated: {
210+
title: {
211+
valType: 'string',
212+
role: 'info',
213+
description: [
214+
'Deprecated in favor of color bar\'s `title.text`.',
215+
'Note that value of color bar\'s `title` is no longer a simple',
216+
'*string* but a set of sub-attributes.'
217+
].join(' ')
218+
},
219+
titlefont: fontAttrs({
220+
description: 'Deprecated in favor of color bar\'s `title.font`.'
221+
}),
222+
titleside: {
223+
valType: 'enumerated',
224+
values: ['right', 'top', 'bottom'],
225+
role: 'style',
226+
dflt: 'top',
227+
description: 'Deprecated in favor of color bar\'s `title.side`.'
228+
}
194229
}
195230
}, 'colorbars', 'from-root');

‎src/components/colorbar/defaults.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
5959
handleTickLabelDefaults(colorbarIn, colorbarOut, coerce, 'linear', opts);
6060
handleTickMarkDefaults(colorbarIn, colorbarOut, coerce, 'linear', opts);
6161

62-
coerce('title', layout._dfltTitle.colorbar);
63-
Lib.coerceFont(coerce, 'titlefont', layout.font);
64-
coerce('titleside');
62+
coerce('title.text', layout._dfltTitle.colorbar);
63+
Lib.coerceFont(coerce, 'title.font', layout.font);
64+
coerce('title.side');
6565
};

‎src/components/colorbar/draw.js

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -183,15 +183,7 @@ module.exports = function draw(gd, id) {
183183
tickprefix: opts.tickprefix,
184184
showticksuffix: opts.showticksuffix,
185185
ticksuffix: opts.ticksuffix,
186-
187-
// Plot and axes titles have a different, nested attribute structure
188-
// for defining title attributes. Since the `titles` component
189-
// assumes that nested structure, let's adapt to it without breaking
190-
// the existing colorbar API.
191-
title: {
192-
text: opts.title,
193-
font: opts.titlefont
194-
},
186+
title: opts.title,
195187
showline: true,
196188
anchor: 'free',
197189
side: 'right',
@@ -225,11 +217,11 @@ module.exports = function draw(gd, id) {
225217
// save for other callers to access this axis
226218
component.axis = cbAxisOut;
227219

228-
if(['top', 'bottom'].indexOf(opts.titleside) !== -1) {
229-
cbAxisOut.titleside = opts.titleside;
220+
if(['top', 'bottom'].indexOf(opts.title.side) !== -1) {
221+
cbAxisOut.title.side = opts.title.side;
230222
cbAxisOut.titlex = opts.x + xpadFrac;
231223
cbAxisOut.titley = yBottomFrac +
232-
(opts.titleside === 'top' ? lenFrac - ypadFrac : ypadFrac);
224+
(opts.title.side === 'top' ? lenFrac - ypadFrac : ypadFrac);
233225
}
234226

235227
if(opts.line.color && opts.tickmode === 'auto') {
@@ -292,15 +284,15 @@ module.exports = function draw(gd, id) {
292284
var axisLayer = container.select('.cbaxis');
293285

294286
var titleHeight = 0;
295-
if(['top', 'bottom'].indexOf(opts.titleside) !== -1) {
287+
if(['top', 'bottom'].indexOf(opts.title.side) !== -1) {
296288
// draw the title so we know how much room it needs
297289
// when we squish the axis. This one only applies to
298290
// top or bottom titles, not right side.
299291
var x = gs.l + (opts.x + xpadFrac) * gs.w,
300292
fontSize = cbAxisOut.title.font.size,
301293
y;
302294

303-
if(opts.titleside === 'top') {
295+
if(opts.title.side === 'top') {
304296
y = (1 - (yBottomFrac + lenFrac - ypadFrac)) * gs.h +
305297
gs.t + 3 + fontSize * 0.75;
306298
}
@@ -314,7 +306,7 @@ module.exports = function draw(gd, id) {
314306
}
315307

316308
function drawAxis() {
317-
if(['top', 'bottom'].indexOf(opts.titleside) !== -1) {
309+
if(['top', 'bottom'].indexOf(opts.title.side) !== -1) {
318310
// squish the axis top to make room for the title
319311
var titleGroup = container.select('.cbtitle'),
320312
titleText = titleGroup.select('text'),
@@ -345,7 +337,7 @@ module.exports = function draw(gd, id) {
345337
// TODO: configurable
346338
titleHeight += 5;
347339

348-
if(opts.titleside === 'top') {
340+
if(opts.title.side === 'top') {
349341
cbAxisOut.domain[1] -= titleHeight / gs.h;
350342
titleTrans[1] *= -1;
351343
}
@@ -466,7 +458,7 @@ module.exports = function draw(gd, id) {
466458
});
467459
},
468460
function() {
469-
if(['top', 'bottom'].indexOf(opts.titleside) === -1) {
461+
if(['top', 'bottom'].indexOf(opts.title.side) === -1) {
470462
var fontSize = cbAxisOut.title.font.size,
471463
y = cbAxisOut._offset + cbAxisOut._length / 2,
472464
x = gs.l + (cbAxisOut.position || 0) * gs.w + ((cbAxisOut.side === 'right') ?
@@ -479,7 +471,7 @@ module.exports = function draw(gd, id) {
479471
drawTitle('h' + cbAxisOut._id + 'title', {
480472
avoid: {
481473
selection: d3.select(gd).selectAll('g.' + cbAxisOut._id + 'tick'),
482-
side: opts.titleside,
474+
side: opts.title.side,
483475
offsetLeft: gs.l,
484476
offsetTop: 0,
485477
maxShift: fullLayout.width
@@ -532,11 +524,11 @@ module.exports = function draw(gd, id) {
532524
.node(),
533525
titleWidth;
534526
if(mathJaxNode &&
535-
['top', 'bottom'].indexOf(opts.titleside) !== -1) {
527+
['top', 'bottom'].indexOf(opts.title.side) !== -1) {
536528
titleWidth = Drawing.bBox(mathJaxNode).width;
537529
}
538530
else {
539-
// note: the formula below works for all titlesides,
531+
// note: the formula below works for all title sides,
540532
// (except for top/bottom mathjax, above)
541533
// but the weird gs.l is because the titleunshift
542534
// transform gets removed by Drawing.bBox
@@ -565,7 +557,7 @@ module.exports = function draw(gd, id) {
565557
container.selectAll('.cboutline').attr({
566558
x: xLeft,
567559
y: yTopPx + opts.ypad +
568-
(opts.titleside === 'top' ? titleHeight : 0),
560+
(opts.title.side === 'top' ? titleHeight : 0),
569561
width: Math.max(thickPx, 2),
570562
height: Math.max(outerheight - 2 * opts.ypad - titleHeight, 2)
571563
})

‎src/plot_api/helpers.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,13 @@ function cleanTitle(titleContainer) {
254254
if(oldPositionAttrSet && !newPositionAttrSet) {
255255
nestTitleAttr('titleposition', 'position');
256256
}
257+
258+
// titleside -> title.side
259+
var oldSideAttrSet = titleContainer.titleside;
260+
var newSideAttrSet = titleContainer.title && titleContainer.title.side;
261+
if(oldSideAttrSet && !newSideAttrSet) {
262+
nestTitleAttr('titleside', 'side');
263+
}
257264
}
258265

259266
function nestTitleAttr(oldAttrName, newAttrName) {
@@ -473,6 +480,9 @@ exports.cleanData = function(data) {
473480
}
474481

475482
cleanTitle(trace);
483+
if(trace.colorbar) cleanTitle(trace.colorbar);
484+
if(trace.marker && trace.marker.colorbar) cleanTitle(trace.marker.colorbar);
485+
if(trace.line && trace.line.colorbar) cleanTitle(trace.line.colorbar);
476486
}
477487
};
478488

‎src/plot_api/plot_api.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1712,21 +1712,24 @@ function _restyle(gd, aobj, traces) {
17121712
* @param aobj
17131713
*/
17141714
function cleanDeprecatedAttributeKeys(aobj) {
1715-
var oldAxisTitleRegExp = Lib.counterRegex('axis', '\.title', false, false);
1715+
var oldAxisTitleRegex = Lib.counterRegex('axis', '\.title', false, false);
1716+
var colorbarRegex = /colorbar\.title$/;
17161717
var keys = Object.keys(aobj);
17171718
var i, key, value;
17181719

17191720
for(i = 0; i < keys.length; i++) {
17201721
key = keys[i];
17211722
value = aobj[key];
17221723

1723-
if((key === 'title' || oldAxisTitleRegExp.test(key)) &&
1724+
if((key === 'title' || oldAxisTitleRegex.test(key) || colorbarRegex.test(key)) &&
17241725
(typeof value === 'string' || typeof value === 'number')) {
17251726
replace(key, key.replace('title', 'title.text'));
17261727
} else if(key.indexOf('titlefont') > -1) {
17271728
replace(key, key.replace('titlefont', 'title.font'));
17281729
} else if(key.indexOf('titleposition') > -1) {
17291730
replace(key, key.replace('titleposition', 'title.position'));
1731+
} else if(key.indexOf('titleside') > -1) {
1732+
replace(key, key.replace('titleside', 'title.side'));
17301733
}
17311734
}
17321735

0 commit comments

Comments
 (0)