Skip to content

Commit e5b3621

Browse files
Alex VinoberAlex Vinober
Alex Vinober
authored and
Alex Vinober
committed
Chart Title Alignment
1 parent 4d8cca4 commit e5b3621

File tree

11 files changed

+144
-43
lines changed

11 files changed

+144
-43
lines changed

‎src/components/colorbar/draw.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,8 +172,8 @@ module.exports = function draw(gd, id) {
172172
tickprefix: opts.tickprefix,
173173
showticksuffix: opts.showticksuffix,
174174
ticksuffix: opts.ticksuffix,
175-
title: opts.title,
176-
titlefont: opts.titlefont,
175+
title: opts.title.text,
176+
titlefont: opts.title.font,
177177
showline: true,
178178
anchor: 'free',
179179
position: 1

‎src/components/titles/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,18 @@ Titles.draw = function(gd, titleClass, options) {
6363
var group = options.containerGroup;
6464

6565
var fullLayout = gd._fullLayout;
66-
var font = cont.titlefont.family;
67-
var fontSize = cont.titlefont.size;
68-
var fontColor = cont.titlefont.color;
66+
var font = typeof cont.title.text !== 'undefined' ? cont.title.font.family : cont.titlefont.family;
67+
var fontSize = typeof cont.title.text !== 'undefined' ? cont.title.font.size : cont.titlefont.size;
68+
var fontColor = typeof cont.title.text !== 'undefined' ? cont.title.font.color : cont.titlefont.color;
6969

7070
var opacity = 1;
7171
var isplaceholder = false;
72-
var txt = cont.title.trim();
72+
var txt = typeof cont.title.text !== 'undefined' ? cont.title.text.trim() : cont.title.trim();
7373

7474
// only make this title editable if we positively identify its property
7575
// as one that has editing enabled.
7676
var editAttr;
77-
if(prop === 'title') editAttr = 'titleText';
77+
if(prop === 'title.text') editAttr = 'titleText';
7878
else if(prop.indexOf('axis') !== -1) editAttr = 'axisTitleText';
7979
else if(prop.indexOf('colorbar' !== -1)) editAttr = 'colorbarTitleText';
8080
var editable = gd._context.edits[editAttr];

‎src/plot_api/plot_api.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -563,7 +563,7 @@ function plotPolar(gd, data, layout) {
563563

564564
// editable title
565565
var opacity = 1;
566-
var txt = gd._fullLayout.title;
566+
var txt = gd._fullLayout.title.text;
567567
if(txt === '' || !txt) opacity = 0;
568568
var placeholderText = 'Click to enter title';
569569

@@ -597,7 +597,7 @@ function plotPolar(gd, data, layout) {
597597
var setContenteditable = function() {
598598
this.call(svgTextUtils.makeEditable, {gd: gd})
599599
.on('edit', function(text) {
600-
gd.framework({layout: {title: text}});
600+
gd.framework({layout: {title: {text: text}}});
601601
this.text(text)
602602
.call(titleLayout);
603603
this.call(setContenteditable);

‎src/plot_api/subroutines.js

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -410,16 +410,63 @@ function findCounterAxisLineWidth(gd, ax, subplotCounterLineWidth,
410410

411411
exports.drawMainTitle = function(gd) {
412412
var fullLayout = gd._fullLayout;
413+
var titleAlignment = fullLayout.title.alignment;
414+
var attributes;
415+
416+
switch(titleAlignment) {
417+
case 'top':
418+
attributes = {
419+
x: fullLayout.width / 2,
420+
y: fullLayout.title.font.size / 2,
421+
'text-anchor': 'middle',
422+
'dominant-baseline': 'hanging'
423+
};
424+
break;
425+
case 'bottom':
426+
attributes = {
427+
x: (fullLayout.width / 2),
428+
y: fullLayout._size.t - (fullLayout.title.font.size / 2),
429+
'text-anchor': 'middle',
430+
'dominant-baseline': 'auto'
431+
};
432+
break;
433+
case 'left':
434+
attributes = {
435+
x: fullLayout.title.font.size / 2,
436+
y: fullLayout._size.t / 2,
437+
'text-anchor': 'start',
438+
'dominant-baseline': 'middle'
439+
};
440+
break;
441+
case 'right':
442+
attributes = {
443+
x: fullLayout.width - (fullLayout.title.font.size / 2),
444+
y: fullLayout._size.t / 2,
445+
'text-anchor': 'end',
446+
'dominant-baseline': 'middle'
447+
};
448+
break;
449+
case 'medium':
450+
attributes = {
451+
x: fullLayout.width / 2,
452+
y: fullLayout._size.t / 2,
453+
'text-anchor': 'middle'
454+
};
455+
break;
456+
default:
457+
attributes = {
458+
x: fullLayout.title.x,
459+
y: fullLayout.title.y,
460+
'text-anchor': 'start',
461+
'dominant-baseline': 'hanging'
462+
};
463+
}
413464

414465
Titles.draw(gd, 'gtitle', {
415466
propContainer: fullLayout,
416-
propName: 'title',
467+
propName: 'title.text',
417468
dfltName: 'Plot',
418-
attributes: {
419-
x: fullLayout.width / 2,
420-
y: fullLayout._size.t / 2,
421-
'text-anchor': 'middle'
422-
}
469+
attributes: attributes
423470
});
424471
};
425472

‎src/plots/layout_attributes.js

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,50 @@ globalFont.color.dflt = colorAttrs.defaultLine;
2626
module.exports = {
2727
font: globalFont,
2828
title: {
29-
valType: 'string',
30-
role: 'info',
31-
dflt: 'Click to enter Plot title',
32-
editType: 'layoutstyle',
33-
description: [
34-
'Sets the plot\'s title.'
35-
].join(' ')
29+
text: {
30+
valType: 'string',
31+
role: 'info',
32+
dflt: 'Click to enter Plot title',
33+
editType: 'layoutstyle',
34+
description: [
35+
'Sets the plot\'s title.'
36+
].join(' ')
37+
},
38+
alignment: {
39+
valType: 'string',
40+
role: 'info',
41+
dflt: 'middle',
42+
editType: 'none',
43+
description: [
44+
'Sets the plot\'s title alignment'
45+
].join(' ')
46+
},
47+
x: {
48+
valType: 'number',
49+
role: 'info',
50+
min: 0,
51+
dflt: 0,
52+
editType: 'none',
53+
description: [
54+
'Sets the plot\'s title x position (in px).'
55+
].join(' ')
56+
},
57+
y: {
58+
valType: 'number',
59+
role: 'info',
60+
min: 0,
61+
dflt: 0,
62+
editType: 'none',
63+
description: [
64+
'Sets the plot\'s title y position (in px).'
65+
].join(' ')
66+
},
67+
font: fontAttrs({
68+
editType: 'layoutstyle',
69+
description: 'Sets the title font.'
70+
}),
71+
editType: 'none'
3672
},
37-
titlefont: fontAttrs({
38-
editType: 'layoutstyle',
39-
description: 'Sets the title font.'
40-
}),
4173
autosize: {
4274
valType: 'boolean',
4375
role: 'info',

‎src/plots/plots.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,9 +1131,12 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut) {
11311131

11321132
var globalFont = Lib.coerceFont(coerce, 'font');
11331133

1134-
coerce('title');
1134+
coerce('title.text');
1135+
coerce('title.alignment');
1136+
coerce('title.x');
1137+
coerce('title.y');
11351138

1136-
Lib.coerceFont(coerce, 'titlefont', {
1139+
Lib.coerceFont(coerce, 'title.font', {
11371140
family: globalFont.family,
11381141
size: Math.round(globalFont.size * 1.4),
11391142
color: globalFont.color

‎src/snapshot/cloneplot.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ function cloneLayoutOverride(tileClass) {
2525
autosize: true,
2626
width: 150,
2727
height: 150,
28-
title: '',
28+
title: {
29+
text: ''
30+
},
2931
showlegend: false,
3032
margin: {l: 5, r: 5, t: 5, b: 5, pad: 0},
3133
annotations: []
@@ -34,7 +36,9 @@ function cloneLayoutOverride(tileClass) {
3436

3537
case 'thumbnail':
3638
override = {
37-
title: '',
39+
title: {
40+
text: ''
41+
},
3842
hidesources: true,
3943
showlegend: false,
4044
borderwidth: 0,

‎test/image/mocks/14.json

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,15 @@
9797
}
9898
],
9999
"layout": {
100-
"title": "Silicon Photovoltaics Learning Curve",
101-
"titlefont": {
102-
"color": "",
103-
"family": "",
104-
"size": 0
105-
},
100+
"title": {
101+
"text": "test",
102+
"alignment": "left",
103+
"font": {
104+
"color": "",
105+
"family": "",
106+
"size": 0
107+
}
108+
},
106109
"font": {
107110
"family": "Arial, sans-serif",
108111
"size": 12,

‎test/jasmine/tests/snapshot_test.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ describe('Plotly.Snapshot', function() {
3535

3636
data = [dummyTrace1, dummyTrace2];
3737
layout = {
38-
title: 'Chart Title',
38+
title: {
39+
text: 'Chart Title'
40+
},
3941
showlegend: true,
4042
autosize: true,
4143
width: 688,
@@ -69,7 +71,9 @@ describe('Plotly.Snapshot', function() {
6971
autosize: true,
7072
width: 150,
7173
height: 150,
72-
title: '',
74+
title: {
75+
text: ''
76+
},
7377
showlegend: false,
7478
margin: {'l': 5, 'r': 5, 't': 5, 'b': 5, 'pad': 0},
7579
annotations: []

‎test/jasmine/tests/titles_test.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,9 @@ describe('editable titles', function() {
8383
Plotly.plot(gd, data, {
8484
xaxis: {title: ''},
8585
yaxis: {title: ''},
86-
title: ''
86+
title: {
87+
text: ''
88+
}
8789
}, {editable: true})
8890
.then(function() {
8991
return Promise.all([
@@ -99,7 +101,9 @@ describe('editable titles', function() {
99101
Plotly.plot(gd, data, {
100102
xaxis: {title: ''},
101103
yaxis: {title: ''},
102-
title: ''
104+
title: {
105+
text: ''
106+
}
103107
}, {editable: true})
104108
.then(function() {
105109
return editTitle('x', 'xaxis.title', 'XXX');
@@ -108,7 +112,7 @@ describe('editable titles', function() {
108112
return editTitle('y', 'yaxis.title', 'YYY');
109113
})
110114
.then(function() {
111-
return editTitle('g', 'title', 'TTT');
115+
return editTitle('g', 'title.text', 'TTT');
112116
})
113117
.then(function() {
114118
return Promise.all([

‎test/jasmine/tests/validate_test.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ describe('Plotly.validate', function() {
1818
type: 'scatter',
1919
x: [1, 2, 3]
2020
}], {
21-
title: 'my simple graph'
21+
title: {
22+
text: 'my simple graph'
23+
}
2224
});
2325

2426
expect(out).toBeUndefined();
@@ -362,7 +364,9 @@ describe('Plotly.validate', function() {
362364
}]
363365
}),
364366
], {
365-
title: 'my transformed graph'
367+
title: {
368+
text: 'my transformed graph'
369+
}
366370
});
367371

368372
expect(out.length).toEqual(5);

0 commit comments

Comments
 (0)