Skip to content

Commit 6e2da35

Browse files
etpinardetpinard
authored
Merge pull request #3889 from plotly/violin-hover-overlap-fixup
Fix hoverAvoidOverlaps for zoomed-in violin traces
2 parents 37439bf + aacfbf6 commit 6e2da35

File tree

5 files changed

+313
-5
lines changed

5 files changed

+313
-5
lines changed

Diff for: ‎src/components/fx/hover.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1177,7 +1177,7 @@ function hoverAvoidOverlaps(hoverLabels, ax, fullLayout) {
11771177
donepositioning = true;
11781178
i = 0;
11791179
while(i < pointgroups.length - 1) {
1180-
// the higher (g0) and lower (g1) point group
1180+
// the higher (g0) and lower (g1) point group
11811181
var g0 = pointgroups[i];
11821182
var g1 = pointgroups[i + 1];
11831183

Diff for: ‎src/traces/violin/hover.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,6 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay
2626
if(hasHoveronViolins || hasHoveronKDE) {
2727
var closeBoxData = boxHoverPoints.hoverOnBoxes(pointData, xval, yval, hovermode);
2828

29-
if(hasHoveronViolins) {
30-
closeData = closeData.concat(closeBoxData);
31-
}
32-
3329
if(hasHoveronKDE && closeBoxData.length > 0) {
3430
var xa = pointData.xa;
3531
var ya = pointData.ya;
@@ -82,6 +78,10 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay
8278
violinLineAttrs[vLetter + '1'] = violinLineAttrs[vLetter + '2'] = vAxis._offset + vValPx;
8379
}
8480
}
81+
82+
if(hasHoveronViolins) {
83+
closeData = closeData.concat(closeBoxData);
84+
}
8585
}
8686

8787
if(hoveron.indexOf('points') !== -1) {

Diff for: ‎test/image/baselines/violin_zoomed-in.png

17.3 KB
Loading

Diff for: ‎test/image/mocks/violin_zoomed-in.json

+274
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
{
2+
"data": [
3+
{
4+
"box": {
5+
"visible": true
6+
},
7+
"fillcolor": "#8dd3c7",
8+
"line": {
9+
"color": "black"
10+
},
11+
"meanline": {
12+
"visible": true
13+
},
14+
"opacity": 0.6,
15+
"type": "violin",
16+
"x0": "Total Bill",
17+
"y": [
18+
16.99,
19+
10.34,
20+
21.01,
21+
23.68,
22+
24.59,
23+
25.29,
24+
8.77,
25+
26.88,
26+
15.04,
27+
14.78,
28+
10.27,
29+
35.26,
30+
15.42,
31+
18.43,
32+
14.83,
33+
21.58,
34+
10.33,
35+
16.29,
36+
16.97,
37+
20.65,
38+
17.92,
39+
20.29,
40+
15.77,
41+
39.42,
42+
19.82,
43+
17.81,
44+
13.37,
45+
12.69,
46+
21.7,
47+
19.65,
48+
9.55,
49+
18.35,
50+
15.06,
51+
20.69,
52+
17.78,
53+
24.06,
54+
16.31,
55+
16.93,
56+
18.69,
57+
31.27,
58+
16.04,
59+
17.46,
60+
13.94,
61+
9.68,
62+
30.4,
63+
18.29,
64+
22.23,
65+
32.4,
66+
28.55,
67+
18.04,
68+
12.54,
69+
10.29,
70+
34.81,
71+
9.94,
72+
25.56,
73+
19.49,
74+
38.01,
75+
26.41,
76+
11.24,
77+
48.27,
78+
20.29,
79+
13.81,
80+
11.02,
81+
18.29,
82+
17.59,
83+
20.08,
84+
16.45,
85+
3.07,
86+
20.23,
87+
15.01,
88+
12.02,
89+
17.07,
90+
26.86,
91+
25.28,
92+
14.73,
93+
10.51,
94+
17.92,
95+
27.2,
96+
22.76,
97+
17.29,
98+
19.44,
99+
16.66,
100+
10.07,
101+
32.68,
102+
15.98,
103+
34.83,
104+
13.03,
105+
18.28,
106+
24.71,
107+
21.16,
108+
28.97,
109+
22.49,
110+
5.75,
111+
16.32,
112+
22.75,
113+
40.17,
114+
27.28,
115+
12.03,
116+
21.01,
117+
12.46,
118+
11.35,
119+
15.38,
120+
44.3,
121+
22.42,
122+
20.92,
123+
15.36,
124+
20.49,
125+
25.21,
126+
18.24,
127+
14.31,
128+
14,
129+
7.25,
130+
38.07,
131+
23.95,
132+
25.71,
133+
17.31,
134+
29.93,
135+
10.65,
136+
12.43,
137+
24.08,
138+
11.69,
139+
13.42,
140+
14.26,
141+
15.95,
142+
12.48,
143+
29.8,
144+
8.52,
145+
14.52,
146+
11.38,
147+
22.82,
148+
19.08,
149+
20.27,
150+
11.17,
151+
12.26,
152+
18.26,
153+
8.51,
154+
10.33,
155+
14.15,
156+
16,
157+
13.16,
158+
17.47,
159+
34.3,
160+
41.19,
161+
27.05,
162+
16.43,
163+
8.35,
164+
18.64,
165+
11.87,
166+
9.78,
167+
7.51,
168+
14.07,
169+
13.13,
170+
17.26,
171+
24.55,
172+
19.77,
173+
29.85,
174+
48.17,
175+
25,
176+
13.39,
177+
16.49,
178+
21.5,
179+
12.66,
180+
16.21,
181+
13.81,
182+
17.51,
183+
24.52,
184+
20.76,
185+
31.71,
186+
10.59,
187+
10.63,
188+
50.81,
189+
15.81,
190+
7.25,
191+
31.85,
192+
16.82,
193+
32.9,
194+
17.89,
195+
14.48,
196+
9.6,
197+
34.63,
198+
34.65,
199+
23.33,
200+
45.35,
201+
23.17,
202+
40.55,
203+
20.69,
204+
20.9,
205+
30.46,
206+
18.15,
207+
23.1,
208+
15.69,
209+
19.81,
210+
28.44,
211+
15.48,
212+
16.58,
213+
7.56,
214+
10.34,
215+
43.11,
216+
13,
217+
13.51,
218+
18.71,
219+
12.74,
220+
13,
221+
16.4,
222+
20.53,
223+
16.47,
224+
26.59,
225+
38.73,
226+
24.27,
227+
12.76,
228+
30.06,
229+
25.89,
230+
48.33,
231+
13.27,
232+
28.17,
233+
12.9,
234+
28.15,
235+
11.59,
236+
7.74,
237+
30.14,
238+
12.16,
239+
13.42,
240+
8.58,
241+
15.98,
242+
13.42,
243+
16.27,
244+
10.09,
245+
20.45,
246+
13.28,
247+
22.12,
248+
24.01,
249+
15.69,
250+
11.61,
251+
10.77,
252+
15.53,
253+
10.07,
254+
12.6,
255+
32.83,
256+
35.83,
257+
29.03,
258+
27.18,
259+
22.67,
260+
17.82,
261+
18.78
262+
]
263+
}
264+
],
265+
"layout": {
266+
"xaxis": {
267+
"range": [-0.125, 0.125]
268+
},
269+
"yaxis": {
270+
"range": [-18, 35],
271+
"zeroline": false
272+
}
273+
}
274+
}

Diff for: ‎test/jasmine/tests/violin_test.js

+34
Original file line numberDiff line numberDiff line change
@@ -724,6 +724,40 @@ describe('Test violin hover:', function() {
724724
.then(done);
725725
});
726726
});
727+
728+
it('labels should avoid overlaps', function(done) {
729+
gd = createGraphDiv();
730+
731+
var fig = Lib.extendDeep({}, require('@mocks/violin_zoomed-in.json'));
732+
fig.layout.width = 700;
733+
fig.layout.height = 450;
734+
735+
Plotly.plot(gd, fig)
736+
.then(function() {
737+
mouseEvent('mousemove', 350, 225);
738+
739+
var actual = [];
740+
d3.selectAll('g.hovertext').each(function() {
741+
var bbox = this.getBoundingClientRect();
742+
var tx = d3.select(this).text();
743+
actual.push([tx, bbox]);
744+
});
745+
746+
actual = actual.sort(function(a, b) { return a[1].top - b[1].top; });
747+
748+
expect(actual.length).toBe(7, '# of value hover labels');
749+
750+
for(var i = 0; i < actual.length - 1; i++) {
751+
var a = actual[i];
752+
var b = actual[i + 1];
753+
if(b[1].top < a[1].bottom) {
754+
fail('Labels ' + a[0] + ' and ' + b[1] + ' overlap.');
755+
}
756+
}
757+
})
758+
.catch(failTest)
759+
.then(done);
760+
});
727761
});
728762

729763
describe('Test violin restyle:', function() {

0 commit comments

Comments
 (0)