Commit | Line | Data |
---|---|---|
ccd9d7c2 PF |
1 | // Copyright 2011 Google Inc. All Rights Reserved. |
2 | ||
3 | /** | |
4 | * @fileoverview Regression tests for range selector. | |
5 | * @author paul.eric.felix@gmail.com (Paul Felix) | |
6 | */ | |
7 | var RangeSelectorTestCase = TestCase("range-selector"); | |
8 | ||
9 | RangeSelectorTestCase.prototype.setUp = function() { | |
10 | document.body.innerHTML = "<div id='graph'></div>"; | |
11 | }; | |
12 | ||
13 | RangeSelectorTestCase.prototype.tearDown = function() { | |
14 | }; | |
15 | ||
16 | RangeSelectorTestCase.prototype.testRangeSelector = function() { | |
17 | var opts = { | |
18 | width: 480, | |
19 | height: 320, | |
b1a96215 DV |
20 | showRangeSelector: true, |
21 | labels: ['X', 'Y'] | |
ccd9d7c2 PF |
22 | }; |
23 | var data = [ | |
24 | [1, 10], | |
25 | [2, 15], | |
26 | [3, 10], | |
27 | [4, 15], | |
28 | [5, 10], | |
29 | [6, 15], | |
30 | [7, 10], | |
31 | [8, 15], | |
32 | [9, 10] | |
33 | ]; | |
34 | var graph = document.getElementById("graph"); | |
35 | var g = new Dygraph(graph, data, opts); | |
36 | this.assertGraphExistence(g, graph); | |
37 | }; | |
38 | ||
39 | RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() { | |
40 | var opts = { | |
41 | width: 480, | |
42 | height: 320, | |
43 | errorBars: true, | |
b1a96215 DV |
44 | showRangeSelector: true, |
45 | labels: ['X', 'Y'] | |
ccd9d7c2 PF |
46 | }; |
47 | var data = [ | |
48 | [1, [10, 10]], | |
49 | [2, [15, 10]], | |
50 | [3, [10, 10]], | |
51 | [4, [15, 10]], | |
52 | [5, [10, 10]], | |
53 | [6, [15, 20]], | |
54 | [7, [10, 20]], | |
55 | [8, [15, 20]], | |
56 | [9, [10, 20]] | |
57 | ]; | |
58 | var graph = document.getElementById("graph"); | |
59 | var g = new Dygraph(graph, data, opts); | |
60 | this.assertGraphExistence(g, graph); | |
61 | }; | |
62 | ||
63 | RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() { | |
64 | var opts = { | |
65 | width: 480, | |
66 | height: 320, | |
67 | customBars: true, | |
b1a96215 DV |
68 | showRangeSelector: true, |
69 | labels: ['X', 'Y'] | |
ccd9d7c2 PF |
70 | }; |
71 | var data = [ | |
72 | [1, [10, 10, 100]], | |
73 | [2, [15, 20, 110]], | |
74 | [3, [10, 30, 100]], | |
75 | [4, [15, 40, 110]], | |
76 | [5, [10, 120, 100]], | |
77 | [6, [15, 50, 110]], | |
78 | [7, [10, 70, 100]], | |
79 | [8, [15, 90, 110]], | |
80 | [9, [10, 50, 100]] | |
81 | ]; | |
82 | var graph = document.getElementById("graph"); | |
83 | var g = new Dygraph(graph, data, opts); | |
84 | this.assertGraphExistence(g, graph); | |
85 | }; | |
86 | ||
87 | RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() { | |
88 | var opts = { | |
89 | width: 480, | |
90 | height: 320, | |
91 | logscale: true, | |
b1a96215 DV |
92 | showRangeSelector: true, |
93 | labels: ['X', 'Y'] | |
ccd9d7c2 PF |
94 | }; |
95 | var data = [ | |
96 | [1, 10], | |
97 | [2, 15], | |
98 | [3, 10], | |
99 | [4, 15], | |
100 | [5, 10], | |
101 | [6, 15], | |
102 | [7, 10], | |
103 | [8, 15], | |
104 | [9, 10] | |
105 | ]; | |
106 | var graph = document.getElementById("graph"); | |
107 | var g = new Dygraph(graph, data, opts); | |
108 | this.assertGraphExistence(g, graph); | |
109 | }; | |
110 | ||
111 | RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() { | |
112 | var opts = { | |
113 | width: 480, | |
114 | height: 320, | |
115 | showRangeSelector: true, | |
116 | rangeSelectorHeight: 30, | |
117 | rangeSelectorPlotFillColor: 'lightyellow', | |
b1a96215 DV |
118 | rangeSelectorPlotStyleColor: 'yellow', |
119 | labels: ['X', 'Y'] | |
ccd9d7c2 PF |
120 | }; |
121 | var data = [ | |
122 | [1, 10], | |
123 | [2, 15], | |
124 | [3, 10], | |
125 | [4, 15], | |
126 | [5, 10], | |
127 | [6, 15], | |
128 | [7, 10], | |
129 | [8, 15], | |
130 | [9, 10] | |
131 | ]; | |
132 | var graph = document.getElementById("graph"); | |
133 | var g = new Dygraph(graph, data, opts); | |
134 | this.assertGraphExistence(g, graph); | |
135 | }; | |
136 | ||
ceb821aa PF |
137 | RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() { |
138 | var opts = { | |
139 | width: 480, | |
b1a96215 DV |
140 | height: 320, |
141 | labels: ['X', 'Y'] | |
ceb821aa PF |
142 | }; |
143 | var data = [ | |
144 | [1, 10], | |
145 | [2, 15], | |
146 | [3, 10], | |
147 | [4, 15], | |
148 | [5, 10], | |
149 | [6, 15], | |
150 | [7, 10], | |
151 | [8, 15], | |
152 | [9, 10] | |
153 | ]; | |
154 | var graph = document.getElementById("graph"); | |
155 | var g = new Dygraph(graph, data, opts); | |
156 | g.updateOptions({showRangeSelector: true}); | |
157 | this.assertGraphExistence(g, graph); | |
158 | }; | |
159 | ||
160 | // The animatedZooms option does not work with the range selector. Make sure it gets turned off. | |
161 | RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = function() { | |
162 | var opts = { | |
163 | width: 480, | |
164 | height: 320, | |
165 | showRangeSelector: true, | |
b1a96215 DV |
166 | animatedZooms: true, |
167 | labels: ['X', 'Y'] | |
ceb821aa PF |
168 | }; |
169 | var data = [ | |
170 | [1, 10], | |
171 | [2, 15], | |
172 | [3, 10], | |
173 | [4, 15], | |
174 | [5, 10], | |
175 | [6, 15], | |
176 | [7, 10], | |
177 | [8, 15], | |
178 | [9, 10] | |
179 | ]; | |
180 | var graph = document.getElementById("graph"); | |
181 | var g = new Dygraph(graph, data, opts); | |
182 | this.assertGraphExistence(g, graph); | |
183 | assertFalse(g.getOption('animatedZooms')); | |
184 | }; | |
185 | ||
186 | RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = function() { | |
187 | var opts = { | |
188 | width: 480, | |
189 | height: 320, | |
b1a96215 DV |
190 | animatedZooms: true, |
191 | labels: ['X', 'Y'] | |
ceb821aa PF |
192 | }; |
193 | var data = [ | |
194 | [1, 10], | |
195 | [2, 15], | |
196 | [3, 10], | |
197 | [4, 15], | |
198 | [5, 10], | |
199 | [6, 15], | |
200 | [7, 10], | |
201 | [8, 15], | |
202 | [9, 10] | |
203 | ]; | |
204 | var graph = document.getElementById("graph"); | |
205 | var g = new Dygraph(graph, data, opts); | |
206 | g.updateOptions({showRangeSelector: true}); | |
207 | this.assertGraphExistence(g, graph); | |
208 | assertFalse(g.getOption('animatedZooms')); | |
209 | }; | |
210 | ||
2871344a PF |
211 | RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { |
212 | var opts = { | |
213 | width: 480, | |
214 | height: 320, | |
b1a96215 DV |
215 | showRangeSelector: true, |
216 | labels: ['X', 'Y'] | |
2871344a PF |
217 | }; |
218 | var data = [ | |
219 | [1, 10], | |
220 | [2, 15], | |
221 | [3, 10], | |
222 | [4, 15], | |
223 | [5, 10], | |
224 | [6, 15], | |
225 | [7, 10], | |
226 | [8, 15], | |
227 | [9, 10] | |
228 | ]; | |
229 | var graph = document.getElementById("graph"); | |
230 | var g = new Dygraph(graph, data, opts); | |
231 | this.assertGraphExistence(g, graph); | |
232 | var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle'); | |
233 | ||
234 | // Move left zoomhandle in | |
235 | var xRange = g.xAxisRange().slice(); | |
236 | ||
237 | var mouseDownEvent = DygraphOps.createEvent({ | |
238 | type : 'dragstart', | |
239 | detail: 1, | |
240 | clientX : 0, | |
241 | clientY : 0 | |
242 | }); | |
243 | zoomhandles[0].dispatchEvent(mouseDownEvent); | |
244 | ||
245 | var mouseMoveEvent = DygraphOps.createEvent({ | |
246 | type : 'mousemove', | |
247 | clientX : 20, | |
248 | clientY : 20 | |
249 | }); | |
250 | zoomhandles[0].dispatchEvent(mouseMoveEvent); | |
251 | ||
252 | var mouseUpEvent = DygraphOps.createEvent({ | |
253 | type : 'mouseup', | |
254 | detail: 1, | |
255 | clientX : 20, | |
256 | clientY : 20 | |
257 | }); | |
258 | zoomhandles[0].dispatchEvent(mouseUpEvent); | |
259 | ||
260 | var newXRange = g.xAxisRange().slice(); | |
261 | assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]); | |
262 | assertEquals('right zoomhandle should not have moved', xRange[1], newXRange[1]); | |
263 | ||
264 | // Move right zoomhandle in | |
265 | xRange = newXRange; | |
266 | ||
267 | mouseDownEvent = DygraphOps.createEvent({ | |
268 | type : 'dragstart', | |
269 | detail: 1, | |
270 | clientX : 100, | |
271 | clientY : 100 | |
272 | }); | |
273 | zoomhandles[1].dispatchEvent(mouseDownEvent); | |
274 | ||
275 | mouseMoveEvent = DygraphOps.createEvent({ | |
276 | type : 'mousemove', | |
277 | clientX : 80, | |
278 | clientY : 80 | |
279 | }); | |
280 | zoomhandles[1].dispatchEvent(mouseMoveEvent); | |
281 | ||
282 | mouseUpEvent = DygraphOps.createEvent({ | |
283 | type : 'mouseup', | |
284 | detail: 1, | |
285 | clientX : 80, | |
286 | clientY : 80 | |
287 | }); | |
288 | zoomhandles[1].dispatchEvent(mouseUpEvent); | |
289 | ||
290 | var newXRange = g.xAxisRange().slice(); | |
291 | assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]); | |
292 | assertEquals('left zoomhandle should not have moved', xRange[0], newXRange[0]); | |
293 | ||
294 | // Pan left | |
295 | xRange = newXRange; | |
296 | var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0]; | |
297 | var x = parseInt(zoomhandles[0].style.left) + 20; | |
298 | var y = parseInt(zoomhandles[0].style.top); | |
299 | ||
300 | mouseDownEvent = DygraphOps.createEvent({ | |
301 | type : 'mousedown', | |
302 | detail: 1, | |
303 | clientX : x, | |
304 | clientY : y | |
305 | }); | |
306 | fgcanvas.dispatchEvent(mouseDownEvent); | |
307 | ||
308 | x -= 10; | |
309 | ||
310 | mouseMoveEvent = DygraphOps.createEvent({ | |
311 | type : 'mousemove', | |
312 | clientX : x, | |
313 | clientY : y | |
314 | }); | |
315 | fgcanvas.dispatchEvent(mouseMoveEvent); | |
316 | ||
317 | mouseUpEvent = DygraphOps.createEvent({ | |
318 | type : 'mouseup', | |
319 | detail: 1, | |
320 | clientX : x, | |
321 | clientY : y | |
322 | }); | |
323 | fgcanvas.dispatchEvent(mouseUpEvent); | |
324 | ||
325 | var newXRange = g.xAxisRange().slice(); | |
326 | assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]); | |
327 | assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]); | |
328 | }; | |
329 | ||
3718778b DE |
330 | |
331 | RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() { | |
332 | var opts = { | |
333 | width: 480, | |
334 | height: 100, | |
335 | xAxisHeight: 30, | |
336 | drawXAxis: false, | |
337 | showRangeSelector: true, | |
b1a96215 DV |
338 | rangeSelectorHeight: 30, |
339 | labels: ['X', 'Y'] | |
3718778b DE |
340 | }; |
341 | var data = [ | |
342 | [0, 1], | |
343 | [10, 1] | |
344 | ]; | |
345 | var graph = document.getElementById("graph"); | |
346 | var g = new Dygraph(graph, data, opts); | |
347 | ||
348 | //assert, that the range selector is at top position 70 since the 30px of the | |
55cf43c3 | 349 | // xAxis shouldn't be reserved since it isn't drawn. |
3718778b DE |
350 | this.assertGraphExistence(g, graph); |
351 | var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0]; | |
352 | assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top); | |
353 | var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0]; | |
354 | assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top); | |
355 | }; | |
356 | ||
b1a96215 DV |
357 | RangeSelectorTestCase.prototype.testMiniPlotDrawn = function() { |
358 | // Install Proxy to track canvas calls. | |
359 | var origFunc = Dygraph.getContext; | |
360 | var miniHtx; | |
361 | Dygraph.getContext = function(canvas) { | |
dcebad80 | 362 | console.log(canvas.className); |
b1a96215 DV |
363 | if (canvas.className != 'dygraph-rangesel-bgcanvas') { |
364 | return origFunc(canvas); | |
365 | } | |
366 | miniHtx = new Proxy(origFunc(canvas)); | |
367 | return miniHtx; | |
368 | }; | |
369 | ||
370 | var opts = { | |
371 | width: 480, | |
372 | height: 100, | |
373 | xAxisHeight: 30, | |
374 | drawXAxis: false, | |
375 | showRangeSelector: true, | |
376 | rangeSelectorHeight: 30, | |
377 | rangeSelectorPlotStrokeColor: '#ff0000', | |
378 | labels: ['X', 'Y'] | |
379 | }; | |
380 | var data = [ | |
381 | [0, 1], | |
382 | [5, 4], | |
383 | [10, 8] | |
384 | ]; | |
385 | var graph = document.getElementById("graph"); | |
386 | var g = new Dygraph(graph, data, opts); | |
387 | ||
388 | // TODO(danvk): more precise tests. | |
dcebad80 | 389 | assertNotNull(miniHtx); |
b1a96215 DV |
390 | assertTrue(0 < CanvasAssertions.numLinesDrawn(miniHtx, '#ff0000')); |
391 | ||
392 | Dygraph.getContext = origFunc; | |
393 | }; | |
394 | ||
395 | // Tests data computation for the mini plot with a single series. | |
396 | RangeSelectorTestCase.prototype.testSingleCombinedSeries = function() { | |
397 | var opts = { | |
398 | showRangeSelector: true, | |
399 | labels: ['X', 'Y1'] | |
400 | }; | |
401 | var data = [ | |
402 | [0, 1], | |
403 | [5, 4], | |
404 | [10, 8] | |
405 | ]; | |
406 | var graph = document.getElementById("graph"); | |
407 | var g = new Dygraph(graph, data, opts); | |
408 | ||
409 | var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); | |
410 | assertNotNull(rangeSelector); | |
411 | ||
412 | var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); | |
413 | assertEquals({ | |
414 | yMin: 1 - 7 * 0.25, // 25% padding | |
415 | yMax: 8 + 7 * 0.25, | |
416 | data: [ | |
417 | [0, 1], | |
418 | [5, 4], | |
419 | [10, 8] | |
420 | ] | |
421 | }, combinedSeries); | |
422 | }; | |
423 | ||
424 | ||
425 | // Tests that multiple series are averaged for the miniplot. | |
426 | RangeSelectorTestCase.prototype.testCombinedSeries = function() { | |
427 | var opts = { | |
428 | showRangeSelector: true, | |
429 | labels: ['X', 'Y1', 'Y2'] | |
430 | }; | |
431 | var data = [ | |
432 | [0, 1, 3], // average = 2 | |
433 | [5, 4, 6], // average = 5 | |
434 | [10, 7, 9] // average = 8 | |
435 | ]; | |
436 | var graph = document.getElementById("graph"); | |
437 | var g = new Dygraph(graph, data, opts); | |
438 | ||
439 | var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); | |
440 | assertNotNull(rangeSelector); | |
441 | ||
442 | var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); | |
443 | assertEquals({ | |
444 | yMin: 2 - 6 * 0.25, // 25% padding on combined series range. | |
445 | yMax: 8 + 6 * 0.25, | |
446 | data: [ | |
447 | [0, 2], | |
448 | [5, 5], | |
449 | [10, 8] | |
450 | ] | |
451 | }, combinedSeries); | |
452 | }; | |
453 | ||
454 | // Tests data computation for the mini plot with a single error bar series. | |
455 | RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() { | |
456 | var opts = { | |
457 | customBars: true, | |
458 | showRangeSelector: true, | |
459 | labels: ['X', 'Y1'] | |
460 | }; | |
461 | var data = [ | |
462 | [0, [0, 1, 2]], // [low, value, high] | |
463 | [5, [1, 4, 5]], | |
464 | [10, [7, 8, 9]] | |
465 | ]; | |
466 | var graph = document.getElementById("graph"); | |
467 | var g = new Dygraph(graph, data, opts); | |
468 | ||
469 | var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); | |
470 | assertNotNull(rangeSelector); | |
471 | ||
472 | var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); | |
473 | assertEquals({ | |
474 | yMin: 1 - 7 * 0.25, // 25% padding | |
475 | yMax: 8 + 7 * 0.25, | |
476 | data: [ | |
477 | [0, 1], | |
478 | [5, 4], | |
479 | [10, 8] | |
480 | ] | |
481 | }, combinedSeries); | |
482 | }; | |
483 | ||
484 | RangeSelectorTestCase.prototype.testSingleCombinedSeriesErrorBars = function() { | |
485 | var opts = { | |
486 | errorBars: true, | |
487 | showRangeSelector: true, | |
488 | labels: ['X', 'Y1'] | |
489 | }; | |
490 | var data = [ | |
491 | [0, [1, 1]], // [value, standard deviation] | |
492 | [5, [4, 2]], | |
493 | [10, [8, 1]] | |
494 | ]; | |
495 | var graph = document.getElementById("graph"); | |
496 | var g = new Dygraph(graph, data, opts); | |
497 | ||
498 | var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); | |
499 | assertNotNull(rangeSelector); | |
500 | ||
501 | var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); | |
502 | assertEquals({ | |
503 | yMin: 1 - 7 * 0.25, // 25% padding | |
504 | yMax: 8 + 7 * 0.25, | |
505 | data: [ | |
506 | [0, 1], | |
507 | [5, 4], | |
508 | [10, 8] | |
509 | ] | |
510 | }, combinedSeries); | |
511 | }; | |
512 | ||
513 | // Tests data computation for the mini plot with two custom bar series. | |
514 | RangeSelectorTestCase.prototype.testTwoCombinedSeriesCustomBars = function() { | |
515 | var opts = { | |
516 | customBars: true, | |
517 | showRangeSelector: true, | |
518 | labels: ['X', 'Y1', 'Y2'] | |
519 | }; | |
520 | var data = [ | |
521 | [0, [0, 1, 2], [4, 5, 6]], // [low, value, high], avg_val = 3 | |
522 | [5, [1, 4, 5], [5, 8, 9]], // avg_val = 6 | |
523 | [10, [7, 8, 9], [11, 12, 13]] // avg_val = 10 | |
524 | ]; | |
525 | var graph = document.getElementById("graph"); | |
526 | var g = new Dygraph(graph, data, opts); | |
527 | ||
528 | var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); | |
529 | assertNotNull(rangeSelector); | |
530 | ||
531 | var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); | |
532 | assertEquals({ | |
533 | yMin: 3 - 7 * 0.25, // 25% padding | |
534 | yMax: 10 + 7 * 0.25, | |
535 | data: [ | |
536 | [0, 3], | |
537 | [5, 6], | |
538 | [10, 10] | |
539 | ] | |
540 | }, combinedSeries); | |
541 | }; | |
542 | ||
543 | ||
ccd9d7c2 PF |
544 | RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) { |
545 | assertNotNull(g); | |
88c4a47e | 546 | var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle'); |
ccd9d7c2 | 547 | assertEquals(2, zoomhandles.length); |
88c4a47e | 548 | var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas'); |
ccd9d7c2 | 549 | assertEquals(1, bgcanvas.length); |
88c4a47e | 550 | var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas'); |
ccd9d7c2 PF |
551 | assertEquals(1, fgcanvas.length); |
552 | } |