Commit | Line | Data |
---|---|---|
c9faeafd DV |
1 | /** |
2 | * @fileoverview Tests relating to annotations | |
3 | * | |
4 | * @author danvk@google.com (Dan Vanderkam) | |
5 | */ | |
c9faeafd | 6 | |
e8c70e4e DV |
7 | import Dygraph from '../../src/dygraph'; |
8 | import Util from './Util'; | |
c9faeafd | 9 | |
e8c70e4e DV |
10 | describe("annotations", function() { |
11 | ||
12 | cleanupAfterEach(); | |
c9faeafd | 13 | |
89fdcedb | 14 | it('testAnnotationsDrawn', function() { |
c9faeafd DV |
15 | var opts = { |
16 | width: 480, | |
17 | height: 320 | |
18 | }; | |
19 | var data = "X,Y\n" + | |
20 | "0,-1\n" + | |
21 | "1,0\n" + | |
22 | "2,1\n" + | |
23 | "3,0\n" | |
24 | ; | |
25 | ||
26 | var graph = document.getElementById("graph"); | |
27 | var g = new Dygraph(graph, data, opts); | |
28 | g.setAnnotations([ | |
29 | { | |
30 | series: 'Y', | |
31 | x: 1, | |
32 | shortText: 'A', | |
33 | text: 'Long A', | |
34 | cssClass: 'ann1' | |
35 | }, | |
36 | { | |
37 | series: 'Y', | |
38 | x: 2, | |
39 | shortText: 'B', | |
40 | text: 'Long B', | |
41 | cssClass: 'ann2' | |
42 | } | |
43 | ]); | |
44 | ||
89fdcedb | 45 | assert.equal(2, g.annotations().length); |
c9faeafd | 46 | var a1 = document.getElementsByClassName('ann1'); |
89fdcedb | 47 | assert.equal(1, a1.length); |
c9faeafd | 48 | a1 = a1[0]; |
89fdcedb | 49 | assert.equal('A', a1.textContent); |
c9faeafd DV |
50 | |
51 | var a2 = document.getElementsByClassName('ann2'); | |
89fdcedb | 52 | assert.equal(1, a2.length); |
c9faeafd | 53 | a2 = a2[0]; |
89fdcedb DV |
54 | assert.equal('B', a2.textContent); |
55 | }); | |
c9faeafd DV |
56 | |
57 | // Some errors that should be flagged: | |
58 | // 1. Invalid series name (e.g. 'X' or 'non-existent') | |
59 | // 2. Passing a string as 'x' instead of a number (e.g. x: '1') | |
60 | ||
89fdcedb | 61 | it('testAnnotationsDontDisappearOnResize', function() { |
c9faeafd DV |
62 | var opts = { |
63 | }; | |
64 | var data = "X,Y\n" + | |
65 | "0,-1\n" + | |
66 | "1,0\n" + | |
67 | "2,1\n" + | |
68 | "3,0\n" | |
69 | ; | |
70 | ||
71 | var graph = document.getElementById("graph"); | |
72 | var g = new Dygraph(graph, data, opts); | |
73 | g.setAnnotations([ | |
74 | { | |
75 | series: 'Y', | |
76 | x: 1, | |
77 | shortText: 'A', | |
78 | text: 'Long A', | |
79 | cssClass: 'ann1' | |
80 | } | |
81 | ]); | |
82 | ||
83 | // Check that it displays at all | |
89fdcedb | 84 | assert.equal(1, g.annotations().length); |
c9faeafd | 85 | var a1 = document.getElementsByClassName('ann1'); |
89fdcedb | 86 | assert.equal(1, a1.length); |
c9faeafd | 87 | a1 = a1[0]; |
89fdcedb | 88 | assert.equal('A', a1.textContent); |
c9faeafd DV |
89 | |
90 | // ... and that resizing doesn't kill it. | |
91 | g.resize(400, 300); | |
89fdcedb | 92 | assert.equal(1, g.annotations().length); |
c9faeafd | 93 | var a1 = document.getElementsByClassName('ann1'); |
89fdcedb | 94 | assert.equal(1, a1.length); |
c9faeafd | 95 | a1 = a1[0]; |
89fdcedb DV |
96 | assert.equal('A', a1.textContent); |
97 | }); | |
4c919f55 DV |
98 | |
99 | // Verify that annotations outside of the visible x-range are not shown. | |
89fdcedb | 100 | it('testAnnotationsOutOfRangeX', function() { |
4c919f55 DV |
101 | var opts = { |
102 | }; | |
103 | var data = "X,Y\n" + | |
104 | "0,-1\n" + | |
105 | "1,0\n" + | |
106 | "2,1\n" + | |
107 | "3,0\n" | |
108 | ; | |
109 | ||
110 | var graph = document.getElementById("graph"); | |
111 | var g = new Dygraph(graph, data, opts); | |
112 | g.setAnnotations([ | |
113 | { | |
114 | series: 'Y', | |
115 | x: 1, | |
116 | shortText: 'A', | |
117 | text: 'Long A', | |
118 | cssClass: 'ann1' | |
119 | } | |
120 | ]); | |
121 | ||
122 | // Check that it displays at all | |
89fdcedb | 123 | assert.equal(1, g.annotations().length); |
4c919f55 | 124 | var a1 = document.getElementsByClassName('ann1'); |
89fdcedb | 125 | assert.equal(1, a1.length); |
4c919f55 | 126 | a1 = a1[0]; |
89fdcedb | 127 | assert.equal('A', a1.textContent); |
4c919f55 DV |
128 | |
129 | // ... and that panning right removes the annotation. | |
130 | g.updateOptions({dateWindow: [2, 6]}); | |
89fdcedb | 131 | assert.equal(1, g.annotations().length); |
4c919f55 | 132 | a1 = document.getElementsByClassName('ann1'); |
89fdcedb | 133 | assert.equal(0, a1.length); |
4c919f55 DV |
134 | |
135 | // ... and that panning left brings it back. | |
136 | g.updateOptions({dateWindow: [0, 4]}); | |
89fdcedb | 137 | assert.equal(1, g.annotations().length); |
4c919f55 | 138 | a1 = document.getElementsByClassName('ann1'); |
89fdcedb DV |
139 | assert.equal(1, a1.length); |
140 | }); | |
4c919f55 DV |
141 | |
142 | // Verify that annotations outside of the visible y-range are not shown. | |
89fdcedb | 143 | it('testAnnotationsOutOfRangeY', function() { |
4c919f55 DV |
144 | var opts = { |
145 | }; | |
146 | var data = "X,Y\n" + | |
147 | "0,-1\n" + | |
148 | "1,0\n" + | |
149 | "2,1\n" + | |
150 | "3,0\n" | |
151 | ; | |
152 | ||
153 | var graph = document.getElementById("graph"); | |
154 | var g = new Dygraph(graph, data, opts); | |
155 | g.setAnnotations([ | |
156 | { | |
157 | series: 'Y', | |
158 | x: 1, | |
159 | shortText: 'A', | |
160 | text: 'Long A', | |
161 | cssClass: 'ann1' | |
162 | } | |
163 | ]); | |
164 | ||
165 | // ... check that panning up removes the annotation. | |
166 | g.updateOptions({valueRange: [0.5, 2.5]}); | |
89fdcedb DV |
167 | assert.equal(1, g.annotations().length); |
168 | var a1 = document.getElementsByClassName('ann1'); | |
169 | assert.equal(0, a1.length); | |
4c919f55 DV |
170 | |
171 | // ... and that panning down brings it back. | |
172 | g.updateOptions({valueRange: [-1, 1]}); | |
89fdcedb | 173 | assert.equal(1, g.annotations().length); |
4c919f55 | 174 | a1 = document.getElementsByClassName('ann1'); |
89fdcedb DV |
175 | assert.equal(1, a1.length); |
176 | }); | |
492ea455 | 177 | |
89fdcedb | 178 | it('testAnnotationsDrawnInDrawCallback', function() { |
492ea455 RK |
179 | var data = "X,Y\n" + |
180 | "0,-1\n" + | |
181 | "1,0\n" + | |
182 | "2,1\n"; | |
183 | ||
184 | var graph = document.getElementById("graph"); | |
185 | ||
186 | var calls = []; | |
187 | var g = new Dygraph(graph, data, { | |
188 | width: 480, | |
189 | height: 320, | |
190 | drawCallback: function(g, initial) { | |
191 | calls.push(initial); | |
192 | if (initial) { | |
193 | g.setAnnotations([ | |
194 | { | |
195 | series: 'Y', | |
196 | x: 1, | |
197 | shortText: 'A', | |
198 | text: 'Long A', | |
199 | }, | |
200 | ]); | |
201 | } | |
202 | } | |
203 | }); | |
204 | ||
89fdcedb DV |
205 | assert.deepEqual([true, false], calls); |
206 | }); | |
b5481aea DV |
207 | |
208 | ||
209 | // Test that annotations on the same point are stacked. | |
210 | // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=256 | |
89fdcedb | 211 | it('testAnnotationsStacked', function() { |
b5481aea DV |
212 | var data = 'X,Y1,Y2\n' + |
213 | '0,1,2\n' + | |
214 | '1,2,3\n'; | |
215 | var graph = document.getElementById("graph"); | |
216 | var annotations = [ | |
217 | { | |
218 | series: 'Y1', | |
219 | x: 0, | |
220 | shortText: '1', | |
221 | attachAtBottom: true | |
222 | }, | |
223 | { | |
224 | series: 'Y2', | |
225 | x: 0, | |
226 | shortText: '2', | |
227 | attachAtBottom: true | |
228 | } | |
229 | ]; | |
230 | var g = new Dygraph(graph, data, { | |
231 | width: 480, | |
232 | height: 320 | |
233 | }); | |
234 | g.setAnnotations(annotations); | |
235 | ||
236 | var annEls = document.getElementsByClassName('dygraphDefaultAnnotation'); | |
89fdcedb | 237 | assert.equal(2, annEls.length); |
b5481aea | 238 | |
89fdcedb | 239 | assert.equal(annEls[0].offsetLeft, annEls[1].offsetLeft); |
b5481aea | 240 | assert(annEls[1].offsetTop < annEls[0].offsetTop - 10); |
89fdcedb | 241 | }); |
5bcc58b4 DV |
242 | |
243 | ||
244 | // Test the .ready() method, which is most often used with setAnnotations(). | |
89fdcedb | 245 | it('testReady', function() { |
5bcc58b4 DV |
246 | var data = 'X,Y1,Y2\n' + |
247 | '0,1,2\n' + | |
248 | '1,2,3\n'; | |
249 | var mockXhr = Util.overrideXMLHttpRequest(data); | |
250 | ||
251 | var graph = document.getElementById("graph"); | |
252 | var g = new Dygraph(graph, "data.csv", { | |
253 | width: 480, | |
254 | height: 320 | |
255 | }); | |
256 | ||
257 | var ready_calls = 0; | |
258 | g.ready(function() { ready_calls++; }); | |
259 | ||
89fdcedb | 260 | assert.equal(0, ready_calls); |
5bcc58b4 | 261 | mockXhr.respond(); |
89fdcedb | 262 | assert.equal(1, ready_calls); |
5bcc58b4 DV |
263 | |
264 | // Make sure that ready isn't called on redraws. | |
265 | g.updateOptions({}); | |
89fdcedb | 266 | assert.equal(1, ready_calls); |
5bcc58b4 DV |
267 | |
268 | // Or data changes. | |
269 | g.updateOptions({file: data}); | |
89fdcedb DV |
270 | assert.equal(1, ready_calls); |
271 | }); | |
272 | ||
273 | }); |