Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f262dc9

Browse filesBrowse files
alexcjohnsonalexcjohnson
committed
Merge branch 'master' into react-autosize
2 parents 9913afe + 3bff26f commit f262dc9
Copy full SHA for f262dc9

File tree

Expand file treeCollapse file tree

9 files changed

+278
-2
lines changed
Filter options
Expand file treeCollapse file tree

9 files changed

+278
-2
lines changed

‎src/components/fx/hover.js

Copy file name to clipboardExpand all lines: src/components/fx/hover.js
+3-2Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1126,7 +1126,7 @@ function alignHoverText(hoverLabels, rotateLabels) {
11261126
offsetY = d.offset;
11271127
if(d.anchor === 'middle') {
11281128
txx -= d.tx2width / 2;
1129-
tx2x -= d.tx2width / 2;
1129+
tx2x += d.txwidth / 2 + HOVERTEXTPAD;
11301130
}
11311131
if(rotateLabels) {
11321132
offsetY *= -YSHIFTY;
@@ -1135,7 +1135,8 @@ function alignHoverText(hoverLabels, rotateLabels) {
11351135

11361136
g.select('path').attr('d', d.anchor === 'middle' ?
11371137
// middle aligned: rect centered on data
1138-
('M-' + (d.bx / 2) + ',-' + (d.by / 2) + 'h' + d.bx + 'v' + d.by + 'h-' + d.bx + 'Z') :
1138+
('M-' + (d.bx / 2 + d.tx2width / 2) + ',-' + (d.by / 2) +
1139+
'h' + d.bx + 'v' + d.by + 'h-' + d.bx + 'Z') :
11391140
// left or right aligned: side rect with arrow to data
11401141
('M0,0L' + (horzSign * HOVERARROWSIZE + offsetX) + ',' + (HOVERARROWSIZE + offsetY) +
11411142
'v' + (d.by / 2 - HOVERARROWSIZE) +

‎src/plots/cartesian/axes.js

Copy file name to clipboardExpand all lines: src/plots/cartesian/axes.js
+28Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ var MINUS_SIGN = constants.MINUS_SIGN;
3131
var BADNUM = constants.BADNUM;
3232

3333
var MID_SHIFT = require('../../constants/alignment').MID_SHIFT;
34+
var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
3435

3536
var axes = module.exports = {};
3637

@@ -1756,6 +1757,26 @@ axes.doTicks = function(gd, axid, skipTitle) {
17561757
});
17571758
}
17581759

1760+
// How much to shift a multi-line label to center it vertically.
1761+
function getAnchorHeight(lineCount, lineHeight, angle) {
1762+
var h = (lineCount - 1) * lineHeight;
1763+
if(axLetter === 'x') {
1764+
if(angle < -60 || 60 < angle) {
1765+
return -0.5 * h;
1766+
} else if(axside === 'top') {
1767+
return -h;
1768+
}
1769+
} else {
1770+
angle *= axside === 'left' ? 1 : -1;
1771+
if(angle < -30) {
1772+
return -h;
1773+
} else if(angle < 30) {
1774+
return -0.5 * h;
1775+
}
1776+
}
1777+
return 0;
1778+
}
1779+
17591780
function positionLabels(s, angle) {
17601781
s.each(function(d) {
17611782
var anchor = labelanchor(angle, d);
@@ -1766,6 +1787,13 @@ axes.doTicks = function(gd, axid, skipTitle) {
17661787
(' rotate(' + angle + ',' + labelx(d) + ',' +
17671788
(labely(d) - d.fontSize / 2) + ')') :
17681789
'');
1790+
var anchorHeight = getAnchorHeight(
1791+
svgTextUtils.lineCount(thisLabel),
1792+
LINE_SPACING * d.fontSize,
1793+
isNumeric(angle) ? +angle : 0);
1794+
if(anchorHeight) {
1795+
transform += ' translate(0, ' + anchorHeight + ')';
1796+
}
17691797
if(mathjaxGroup.empty()) {
17701798
thisLabel.select('text').attr({
17711799
transform: transform,

‎test/image/baselines/bar_multiline_labels.png

Copy file name to clipboard
71.2 KB
Loading

‎test/image/baselines/benchmarks.png

Copy file name to clipboard
-65 Bytes
Loading

‎test/image/baselines/cliponaxis_false-dates-log.png

Copy file name to clipboard
348 Bytes
Loading

‎test/image/baselines/gl2d_date_axes.png

Copy file name to clipboard
101 Bytes
Loading

‎test/image/baselines/world-cals.png

Copy file name to clipboard
322 Bytes
Loading

‎test/image/mocks/bar_multiline_labels.json

Copy file name to clipboard
+161Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
{
2+
"data":[
3+
{
4+
"type": "bar",
5+
"x":["x 1","multiple<br>lines","one<br >two<BR>three"],
6+
"y":["y 1","multiple<br>lines","one<br >two<BR>three"]
7+
},
8+
{
9+
"type": "bar",
10+
"x":["x 2","multiple<br>lines","one<br>two<br>three"],
11+
"y":["y 2","multiple<br>lines","one<br>two<br>three"],
12+
"xaxis": "x2",
13+
"yaxis": "y2"
14+
},
15+
{
16+
"type": "bar",
17+
"x":["x 3","multiple<br>lines","one<br>two<br>three"],
18+
"y":["y 3","multiple<br>lines","one<br>two<br>three"],
19+
"xaxis": "x3",
20+
"yaxis": "y3"
21+
},
22+
{
23+
"type": "bar",
24+
"x":["x 4","multiple<br>lines","one<br>two<br>three"],
25+
"y":["y 4","multiple<br>lines","one<br>two<br>three"],
26+
"xaxis": "x4",
27+
"yaxis": "y4"
28+
},
29+
{
30+
"type": "bar",
31+
"orientation": "h",
32+
"x":["x 5","multiple<br>lines","one<br>two<br>three"],
33+
"y":["y 5","multiple<br>lines","one<br>two<br>three"],
34+
"xaxis": "x5",
35+
"yaxis": "y5"
36+
},
37+
{
38+
"type": "bar",
39+
"orientation": "h",
40+
"x":["x 6","multiple<br>lines","one<br>two<br>three"],
41+
"y":["y 6","multiple<br>lines","one<br>two<br>three"],
42+
"xaxis": "x6",
43+
"yaxis": "y6"
44+
},
45+
{
46+
"type": "scatter",
47+
"x":["x 7","multiple<br>lines","one<br>two<br>three"],
48+
"y":["y 7","multiple<br>lines","one<br>two<br>three"],
49+
"xaxis": "x7",
50+
"yaxis": "y7"
51+
},
52+
{
53+
"type": "scatter",
54+
"x":["x 8","multiple<br>lines","one<br>two<br>three"],
55+
"y":["y 8","multiple<br>lines","one<br>two<br>three"],
56+
"xaxis": "x8",
57+
"yaxis": "y8"
58+
}
59+
],
60+
"layout":{
61+
"showlegend": false,
62+
"xaxis": {
63+
"ticks": "outside",
64+
"domain": [0, 0.4]
65+
},
66+
"yaxis": {
67+
"ticks": "outside",
68+
"domain": [0, 0.4]
69+
},
70+
"xaxis2": {
71+
"ticks": "outside",
72+
"domain": [0, 0.4],
73+
"side": "top",
74+
"anchor": "y2",
75+
"tickangle": 90
76+
},
77+
"yaxis2": {
78+
"ticks": "outside",
79+
"domain": [0, 0.4],
80+
"side": "right",
81+
"tickangle": 90
82+
},
83+
"xaxis3": {
84+
"ticks": "outside",
85+
"domain": [0.6, 1],
86+
"tickangle": 90
87+
},
88+
"yaxis3": {
89+
"ticks": "outside",
90+
"domain": [0, 0.4],
91+
"anchor": "x3",
92+
"tickangle": 90
93+
},
94+
"xaxis4": {
95+
"ticks": "outside",
96+
"domain": [0.6, 1],
97+
"side": "top"
98+
},
99+
"yaxis4": {
100+
"ticks": "outside",
101+
"domain": [0, 0.4],
102+
"side": "right",
103+
"anchor": "x4"
104+
},
105+
"xaxis5": {
106+
"ticks": "outside",
107+
"domain": [0, 0.4],
108+
"anchor": "y5",
109+
"tickangle": 45
110+
},
111+
"yaxis5": {
112+
"ticks": "outside",
113+
"domain": [0.6, 1],
114+
"anchor": "x5",
115+
"tickangle": 45
116+
},
117+
"xaxis6": {
118+
"ticks": "outside",
119+
"domain": [0, 0.4],
120+
"side": "top",
121+
"anchor": "y6",
122+
"tickangle": -90
123+
},
124+
"yaxis6": {
125+
"ticks": "outside",
126+
"domain": [0.6, 1],
127+
"anchor": "x6",
128+
"side": "right",
129+
"tickangle": -90
130+
},
131+
"xaxis7": {
132+
"ticks": "outside",
133+
"domain": [0.6, 1],
134+
"anchor": "y7",
135+
"tickangle": -90
136+
},
137+
"yaxis7": {
138+
"ticks": "outside",
139+
"domain": [0.6, 1],
140+
"anchor": "x7",
141+
"tickangle": -90
142+
},
143+
"xaxis8": {
144+
"ticks": "outside",
145+
"domain": [0.6, 1],
146+
"side": "top",
147+
"anchor": "y8",
148+
"tickangle": -45
149+
},
150+
"yaxis8": {
151+
"ticks": "outside",
152+
"domain": [0.6, 1],
153+
"side": "right",
154+
"anchor": "x8",
155+
"tickangle": 45
156+
},
157+
"legend": "none",
158+
"height":800,
159+
"width":800
160+
}
161+
}

‎test/jasmine/tests/hover_label_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/hover_label_test.js
+86Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1109,6 +1109,92 @@ describe('hover info', function() {
11091109
});
11101110

11111111
});
1112+
1113+
describe('centered', function() {
1114+
var trace1 = {
1115+
x: ['giraffes'],
1116+
y: [5],
1117+
name: 'LA Zoo',
1118+
type: 'bar',
1119+
text: ['Way too long hover info!']
1120+
};
1121+
var trace2 = {
1122+
x: ['giraffes'],
1123+
y: [5],
1124+
name: 'SF Zoo',
1125+
type: 'bar',
1126+
text: ['San Francisco']
1127+
};
1128+
var data = [trace1, trace2];
1129+
var layout = {width: 600, height: 300, barmode: 'stack'};
1130+
1131+
var gd;
1132+
1133+
beforeEach(function(done) {
1134+
gd = createGraphDiv();
1135+
Plotly.plot(gd, data, layout).then(done);
1136+
});
1137+
1138+
function centeredHoverInfoNodes() {
1139+
var g = d3.selectAll('g.hoverlayer g.hovertext').filter(function() {
1140+
return !d3.select(this).select('[data-unformatted="LA Zoo"]').empty();
1141+
});
1142+
1143+
return {
1144+
primaryText: g.select('text:not([data-unformatted="LA Zoo"])').node(),
1145+
primaryBox: g.select('path').node(),
1146+
secondaryText: g.select('[data-unformatted="LA Zoo"]').node(),
1147+
secondaryBox: g.select('rect').node()
1148+
};
1149+
}
1150+
1151+
function ensureCentered(hoverInfoNodes) {
1152+
expect(hoverInfoNodes.primaryText.getAttribute('text-anchor')).toBe('middle');
1153+
expect(hoverInfoNodes.secondaryText.getAttribute('text-anchor')).toBe('middle');
1154+
return hoverInfoNodes;
1155+
}
1156+
1157+
function assertElemInside(elem, container, msg) {
1158+
var elemBB = elem.getBoundingClientRect();
1159+
var contBB = container.getBoundingClientRect();
1160+
expect(contBB.left < elemBB.left &&
1161+
contBB.right > elemBB.right &&
1162+
contBB.top < elemBB.top &&
1163+
contBB.bottom > elemBB.bottom).toBe(true, msg);
1164+
}
1165+
1166+
function assertElemRightTo(elem, refElem, msg) {
1167+
var elemBB = elem.getBoundingClientRect();
1168+
var refElemBB = refElem.getBoundingClientRect();
1169+
expect(elemBB.left >= refElemBB.right).toBe(true, msg);
1170+
}
1171+
1172+
function assertTopsAligned(elem1, elem2, msg) {
1173+
var elem1BB = elem1.getBoundingClientRect();
1174+
var elem2BB = elem2.getBoundingClientRect();
1175+
1176+
// Hint: toBeWithin tolerance is exclusive, hence a
1177+
// diff of exactly 1 would fail the test
1178+
var tolerance = 1.1;
1179+
expect(elem1BB.top - elem2BB.top).toBeWithin(0, tolerance, msg);
1180+
}
1181+
1182+
it('renders labels inside boxes', function() {
1183+
_hover(gd, 300, 150);
1184+
1185+
var nodes = ensureCentered(centeredHoverInfoNodes());
1186+
assertElemInside(nodes.primaryText, nodes.primaryBox, 'Primary text inside box');
1187+
assertElemInside(nodes.secondaryText, nodes.secondaryBox, 'Secondary text inside box');
1188+
});
1189+
1190+
it('renders secondary info box right to primary info box', function() {
1191+
_hover(gd, 300, 150);
1192+
1193+
var nodes = ensureCentered(centeredHoverInfoNodes());
1194+
assertElemRightTo(nodes.secondaryBox, nodes.primaryBox, 'Secondary box right to primary box');
1195+
assertTopsAligned(nodes.secondaryBox, nodes.primaryBox, 'Top edges of primary and secondary boxes aligned');
1196+
});
1197+
});
11121198
});
11131199

11141200
describe('hover info on stacked subplots', function() {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.