Skip to content

Commit b5f09fb

Browse files
archmojarchmoj
committed
revisit ticklabelposition logic
1 parent 05893b3 commit b5f09fb

9 files changed

+297
-34
lines changed

‎src/plots/cartesian/axes.js

Lines changed: 23 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2526,12 +2526,14 @@ function getTickLabelUV(ax) {
25262526
var v = isX ? dy : dx;
25272527

25282528
var fontSize = ax.tickfont ? ax.tickfont.size : 12;
2529-
if(isAligned) {
2530-
u += fontSize * MID_SHIFT * (isX ? 0.25 : 2);
2531-
}
2532-
if(!isX || side === 'bottom') {
2533-
v += fontSize * MID_SHIFT / 2;
2529+
if(isX) {
2530+
u += 3; // add extra pad
2531+
} else {
25342532
v += 3; // add extra pad
2533+
2534+
if(isAligned) {
2535+
u += fontSize * CAP_SHIFT;
2536+
}
25352537
}
25362538

25372539
if(isLeft || isTop) u = -u;
@@ -2626,83 +2628,70 @@ axes.makeLabelFns = function(ax, shift, angle) {
26262628
if(ax.showticklabels && (labelsOverTicks || ax.showline)) {
26272629
labelStandoff += 0.2 * ax.tickfont.size;
26282630
}
2629-
if(!insideTickLabels) {
2630-
labelStandoff += (ax.linewidth || 1) / 2;
2631-
}
2631+
labelStandoff += (ax.linewidth || 1) / 2 * (insideTickLabels ? -1 : 1);
26322632

26332633
var out = {
26342634
labelStandoff: labelStandoff,
26352635
labelShift: labelShift
26362636
};
26372637

2638-
var isPeriod = ax.ticklabelmode === 'period';
2639-
26402638
var x0, y0, ff, flipIt;
26412639

26422640
var side = ax.side;
26432641
var axLetter = ax._id.charAt(0);
2642+
2643+
var endSide;
26442644
if(axLetter === 'x') {
2645-
var bottomSide =
2645+
endSide =
26462646
(!insideTickLabels && side === 'bottom') ||
26472647
(insideTickLabels && side === 'top');
26482648

2649-
flipIt = bottomSide ? 1 : -1;
2649+
flipIt = endSide ? 1 : -1;
26502650
if(insideTickLabels) flipIt *= -1;
26512651

26522652
x0 = labelShift * flipIt;
26532653
y0 = shift + labelStandoff * flipIt;
2654-
ff = bottomSide ? 1 : -0.2;
2654+
ff = endSide ? 1 : -0.2;
26552655

26562656
out.xFn = function(d) { return d.dx + x0; };
26572657
out.yFn = function(d) { return d.dy + y0 + d.fontSize * ff; };
26582658
out.anchorFn = function(d, a) {
26592659
if(insideTickLabels || isAligned) {
2660-
if(isPeriod) return 'middle';
26612660
if(isLeft) return 'end';
26622661
if(isRight) return 'start';
26632662
}
26642663

2665-
if((
2666-
!isNumeric(a) || a === 0 || a === 180
2667-
)) {
2664+
if(!isNumeric(a) || a === 0 || a === 180) {
26682665
return 'middle';
26692666
}
26702667

2671-
var whichSide = a * flipIt < 0;
2672-
if(insideTickLabels) {
2673-
return whichSide ? 'start' : 'end';
2674-
}
2675-
return whichSide ? 'end' : 'start';
2668+
return ((a * flipIt < 0) !== insideTickLabels) ? 'end' : 'start';
26762669
};
26772670
out.heightFn = function(d, a, h) {
2678-
if(insideTickLabels) {
2679-
return (ax.side === 'top') ? 0 : -h;
2680-
}
2681-
26822671
return (a < -60 || a > 60) ? -0.5 * h :
26832672
ax.side === 'top' ? -h :
26842673
0;
26852674
};
26862675
} else if(axLetter === 'y') {
2687-
var rightSide =
2688-
(!insideTickLabels && side === 'right') ||
2689-
(insideTickLabels && side === 'left');
2676+
endSide =
2677+
(!insideTickLabels && side === 'left') ||
2678+
(insideTickLabels && side === 'right');
26902679

2691-
flipIt = rightSide ? 1 : -1;
2680+
flipIt = endSide ? 1 : -1;
26922681
if(insideTickLabels) flipIt *= -1;
26932682

26942683
x0 = labelStandoff;
2695-
y0 = -labelShift * flipIt;
2684+
y0 = labelShift * flipIt;
26962685
ff = Math.abs(ax.tickangle) === 90 ? 0.5 : 0;
26972686

2698-
out.xFn = function(d) { return d.dx + shift + (x0 + d.fontSize * ff) * flipIt; };
2687+
out.xFn = function(d) { return d.dx + shift - (x0 + d.fontSize * ff) * flipIt; };
26992688
out.yFn = function(d) { return d.dy + y0 + d.fontSize * MID_SHIFT; };
27002689
out.anchorFn = function(d, a) {
2701-
if(!insideTickLabels && !isAligned && isNumeric(a) && Math.abs(a) === 90) {
2690+
if(isNumeric(a) && Math.abs(a) === 90) {
27022691
return 'middle';
27032692
}
27042693

2705-
return rightSide ? 'start' : 'end';
2694+
return endSide ? 'end' : 'start';
27062695
};
27072696
out.heightFn = function(d, a, h) {
27082697
a *= ax.side === 'left' ? 1 : -1;

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

-205 Bytes
Loading

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

53 Bytes
Loading

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

-879 Bytes
Loading

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

82.7 KB
Loading

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

65.9 KB
Loading

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
{
2+
"data": [{
3+
"xaxis": "x",
4+
"yaxis": "y",
5+
"x": [-5000, 10000],
6+
"y": [-5000, 10000]
7+
}, {
8+
"xaxis": "x2",
9+
"yaxis": "y2",
10+
"x": [-5000, 10000],
11+
"y": [-5000, 10000]
12+
}, {
13+
"xaxis": "x3",
14+
"yaxis": "y3",
15+
"x": [-5000, 10000],
16+
"y": [-5000, 10000]
17+
}, {
18+
"xaxis": "x4",
19+
"yaxis": "y4",
20+
"x": [-5000, 10000],
21+
"y": [-5000, 10000]
22+
}],
23+
"layout": {
24+
"xaxis": {
25+
"anchor": "y",
26+
"domain": [0, 0.475],
27+
"side": "bottom",
28+
"ticks": "inside",
29+
"ticklabelposition": "inside",
30+
"tickfont": { "size": 16 },
31+
"ticklen": 16,
32+
"tickwidth": 4,
33+
"linewidth": 10,
34+
"gridcolor": "white"
35+
},
36+
"yaxis": {
37+
"anchor": "x",
38+
"domain": [0, 0.475],
39+
"side": "left",
40+
"ticks": "inside",
41+
"ticklabelposition": "inside",
42+
"tickfont": { "size": 16 },
43+
"ticklen": 16,
44+
"tickwidth": 4,
45+
"linewidth": 10,
46+
"gridcolor": "white"
47+
},
48+
"xaxis2": {
49+
"anchor": "y2",
50+
"domain": [0.525, 1],
51+
"side": "bottom",
52+
"ticks": "inside",
53+
"ticklabelposition": "inside",
54+
"tickfont": { "size": 16 },
55+
"ticklen": 16,
56+
"tickwidth": 4,
57+
"linewidth": 10,
58+
"gridcolor": "white"
59+
},
60+
"yaxis2": {
61+
"anchor": "x2",
62+
"domain": [0, 0.475],
63+
"side": "right",
64+
"ticks": "inside",
65+
"ticklabelposition": "inside",
66+
"tickfont": { "size": 16 },
67+
"ticklen": 16,
68+
"tickwidth": 4,
69+
"linewidth": 10,
70+
"gridcolor": "white"
71+
},
72+
"xaxis3": {
73+
"anchor": "y3",
74+
"domain": [0.525, 1],
75+
"side": "top",
76+
"ticks": "inside",
77+
"ticklabelposition": "inside",
78+
"tickfont": { "size": 16 },
79+
"ticklen": 16,
80+
"tickwidth": 4,
81+
"linewidth": 10,
82+
"gridcolor": "white"
83+
},
84+
"yaxis3": {
85+
"anchor": "x3",
86+
"domain": [0.525, 1],
87+
"side": "right",
88+
"ticks": "inside",
89+
"ticklabelposition": "inside",
90+
"tickfont": { "size": 16 },
91+
"ticklen": 16,
92+
"tickwidth": 4,
93+
"linewidth": 10,
94+
"gridcolor": "white"
95+
},
96+
"xaxis4": {
97+
"anchor": "y4",
98+
"domain": [0, 0.475],
99+
"ticklabelmode": "period",
100+
"side": "top",
101+
"ticks": "inside",
102+
"ticklabelposition": "inside",
103+
"tickfont": { "size": 16 },
104+
"ticklen": 16,
105+
"tickwidth": 4,
106+
"linewidth": 10,
107+
"gridcolor": "white"
108+
},
109+
"yaxis4": {
110+
"anchor": "x4",
111+
"domain": [0.525, 1],
112+
"side": "left",
113+
"ticks": "inside",
114+
"ticklabelposition": "inside",
115+
"tickfont": { "size": 16 },
116+
"ticklen": 16,
117+
"tickwidth": 4,
118+
"linewidth": 10,
119+
"gridcolor": "white"
120+
},
121+
"font": {
122+
"family": "Raleway"
123+
},
124+
"plot_bgcolor": "lightblue",
125+
"showlegend": false,
126+
"width": 800,
127+
"height": 800,
128+
"margin": {
129+
"t": 40,
130+
"b": 40,
131+
"l": 40,
132+
"r": 40
133+
}
134+
}
135+
}

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
{
2+
"data": [{
3+
"xaxis": "x",
4+
"yaxis": "y",
5+
"x": [-10000, 10000],
6+
"y": [-10000, 10000]
7+
}, {
8+
"xaxis": "x2",
9+
"yaxis": "y2",
10+
"x": [-10000, 10000],
11+
"y": [-10000, 10000]
12+
}, {
13+
"xaxis": "x3",
14+
"yaxis": "y3",
15+
"x": [-10000, 10000],
16+
"y": [-10000, 10000]
17+
}, {
18+
"xaxis": "x4",
19+
"yaxis": "y4",
20+
"x": [-10000, 10000],
21+
"y": [-10000, 10000]
22+
}],
23+
"layout": {
24+
"xaxis": {
25+
"anchor": "y",
26+
"domain": [0, 0.475],
27+
"side": "bottom",
28+
"ticks": "inside",
29+
"ticklabelposition": "inside right",
30+
"tickfont": { "size": 16 },
31+
"ticklen": 16,
32+
"tickwidth": 4,
33+
"linewidth": 10,
34+
"gridcolor": "white"
35+
},
36+
"yaxis": {
37+
"anchor": "x",
38+
"domain": [0, 0.475],
39+
"side": "left",
40+
"ticks": "inside",
41+
"ticklabelposition": "inside top",
42+
"tickfont": { "size": 16 },
43+
"ticklen": 16,
44+
"tickwidth": 4,
45+
"linewidth": 10,
46+
"gridcolor": "white"
47+
},
48+
"xaxis2": {
49+
"anchor": "y2",
50+
"domain": [0.525, 1],
51+
"side": "bottom",
52+
"ticks": "inside",
53+
"ticklabelposition": "inside left",
54+
"tickfont": { "size": 16 },
55+
"ticklen": 16,
56+
"tickwidth": 4,
57+
"linewidth": 10,
58+
"gridcolor": "white"
59+
},
60+
"yaxis2": {
61+
"anchor": "x2",
62+
"domain": [0, 0.475],
63+
"side": "right",
64+
"ticks": "inside",
65+
"ticklabelposition": "inside top",
66+
"tickfont": { "size": 16 },
67+
"ticklen": 16,
68+
"tickwidth": 4,
69+
"linewidth": 10,
70+
"gridcolor": "white"
71+
},
72+
"xaxis3": {
73+
"anchor": "y3",
74+
"domain": [0.525, 1],
75+
"side": "top",
76+
"ticks": "inside",
77+
"ticklabelposition": "inside left",
78+
"tickfont": { "size": 16 },
79+
"ticklen": 16,
80+
"tickwidth": 4,
81+
"linewidth": 10,
82+
"gridcolor": "white"
83+
},
84+
"yaxis3": {
85+
"anchor": "x3",
86+
"domain": [0.525, 1],
87+
"side": "right",
88+
"ticks": "inside",
89+
"ticklabelposition": "inside bottom",
90+
"tickfont": { "size": 16 },
91+
"ticklen": 16,
92+
"tickwidth": 4,
93+
"linewidth": 10,
94+
"gridcolor": "white"
95+
},
96+
"xaxis4": {
97+
"anchor": "y4",
98+
"domain": [0, 0.475],
99+
"ticklabelmode": "period",
100+
"side": "top",
101+
"ticks": "inside",
102+
"ticklabelposition": "inside right",
103+
"tickfont": { "size": 16 },
104+
"ticklen": 16,
105+
"tickwidth": 4,
106+
"linewidth": 10,
107+
"gridcolor": "white"
108+
},
109+
"yaxis4": {
110+
"anchor": "x4",
111+
"domain": [0.525, 1],
112+
"side": "left",
113+
"ticks": "inside",
114+
"ticklabelposition": "inside bottom",
115+
"tickfont": { "size": 16 },
116+
"ticklen": 16,
117+
"tickwidth": 4,
118+
"linewidth": 10,
119+
"gridcolor": "white"
120+
},
121+
"font": {
122+
"family": "Raleway"
123+
},
124+
"plot_bgcolor": "lightblue",
125+
"showlegend": false,
126+
"width": 800,
127+
"height": 800,
128+
"margin": {
129+
"t": 40,
130+
"b": 40,
131+
"l": 40,
132+
"r": 40
133+
}
134+
}
135+
}

0 commit comments

Comments
 (0)