Skip to content

Commit 43b7098

Browse files
cldouglcldougl
committed
Merge pull request #70 from plotly/hover_text_bug
Hover text bug
2 parents 63ca14e + e51e0df commit 43b7098

File tree

3 files changed

+248
-24
lines changed

3 files changed

+248
-24
lines changed

‎src/plots/cartesian/graph_interact.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -778,8 +778,9 @@ function createHoverText(hoverData, opts) {
778778
var i, traceHoverinfo;
779779
for (i = 0; i < hoverData.length; i++) {
780780
traceHoverinfo = hoverData[i].trace.hoverinfo;
781-
if (traceHoverinfo.indexOf('all')===-1 &&
782-
traceHoverinfo.indexOf(hovermode)===-1) {
781+
var parts = traceHoverinfo.split('+');
782+
if (parts.indexOf('all') === -1 &&
783+
parts.indexOf(hovermode) === -1) {
783784
showCommonLabel = false;
784785
break;
785786
}

‎test/jasmine/tests/hover_label_test.js

+245
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
var d3 = require('d3');
2+
3+
var Plotly = require('@src/index');
4+
var Fx = require('@src/plots/cartesian/graph_interact');
5+
var Lib = require('@src/lib');
6+
7+
var createGraphDiv = require('../assets/create_graph_div');
8+
var destroyGraphDiv = require('../assets/destroy_graph_div');
9+
10+
describe('hover info', function() {
11+
'use strict';
12+
13+
var mock = require('@mocks/14.json'),
14+
evt = {
15+
clientX: mock.layout.width/ 2,
16+
clientY: mock.layout.height / 2
17+
};
18+
19+
afterEach(destroyGraphDiv);
20+
21+
describe('hover info', function() {
22+
var mockCopy = Lib.extendDeep({}, mock);
23+
24+
beforeEach(function(done) {
25+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
26+
});
27+
28+
it('responds to hover', function() {
29+
var gd = document.getElementById('graph');
30+
Fx.hover('graph', evt, 'xy');
31+
32+
var hoverTrace = gd._hoverdata[0];
33+
34+
expect(hoverTrace.curveNumber).toEqual(0);
35+
expect(hoverTrace.pointNumber).toEqual(17);
36+
expect(hoverTrace.x).toEqual(0.388);
37+
expect(hoverTrace.y).toEqual(1);
38+
39+
expect(d3.selectAll('g.axistext').size()).toEqual(1);
40+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
41+
expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388');
42+
expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('1');
43+
});
44+
});
45+
46+
describe('hover info x', function() {
47+
var mockCopy = Lib.extendDeep({}, mock);
48+
49+
mockCopy.data[0].hoverinfo = 'x';
50+
51+
beforeEach(function(done) {
52+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
53+
});
54+
55+
it('responds to hover x', function() {
56+
var gd = document.getElementById('graph');
57+
Fx.hover('graph', evt, 'xy');
58+
59+
var hoverTrace = gd._hoverdata[0];
60+
61+
expect(hoverTrace.curveNumber).toEqual(0);
62+
expect(hoverTrace.pointNumber).toEqual(17);
63+
expect(hoverTrace.x).toEqual(0.388);
64+
expect(hoverTrace.y).toEqual(1);
65+
66+
expect(d3.selectAll('g.axistext').size()).toEqual(1);
67+
expect(d3.selectAll('g.hovertext').size()).toEqual(0);
68+
expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388');
69+
});
70+
});
71+
72+
describe('hover info y', function() {
73+
var mockCopy = Lib.extendDeep({}, mock);
74+
75+
mockCopy.data[0].hoverinfo = 'y';
76+
77+
beforeEach(function(done) {
78+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
79+
});
80+
81+
it('responds to hover y', function() {
82+
var gd = document.getElementById('graph');
83+
Fx.hover('graph', evt, 'xy');
84+
85+
var hoverTrace = gd._hoverdata[0];
86+
87+
expect(hoverTrace.curveNumber).toEqual(0);
88+
expect(hoverTrace.pointNumber).toEqual(17);
89+
expect(hoverTrace.x).toEqual(0.388);
90+
expect(hoverTrace.y).toEqual(1);
91+
92+
expect(d3.selectAll('g.axistext').size()).toEqual(0);
93+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
94+
expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('1');
95+
});
96+
});
97+
98+
describe('hover info text', function() {
99+
var mockCopy = Lib.extendDeep({}, mock);
100+
101+
mockCopy.data[0].text = []
102+
mockCopy.data[0].text[17] = 'hover text'
103+
mockCopy.data[0].hoverinfo = 'text';
104+
105+
beforeEach(function(done) {
106+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
107+
});
108+
109+
it('responds to hover text', function() {
110+
var gd = document.getElementById('graph');
111+
Fx.hover('graph', evt, 'xy');
112+
113+
var hoverTrace = gd._hoverdata[0];
114+
115+
expect(hoverTrace.curveNumber).toEqual(0);
116+
expect(hoverTrace.pointNumber).toEqual(17);
117+
expect(hoverTrace.x).toEqual(0.388);
118+
expect(hoverTrace.y).toEqual(1);
119+
120+
expect(d3.selectAll('g.axistext').size()).toEqual(0);
121+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
122+
expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('hover text');
123+
});
124+
});
125+
126+
describe('hover info all', function() {
127+
var mockCopy = Lib.extendDeep({}, mock);
128+
129+
mockCopy.data[0].text = []
130+
mockCopy.data[0].text[17] = 'hover text'
131+
mockCopy.data[0].hoverinfo = 'all';
132+
133+
beforeEach(function(done) {
134+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
135+
});
136+
137+
it('responds to hover all', function() {
138+
var gd = document.getElementById('graph');
139+
Fx.hover('graph', evt, 'xy');
140+
141+
var hoverTrace = gd._hoverdata[0];
142+
143+
expect(hoverTrace.curveNumber).toEqual(0);
144+
expect(hoverTrace.pointNumber).toEqual(17);
145+
expect(hoverTrace.x).toEqual(0.388);
146+
expect(hoverTrace.y).toEqual(1);
147+
148+
expect(d3.selectAll('g.axistext').size()).toEqual(1);
149+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
150+
expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388');
151+
expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2);
152+
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('1')
153+
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('hover text')
154+
});
155+
});
156+
157+
describe('hover info y+text', function() {
158+
var mockCopy = Lib.extendDeep({}, mock);
159+
160+
mockCopy.data[0].text = []
161+
mockCopy.data[0].text[17] = 'hover text'
162+
mockCopy.data[0].hoverinfo = 'y+text';
163+
164+
beforeEach(function(done) {
165+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
166+
});
167+
168+
it('responds to hover y+text', function() {
169+
var gd = document.getElementById('graph');
170+
Fx.hover('graph', evt, 'xy');
171+
172+
var hoverTrace = gd._hoverdata[0];
173+
174+
expect(hoverTrace.curveNumber).toEqual(0);
175+
expect(hoverTrace.pointNumber).toEqual(17);
176+
expect(hoverTrace.x).toEqual(0.388);
177+
expect(hoverTrace.y).toEqual(1);
178+
179+
expect(d3.selectAll('g.axistext').size()).toEqual(0);
180+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
181+
expect(d3.selectAll('g.hovertext').selectAll('tspan').size()).toEqual(2);
182+
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('1')
183+
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('hover text')
184+
});
185+
});
186+
187+
describe('hover info x+text', function() {
188+
var mockCopy = Lib.extendDeep({}, mock);
189+
190+
mockCopy.data[0].text = []
191+
mockCopy.data[0].text[17] = 'hover text'
192+
mockCopy.data[0].hoverinfo = 'x+text';
193+
194+
beforeEach(function(done) {
195+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
196+
});
197+
198+
it('responds to hover x+text', function() {
199+
var gd = document.getElementById('graph');
200+
Fx.hover('graph', evt, 'xy');
201+
202+
var hoverTrace = gd._hoverdata[0];
203+
204+
expect(hoverTrace.curveNumber).toEqual(0);
205+
expect(hoverTrace.pointNumber).toEqual(17);
206+
expect(hoverTrace.x).toEqual(0.388);
207+
expect(hoverTrace.y).toEqual(1);
208+
209+
expect(d3.selectAll('g.axistext').size()).toEqual(1);
210+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
211+
expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388');
212+
expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('hover text');
213+
});
214+
});
215+
216+
describe('hover info text with html', function() {
217+
var mockCopy = Lib.extendDeep({}, mock);
218+
219+
mockCopy.data[0].text = []
220+
mockCopy.data[0].text[17] = 'hover<br>text'
221+
mockCopy.data[0].hoverinfo = 'text';
222+
223+
beforeEach(function(done) {
224+
Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
225+
});
226+
227+
it('responds to hover text with html', function() {
228+
var gd = document.getElementById('graph');
229+
Fx.hover('graph', evt, 'xy');
230+
231+
var hoverTrace = gd._hoverdata[0];
232+
233+
expect(hoverTrace.curveNumber).toEqual(0);
234+
expect(hoverTrace.pointNumber).toEqual(17);
235+
expect(hoverTrace.x).toEqual(0.388);
236+
expect(hoverTrace.y).toEqual(1);
237+
238+
expect(d3.selectAll('g.axistext').size()).toEqual(0);
239+
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
240+
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('hover')
241+
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('text')
242+
expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2);
243+
});
244+
});
245+
});

‎test/jasmine/tests/plot_interact_test.js

-22
Original file line numberDiff line numberDiff line change
@@ -45,27 +45,6 @@ describe('Test plot structure', function () {
4545

4646
expect(nodes[0].length).toEqual(Npts);
4747
});
48-
49-
it('responds to hover', function() {
50-
var gd = document.getElementById('graph');
51-
52-
var evt = {
53-
clientX: gd.layout.width/ 2,
54-
clientY: gd.layout.height / 2
55-
};
56-
57-
Fx.hover('graph', evt, 'xy');
58-
59-
var hoverTrace = gd._hoverdata[0];
60-
61-
expect(hoverTrace.curveNumber).toEqual(0);
62-
expect(hoverTrace.pointNumber).toEqual(17);
63-
expect(hoverTrace.x).toEqual(0.388);
64-
expect(hoverTrace.y).toEqual(1);
65-
66-
expect(d3.selectAll('g.axistext')[0].length).toEqual(1);
67-
expect(d3.selectAll('g.hovertext')[0].length).toEqual(1);
68-
});
6948
});
7049

7150
describe('pie traces', function() {
@@ -86,7 +65,6 @@ describe('Test plot structure', function () {
8665
expect(nodes[0].length).toEqual(Npts);
8766
});
8867
});
89-
9068
});
9169

9270
describe('geo plots', function() {

0 commit comments

Comments
 (0)