Commit | Line | Data |
---|---|---|
cea0fb70 RK |
1 | // Copyright (c) 2012 Google, Inc. |
2 | // | |
3 | // Permission is hereby granted, free of charge, to any person obtaining a copy | |
4 | // of this software and associated documentation files (the "Software"), to deal | |
5 | // in the Software without restriction, including without limitation the rights | |
6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
7 | // copies of the Software, and to permit persons to whom the Software is | |
8 | // furnished to do so, subject to the following conditions: | |
9 | // | |
10 | // The above copyright notice and this permission notice shall be included in | |
11 | // all copies or substantial portions of the Software. | |
12 | // | |
13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
19 | // THE SOFTWARE. | |
20 | ||
794280e2 | 21 | /** |
cea0fb70 RK |
22 | * @fileoverview Test cases for drawing lines with missing points. |
23 | * | |
24 | * @author konigsberg@google.com (Robert Konigsberg) | |
25 | */ | |
26 | var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]]; | |
27 | ||
28 | var MissingPointsTestCase = TestCase("missing-points"); | |
29 | ||
4707563c | 30 | MissingPointsTestCase._origFunc = Dygraph.getContext; |
cea0fb70 RK |
31 | MissingPointsTestCase.prototype.setUp = function() { |
32 | document.body.innerHTML = "<div id='graph'></div>"; | |
33 | Dygraph.getContext = function(canvas) { | |
4707563c | 34 | return new Proxy(MissingPointsTestCase._origFunc(canvas)); |
cea0fb70 RK |
35 | } |
36 | }; | |
37 | ||
38 | MissingPointsTestCase.prototype.tearDown = function() { | |
4707563c | 39 | Dygraph.getContext = MissingPointsTestCase._origFunc; |
cea0fb70 RK |
40 | }; |
41 | ||
42 | MissingPointsTestCase.prototype.testSeparatedPointsDontDraw = function() { | |
43 | var graph = document.getElementById("graph"); | |
44 | var g = new Dygraph( | |
45 | graph, | |
46 | [[1, 10, 11], | |
47 | [2, 11, null], | |
48 | [3, 12, 13]], | |
49 | { colors: ['red', 'blue']}); | |
50 | var htx = g.hidden_ctx_; | |
51 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); | |
52 | assertEquals(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
d8c77f39 | 53 | }; |
cea0fb70 RK |
54 | |
55 | MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded = function() { | |
56 | var graph = document.getElementById("graph"); | |
57 | var g = new Dygraph( | |
58 | graph, | |
59 | [[0, 10], | |
60 | [1, 11], | |
61 | [2, null], | |
62 | [3, 13], | |
63 | [4, 14]], | |
64 | { colors: ['blue']}); | |
65 | var htx = g.hidden_ctx_; | |
cea0fb70 RK |
66 | |
67 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
68 | CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212], | |
69 | { strokeStyle: '#0000ff', }); | |
70 | CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25], | |
71 | { strokeStyle: '#0000ff', }); | |
d8c77f39 | 72 | }; |
cea0fb70 RK |
73 | |
74 | MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded_connected = function() { | |
75 | var graph = document.getElementById("graph"); | |
76 | var g = new Dygraph( | |
77 | graph, | |
78 | [[0, 10], | |
79 | [1, 11], | |
80 | [2, null], | |
81 | [3, 13], | |
82 | [4, 14]], | |
83 | { colors: ['blue'], connectSeparatedPoints: true}); | |
84 | var htx = g.hidden_ctx_; | |
85 | var num_lines = 0; | |
cea0fb70 RK |
86 | |
87 | assertEquals(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
794280e2 | 88 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
89 | [[56, 275], [161, 212], [370, 87], [475, 25]], |
90 | { strokeStyle: '#0000ff' }); | |
d8c77f39 | 91 | }; |
0b9ce4de RK |
92 | |
93 | /** | |
94 | * At the time of writing this test, the blue series is only points, and not lines. | |
95 | */ | |
96 | MissingPointsTestCase.prototype.testConnectSeparatedPoints = function() { | |
97 | var g = new Dygraph( | |
98 | document.getElementById("graph"), | |
99 | [ | |
100 | [1, null, 3], | |
101 | [2, 2, null], | |
102 | [3, null, 7], | |
103 | [4, 5, null], | |
104 | [5, null, 5], | |
105 | [6, 3, null] | |
106 | ], | |
107 | { | |
108 | connectSeparatedPoints: true, | |
109 | drawPoints: true, | |
110 | colors: ['red', 'blue'] | |
111 | } | |
112 | ); | |
fb09a25a RK |
113 | |
114 | var htx = g.hidden_ctx_; | |
115 | ||
116 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
794280e2 | 117 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
118 | [[56, 225], [223, 25], [391, 125]], |
119 | { strokeStyle: '#0000ff' }); | |
120 | ||
121 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); | |
794280e2 | 122 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
123 | [[140, 275], [307, 125], [475, 225]], |
124 | { strokeStyle: '#ff0000' }); | |
d8c77f39 | 125 | }; |
0b9ce4de RK |
126 | |
127 | /** | |
128 | * At the time of writing this test, the blue series is only points, and not lines. | |
129 | */ | |
130 | MissingPointsTestCase.prototype.testConnectSeparatedPointsWithNan = function() { | |
131 | var g = new Dygraph( | |
132 | document.getElementById("graph"), | |
133 | "x,A,B \n" + | |
134 | "1,,3 \n" + | |
135 | "2,2, \n" + | |
136 | "3,,5 \n" + | |
137 | "4,4, \n" + | |
138 | "5,,7 \n" + | |
139 | "6,NaN, \n" + | |
140 | "8,8, \n" + | |
141 | "10,10, \n", | |
142 | { | |
143 | connectSeparatedPoints: true, | |
144 | drawPoints: true, | |
145 | colors: ['red', 'blue'] | |
146 | } | |
147 | ); | |
fb09a25a RK |
148 | |
149 | var htx = g.hidden_ctx_; | |
150 | ||
151 | // Red has two disconnected line segments | |
152 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); | |
153 | CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' }); | |
154 | CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' }); | |
155 | ||
156 | // Blue's lines are consecutive, however. | |
157 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
794280e2 | 158 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
159 | [[56, 244], [149, 181], [242, 118]], |
160 | { strokeStyle: '#0000ff' }); | |
d8c77f39 | 161 | }; |
fb09a25a | 162 | |
794280e2 | 163 | /* These lines contain awesome powa! |
fb09a25a RK |
164 | var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"}); |
165 | for (var idx = 0; idx < lines.length; idx++) { | |
166 | var line = lines[idx]; | |
167 | console.log(line[0].args, line[1].args, line[0].properties.strokeStyle); | |
168 | } | |
4707563c | 169 | */ |
d8c77f39 DE |
170 | |
171 | MissingPointsTestCase.prototype.testErrorBarsWithMissingPoints = function() { | |
172 | var data = [ | |
173 | [1, [2,1]], | |
174 | [2, [3,1]], | |
175 | [3, null], | |
176 | [4, [5,1]], | |
177 | [5, [4,1]], | |
178 | [6, [null,null]], | |
179 | ]; | |
180 | var g = new Dygraph( | |
181 | document.getElementById("graph"), | |
182 | data, | |
183 | { | |
184 | errorBars: true, | |
185 | colors: ['red'] | |
186 | } | |
187 | ); | |
188 | ||
189 | var htx = g.hidden_ctx_; | |
190 | ||
30a5cfc6 | 191 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
192 | |
193 | var p0 = g.toDomCoords(data[0][0], data[0][1][0]); | |
194 | var p1 = g.toDomCoords(data[1][0], data[1][1][0]); | |
195 | var p2 = g.toDomCoords(data[3][0], data[3][1][0]); | |
196 | var p3 = g.toDomCoords(data[4][0], data[4][1][0]); | |
794280e2 | 197 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 | 198 | [p0, p1], { strokeStyle: '#ff0000' }); |
794280e2 | 199 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 DE |
200 | [p2, p3], { strokeStyle: '#ff0000' }); |
201 | }; | |
202 | ||
203 | MissingPointsTestCase.prototype.testErrorBarsWithMissingPointsConnected = function() { | |
204 | var data = [ | |
205 | [1, [null,1]], | |
206 | [2, [2,1]], | |
207 | [3, null], | |
208 | [4, [5,1]], | |
209 | [5, [null,null]], | |
210 | [6, [3,1]] | |
211 | ]; | |
212 | var g = new Dygraph( | |
213 | document.getElementById("graph"), | |
214 | data, | |
215 | { | |
216 | connectSeparatedPoints: true, | |
217 | drawPoints: true, | |
218 | errorBars: true, | |
219 | colors: ['red'] | |
220 | } | |
221 | ); | |
222 | ||
223 | var htx = g.hidden_ctx_; | |
794280e2 | 224 | |
30a5cfc6 | 225 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
226 | |
227 | var p1 = g.toDomCoords(data[1][0], data[1][1][0]); | |
228 | var p2 = g.toDomCoords(data[3][0], data[3][1][0]); | |
229 | var p3 = g.toDomCoords(data[5][0], data[5][1][0]); | |
794280e2 | 230 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 DE |
231 | [p1, p2, p3], |
232 | { strokeStyle: '#ff0000' }); | |
233 | }; | |
234 | MissingPointsTestCase.prototype.testCustomBarsWithMissingPoints = function() { | |
235 | var data = [ | |
236 | [1, [1,2,3]], | |
237 | [2, [2,3,4]], | |
238 | [3, null], | |
239 | [4, [4,5,6]], | |
240 | [5, [3,4,5]], | |
241 | [6, [null,null,null]], | |
6d25b0cd DE |
242 | [7, [2,3,4]], |
243 | [8, [1,2,3]], | |
244 | [9, NaN], | |
245 | [10, [2,3,4]], | |
246 | [11, [3,4,5]], | |
247 | [12, [NaN,NaN,NaN]] | |
d8c77f39 DE |
248 | ]; |
249 | var g = new Dygraph( | |
250 | document.getElementById("graph"), | |
251 | data, | |
252 | { | |
253 | customBars: true, | |
254 | colors: ['red'] | |
255 | } | |
256 | ); | |
257 | ||
258 | var htx = g.hidden_ctx_; | |
259 | ||
30a5cfc6 | 260 | assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
261 | |
262 | var p0 = g.toDomCoords(data[0][0], data[0][1][1]); | |
263 | var p1 = g.toDomCoords(data[1][0], data[1][1][1]); | |
6d25b0cd | 264 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' }); |
794280e2 | 265 | |
6d25b0cd DE |
266 | p0 = g.toDomCoords(data[3][0], data[3][1][1]); |
267 | p1 = g.toDomCoords(data[4][0], data[4][1][1]); | |
268 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' }); | |
269 | ||
270 | p0 = g.toDomCoords(data[6][0], data[6][1][1]); | |
271 | p1 = g.toDomCoords(data[7][0], data[7][1][1]); | |
272 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });; | |
273 | ||
274 | p0 = g.toDomCoords(data[9][0], data[9][1][1]); | |
275 | p1 = g.toDomCoords(data[10][0], data[10][1][1]); | |
276 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' }); | |
d8c77f39 DE |
277 | }; |
278 | ||
279 | MissingPointsTestCase.prototype.testCustomBarsWithMissingPointsConnected = function() { | |
280 | var data = [ | |
281 | [1, [1,null,1]], | |
282 | [2, [1,2,3]], | |
283 | [3, null], | |
284 | [4, [4,5,6]], | |
285 | [5, [null,null,null]], | |
286 | [6, [2,3,4]] | |
287 | ]; | |
288 | var g = new Dygraph( | |
289 | document.getElementById("graph"), | |
290 | data, | |
291 | { | |
292 | connectSeparatedPoints: true, | |
293 | drawPoints: true, | |
294 | customBars: true, | |
295 | colors: ['red'] | |
296 | } | |
297 | ); | |
298 | ||
299 | var htx = g.hidden_ctx_; | |
794280e2 | 300 | |
30a5cfc6 | 301 | assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
302 | |
303 | var p1 = g.toDomCoords(data[1][0], data[1][1][1]); | |
304 | var p2 = g.toDomCoords(data[3][0], data[3][1][1]); | |
305 | var p3 = g.toDomCoords(data[5][0], data[5][1][1]); | |
794280e2 | 306 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 DE |
307 | [p1, p2, p3], |
308 | { strokeStyle: '#ff0000' }); | |
309 | }; | |
794280e2 | 310 | |
9bda5a1d | 311 | MissingPointsTestCase.prototype.testLeftBoundaryWithMisingPoints = function() { |
312 | var data = [ | |
313 | [1, null, 3], | |
314 | [2, 1, null], | |
315 | [3, 0, 5], | |
316 | [4, 2, 1], | |
317 | [5, 4, null], | |
318 | [6, 3, 2] | |
319 | ]; | |
320 | var g = new Dygraph( | |
321 | document.getElementById("graph"), | |
322 | data, | |
323 | { | |
324 | connectSeparatedPoints: true, | |
325 | drawPoints: true, | |
326 | colors: ['red','blue'] | |
327 | } | |
328 | ); | |
329 | g.updateOptions({ dateWindow : [ 2.5, 4.5 ] }); | |
330 | assertEquals(1, g.getLeftBoundary_(0)); | |
331 | assertEquals(0, g.getLeftBoundary_(1)); | |
332 | ||
333 | var domX = g.toDomXCoord(1.9); | |
334 | var closestRow = g.findClosestRow(domX); | |
335 | assertEquals(1, closestRow); | |
336 | ||
337 | g.setSelection(closestRow); | |
338 | assertEquals(1, g.selPoints_.length); | |
339 | assertEquals(1, g.selPoints_[0].yval); | |
9bda5a1d | 340 | |
341 | g.setSelection(3); | |
342 | assertEquals(2, g.selPoints_.length); | |
343 | assertEquals(g.selPoints_[0].xval, g.selPoints_[1].xval); | |
344 | assertEquals(2, g.selPoints_[0].yval); | |
345 | assertEquals(1, g.selPoints_[1].yval); | |
346 | }; | |
794280e2 DV |
347 | |
348 | // Regression test for issue #411 | |
349 | MissingPointsTestCase.prototype.testEmptySeries = function() { | |
350 | var graphDiv = document.getElementById("graph"); | |
351 | var g = new Dygraph( | |
352 | graphDiv, | |
353 | "Time,Empty Series,Series 1,Series 2\n" + | |
354 | "1381134460,,0,100\n" + | |
355 | "1381134461,,1,99\n" + | |
356 | "1381134462,,2,98\n" + | |
357 | "1381134463,,3,97\n" + | |
358 | "1381134464,,4,96\n" + | |
359 | "1381134465,,5,95\n" + | |
360 | "1381134466,,6,94\n" + | |
361 | "1381134467,,7,93\n" + | |
362 | "1381134468,,8,92\n" + | |
363 | "1381134469,,9,91\n", { | |
364 | visibility: [true, false, true], | |
365 | dateWindow: [1381134465, 1381134467] | |
366 | }); | |
367 | ||
368 | g.setSelection(6); | |
369 | assertEquals("1381134466: Series 2: 94", Util.getLegend(graphDiv)); | |
370 | }; |