Skip to content

Commit 4e00196

Browse files
archmojarchmoj
authored
Merge pull request #5325 from plotly/pad-for-insideticklabels
Provide minimal padding for inside tick labels case of bar, heatmap, line plots
2 parents 9ffa03d + 8199d38 commit 4e00196

13 files changed

+3485
-36
lines changed

‎src/plots/cartesian/autorange.js

+21-25
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,11 @@ function makePadFn(ax, max) {
218218
if(axReverse) max = !max;
219219
}
220220

221-
extrappad = adjustPadForInsideLabelsOnAnchorAxis(extrappad, ax, max);
222-
extrappad = adjustPadForInsideLabelsOnThisAxis(extrappad, ax, max);
221+
var A = padInsideLabelsOnAnchorAxis(ax, max);
222+
var B = padInsideLabelsOnThisAxis(ax, max);
223+
224+
var zero = Math.max(A, B);
225+
extrappad = Math.max(zero, extrappad);
223226

224227
// domain-constrained axes: base extrappad on the unconstrained
225228
// domain so it's consistent as the domain changes
@@ -228,18 +231,18 @@ function makePadFn(ax, max) {
228231
(ax.domain[1] - ax.domain[0]);
229232
}
230233

231-
return function getPad(pt) { return pt.pad + (pt.extrapad ? extrappad : 0); };
234+
return function getPad(pt) { return pt.pad + (pt.extrapad ? extrappad : zero); };
232235
}
233236

234237
var TEXTPAD = 3;
235238

236-
function adjustPadForInsideLabelsOnThisAxis(extrappad, ax, max) {
239+
function padInsideLabelsOnThisAxis(ax, max) {
237240
var ticklabelposition = ax.ticklabelposition || '';
238241
var has = function(str) {
239242
return ticklabelposition.indexOf(str) !== -1;
240243
};
241244

242-
if(!has('inside')) return extrappad;
245+
if(!has('inside')) return 0;
243246
var isTop = has('top');
244247
var isLeft = has('left');
245248
var isRight = has('right');
@@ -250,27 +253,26 @@ function adjustPadForInsideLabelsOnThisAxis(extrappad, ax, max) {
250253
(max && (isLeft || isBottom)) ||
251254
(!max && (isRight || isTop))
252255
) {
253-
return extrappad;
256+
return 0;
254257
}
255258

256259
// increase padding to make more room for inside tick labels of the axis
257260
var fontSize = ax.tickfont ? ax.tickfont.size : 12;
258261
var isX = ax._id.charAt(0) === 'x';
259-
var morePad = (isX ? 1.2 : 0.6) * fontSize;
262+
var pad = (isX ? 1.2 : 0.6) * fontSize;
260263

261264
if(isAligned) {
262-
morePad *= 2;
263-
morePad += (ax.tickwidth || 0) / 2;
265+
pad *= 2;
266+
pad += (ax.tickwidth || 0) / 2;
264267
}
265268

266-
morePad += TEXTPAD;
267-
268-
extrappad = Math.max(extrappad, morePad);
269+
pad += TEXTPAD;
269270

270-
return extrappad;
271+
return pad;
271272
}
272273

273-
function adjustPadForInsideLabelsOnAnchorAxis(extrappad, ax, max) {
274+
function padInsideLabelsOnAnchorAxis(ax, max) {
275+
var pad = 0;
274276
var anchorAxis = (ax._anchorAxis || {});
275277
if((anchorAxis.ticklabelposition || '').indexOf('inside') !== -1) {
276278
// increase padding to make more room for inside tick labels of the counter axis
@@ -287,7 +289,6 @@ function adjustPadForInsideLabelsOnAnchorAxis(extrappad, ax, max) {
287289
)) {
288290
var isX = ax._id.charAt(0) === 'x';
289291

290-
var morePad = 0;
291292
if(anchorAxis._vals) {
292293
var rad = Lib.deg2rad(anchorAxis._tickAngles[anchorAxis._id + 'tick'] || 0);
293294
var cosA = Math.abs(Math.cos(rad));
@@ -296,29 +297,24 @@ function adjustPadForInsideLabelsOnAnchorAxis(extrappad, ax, max) {
296297
// use bounding boxes
297298
anchorAxis._vals.forEach(function(t) {
298299
if(t.bb) {
299-
var w = t.bb.width;
300-
var h = t.bb.height;
300+
var w = 2 * TEXTPAD + t.bb.width;
301+
var h = 2 * TEXTPAD + t.bb.height;
301302

302-
morePad = Math.max(morePad, isX ?
303+
pad = Math.max(pad, isX ?
303304
Math.max(w * cosA, h * sinA) :
304305
Math.max(h * cosA, w * sinA)
305306
);
306-
307-
// add extra pad around label
308-
morePad += 3;
309307
}
310308
});
311309
}
312310

313311
if(anchorAxis.ticks === 'inside' && anchorAxis.ticklabelposition === 'inside') {
314-
morePad += anchorAxis.ticklen || 0;
312+
pad += anchorAxis.ticklen || 0;
315313
}
316-
317-
extrappad = Math.max(extrappad, morePad);
318314
}
319315
}
320316

321-
return extrappad;
317+
return pad;
322318
}
323319

324320
function concatExtremes(gd, ax, noMatch) {

‎src/plots/cartesian/axes.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -3334,27 +3334,36 @@ function drawTitle(gd, ax) {
33343334
var axId = ax._id;
33353335
var axLetter = axId.charAt(0);
33363336
var fontSize = ax.title.font.size;
3337-
33383337
var titleStandoff;
33393338

33403339
if(ax.title.hasOwnProperty('standoff')) {
33413340
titleStandoff = ax._depth + ax.title.standoff + approxTitleDepth(ax);
33423341
} else {
3342+
var isInside = (ax.ticklabelposition || '').indexOf('inside') !== -1;
3343+
33433344
if(ax.type === 'multicategory') {
33443345
titleStandoff = ax._depth;
33453346
} else {
3346-
var offsetBase = 1.5;
3347-
titleStandoff = 10 + fontSize * offsetBase + (ax.linewidth ? ax.linewidth - 1 : 0);
3347+
var offsetBase = 1.5 * fontSize;
3348+
if(isInside) {
3349+
offsetBase = 0.5 * fontSize;
3350+
if(ax.ticks === 'outside') {
3351+
offsetBase += ax.ticklen;
3352+
}
3353+
}
3354+
titleStandoff = 10 + offsetBase + (ax.linewidth ? ax.linewidth - 1 : 0);
33483355
}
33493356

3350-
if(axLetter === 'x') {
3351-
titleStandoff += ax.side === 'top' ?
3352-
fontSize * (ax.showticklabels ? 1 : 0) :
3353-
fontSize * (ax.showticklabels ? 1.5 : 0.5);
3354-
} else {
3355-
titleStandoff += ax.side === 'right' ?
3356-
fontSize * (ax.showticklabels ? 1 : 0.5) :
3357-
fontSize * (ax.showticklabels ? 0.5 : 0);
3357+
if(!isInside) {
3358+
if(axLetter === 'x') {
3359+
titleStandoff += ax.side === 'top' ?
3360+
fontSize * (ax.showticklabels ? 1 : 0) :
3361+
fontSize * (ax.showticklabels ? 1.5 : 0.5);
3362+
} else {
3363+
titleStandoff += ax.side === 'right' ?
3364+
fontSize * (ax.showticklabels ? 1 : 0.5) :
3365+
fontSize * (ax.showticklabels ? 0.5 : 0);
3366+
}
33583367
}
33593368
}
33603369

‎test/image/baselines/ticklabelposition-1.png

-1.34 KB
Loading

‎test/image/baselines/ticklabelposition-2.png

714 Bytes
Loading

‎test/image/baselines/ticklabelposition-3.png

106 KB
Loading

‎test/image/baselines/ticklabelposition-4.png

99.4 KB
Loading

‎test/image/baselines/ticklabelposition-a.png

-2.08 KB
Loading

‎test/image/baselines/ticklabelposition-b.png

1.72 KB
Loading

‎test/image/baselines/ticklabelposition-c.png

101 Bytes
Loading

‎test/image/baselines/ticklabelposition-d.png

171 Bytes
Loading

‎test/image/mocks/ticklabelposition-3.json

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
{
2+
"data": [{
3+
"xaxis": "x",
4+
"yaxis": "y",
5+
"type": "bar",
6+
"orientation": "h",
7+
"x": [1, 10, 100],
8+
"y": [1, 10, 100]
9+
}, {
10+
"xaxis": "x2",
11+
"yaxis": "y2",
12+
"type": "heatmap",
13+
"colorbar": {
14+
"tickangle": -90,
15+
"dtick": 10,
16+
"ticks": "inside",
17+
"ticklen": 12,
18+
"tickwidth": 4,
19+
"ticklabelposition": "inside top"
20+
},
21+
"x": [1, 10, 100],
22+
"y": [1, 10, 100],
23+
"z": [
24+
[0, 50, 100],
25+
[50, 100, 0],
26+
[100, 0, 50]
27+
]
28+
}, {
29+
"xaxis": "x3",
30+
"yaxis": "y3",
31+
"type": "scatter",
32+
"mode": "lines",
33+
"x": [-100, 0, 100],
34+
"y": [-100, 0, 100]
35+
}, {
36+
"xaxis": "x4",
37+
"yaxis": "y4",
38+
"type": "bar",
39+
"orientation": "v",
40+
"x": [1, 10, 100],
41+
"y": [1, 10, 100]
42+
}],
43+
"layout": {
44+
"xaxis": {
45+
"anchor": "y",
46+
"domain": [0, 0.475],
47+
"side": "bottom",
48+
"ticklabelposition": "inside",
49+
"gridcolor": "white"
50+
},
51+
"yaxis": {
52+
"anchor": "x",
53+
"domain": [0, 0.475],
54+
"side": "left",
55+
"ticklabelposition": "inside",
56+
"gridcolor": "white"
57+
},
58+
"xaxis2": {
59+
"anchor": "y2",
60+
"domain": [0.525, 1],
61+
"side": "bottom",
62+
"ticklabelposition": "inside",
63+
"gridcolor": "white"
64+
},
65+
"yaxis2": {
66+
"anchor": "x2",
67+
"domain": [0, 0.475],
68+
"side": "right",
69+
"ticklabelposition": "inside",
70+
"gridcolor": "white"
71+
},
72+
"xaxis3": {
73+
"anchor": "y3",
74+
"domain": [0.525, 1],
75+
"side": "top",
76+
"ticklabelposition": "inside",
77+
"gridcolor": "white"
78+
},
79+
"yaxis3": {
80+
"anchor": "x3",
81+
"domain": [0.525, 1],
82+
"side": "right",
83+
"ticklabelposition": "inside",
84+
"gridcolor": "white"
85+
},
86+
"xaxis4": {
87+
"anchor": "y4",
88+
"domain": [0, 0.475],
89+
"side": "top",
90+
"ticklabelposition": "inside",
91+
"gridcolor": "white"
92+
},
93+
"yaxis4": {
94+
"anchor": "x4",
95+
"domain": [0.525, 1],
96+
"side": "left",
97+
"ticklabelposition": "inside",
98+
"gridcolor": "white"
99+
},
100+
"font": {
101+
"size": 24
102+
},
103+
"plot_bgcolor": "lightblue",
104+
"showlegend": false,
105+
"width": 1000,
106+
"height": 1000,
107+
"margin": {
108+
"t": 40,
109+
"b": 40,
110+
"l": 40,
111+
"r": 40
112+
}
113+
}
114+
}

0 commit comments

Comments
 (0)