Added pixelRatio option to override canvas upscaling. Resolves #876, test included...
[dygraphs.git] / auto_tests / tests / callback.js
... / ...
CommitLineData
1/**
2 * @fileoverview Test cases for the callbacks.
3 *
4 * @author uemit.seren@gmail.com (Ümit Seren)
5 */
6
7import Dygraph from '../../src/dygraph';
8import * as utils from '../../src/dygraph-utils';
9import Util from './Util';
10import DygraphOps from './DygraphOps';
11
12describe("callback", function() {
13
14cleanupAfterEach();
15
16var xhr, styleSheet;
17var graph;
18
19beforeEach(function() {
20 var container = document.getElementById('graph');
21 container.innerHTML = "<div id='inner-graph'></div><div id='selection'></div>";
22 graph = container.querySelector('#inner-graph');
23 xhr = XMLHttpRequest;
24 styleSheet = document.createElement("style");
25 styleSheet.type = "text/css";
26 document.getElementsByTagName("head")[0].appendChild(styleSheet);
27});
28
29afterEach(function() {
30 window.XMLHttpRequest = xhr;
31});
32
33var data = "X,a,b,c\n" +
34 "10,-1,1,2\n" +
35 "11,0,3,1\n" +
36 "12,1,4,2\n" +
37 "13,0,2,3\n";
38
39
40/**
41 * This tests that when the function idxToRow_ returns the proper row and the onHiglightCallback
42 * is properly called when the first series is hidden (setVisibility = false)
43 *
44 */
45it('testHighlightCallbackIsCalled', function() {
46 var h_row;
47 var h_pts;
48
49 var highlightCallback = function(e, x, pts, row) {
50 assert.equal(g, this);
51 h_row = row;
52 h_pts = pts;
53 };
54
55 var g = new Dygraph(graph, data,
56 {
57 width: 100,
58 height: 100,
59 visibility: [false, true, true],
60 highlightCallback: highlightCallback
61 });
62
63 DygraphOps.dispatchMouseMove(g, 13, 10);
64
65 //check correct row is returned
66 assert.equal(3, h_row);
67 //check there are only two points (because first series is hidden)
68 assert.equal(2, h_pts.length);
69});
70
71
72/**
73 * Test that drawPointCallback isn't called when drawPoints is false
74 */
75it('testDrawPointCallback_disabled', function() {
76 var called = false;
77
78 var callback = function() {
79 assert.equal(g, this);
80 called = true;
81 };
82
83 var g = new Dygraph(graph, data, {
84 drawPointCallback: callback,
85 });
86
87 assert.isFalse(called);
88});
89
90/**
91 * Test that drawPointCallback is called when drawPoints is true
92 */
93it('testDrawPointCallback_enabled', function() {
94 var called = false;
95 var callbackThis = null;
96
97 var callback = function() {
98 callbackThis = this;
99 called = true;
100 };
101
102 var g = new Dygraph(graph, data, {
103 drawPoints: true,
104 drawPointCallback: callback
105 });
106
107 assert.isTrue(called);
108 assert.equal(g, callbackThis);
109});
110
111/**
112 * Test that drawPointCallback is called when drawPoints is true
113 */
114it('testDrawPointCallback_pointSize', function() {
115 var pointSize = 0;
116 var count = 0;
117
118 var callback = function(g, seriesName, canvasContext, cx, cy, color, pointSizeParam) {
119 assert.equal(g, this);
120 pointSize = pointSizeParam;
121 count++;
122 };
123
124 var g = new Dygraph(graph, data, {
125 drawPoints: true,
126 drawPointCallback: callback
127 });
128
129 assert.equal(1.5, pointSize);
130 assert.equal(12, count); // one call per data point.
131
132 var g = new Dygraph(graph, data, {
133 drawPoints: true,
134 drawPointCallback: callback,
135 pointSize: 8
136 });
137
138 assert.equal(8, pointSize);
139});
140
141/**
142 * Test that drawPointCallback is called for isolated points when
143 * drawPoints is false, and also for gap points if that's enabled.
144 */
145it('testDrawPointCallback_isolated', function() {
146 var xvalues = [];
147
148 var g;
149 var callback = function(g, seriesName, canvasContext, cx, cy, color, pointSizeParam) {
150 assert.equal(g, this);
151 var dx = g.toDataXCoord(cx);
152 xvalues.push(dx);
153 utils.Circles.DEFAULT.apply(this, arguments);
154 };
155
156 var testdata = [[10, 2], [11, 3], [12, NaN], [13, 2], [14, NaN], [15, 3]];
157 var graphOpts = {
158 labels: ['X', 'Y'],
159 valueRange: [0, 4],
160 drawPoints : false,
161 drawPointCallback : callback,
162 pointSize : 8
163 };
164
165 // Test that isolated points get drawn
166 g = new Dygraph(graph, testdata, graphOpts);
167 assert.equal(2, xvalues.length);
168 assert.equal(13, xvalues[0]);
169 assert.equal(15, xvalues[1]);
170
171 // Test that isolated points + gap points get drawn when
172 // drawGapEdgePoints is set. This should add one point at the right
173 // edge of the segment at x=11, but not at the graph edge at x=10.
174 xvalues = []; // Reset for new test
175 graphOpts.drawGapEdgePoints = true;
176 g = new Dygraph(graph, testdata, graphOpts);
177 assert.equal(3, xvalues.length);
178 assert.equal(11, xvalues[0]);
179 assert.equal(13, xvalues[1]);
180 assert.equal(15, xvalues[2]);
181});
182
183/**
184 * This tests that when the function idxToRow_ returns the proper row and the onHiglightCallback
185 * is properly called when the first series is hidden (setVisibility = false)
186 *
187 */
188it('testDrawHighlightPointCallbackIsCalled', function() {
189 var called = false;
190
191 var drawHighlightPointCallback = function() {
192 assert.equal(g, this);
193 called = true;
194 };
195
196 var g = new Dygraph(graph, data,
197 {
198 width: 100,
199 height: 100,
200 drawHighlightPointCallback: drawHighlightPointCallback
201 });
202
203 assert.isFalse(called);
204 DygraphOps.dispatchMouseMove(g, 13, 10);
205 assert.isTrue(called);
206});
207
208/**
209 * Test the closest-series highlighting methods for normal and stacked modes.
210 * Also pass in line widths for plain and highlighted lines for easier visual
211 * confirmation that the highlighted line is drawn on top of the others.
212 */
213var runClosestTest = function(isStacked, widthNormal, widthHighlighted) {
214 var h_row;
215 var h_pts;
216 var h_series;
217
218 var g = new Dygraph(graph, data,
219 {
220 width: 600,
221 height: 400,
222 visibility: [false, true, true],
223 stackedGraph: isStacked,
224 strokeWidth: widthNormal,
225 strokeBorderWidth: 2,
226 highlightCircleSize: widthNormal * 2,
227 highlightSeriesBackgroundAlpha: 0.3,
228
229 highlightSeriesOpts: {
230 strokeWidth: widthHighlighted,
231 highlightCircleSize: widthHighlighted * 2
232 }
233 });
234
235 var highlightCallback = function(e, x, pts, row, set) {
236 assert.equal(g, this);
237 h_row = row;
238 h_pts = pts;
239 h_series = set;
240 document.getElementById('selection').innerHTML='row=' + row + ', set=' + set;
241 };
242
243 g.updateOptions({highlightCallback: highlightCallback}, true);
244
245 if (isStacked) {
246 DygraphOps.dispatchMouseMove(g, 11.45, 1.4);
247 assert.equal(1, h_row);
248 assert.equal('c', h_series);
249
250 //now move up in the same row
251 DygraphOps.dispatchMouseMove(g, 11.45, 1.5);
252 assert.equal(1, h_row);
253 assert.equal('b', h_series);
254
255 //and a bit to the right
256 DygraphOps.dispatchMouseMove(g, 11.55, 1.5);
257 assert.equal(2, h_row);
258 assert.equal('c', h_series);
259 } else {
260 DygraphOps.dispatchMouseMove(g, 11, 1.5);
261 assert.equal(1, h_row);
262 assert.equal('c', h_series);
263
264 //now move up in the same row
265 DygraphOps.dispatchMouseMove(g, 11, 2.5);
266 assert.equal(1, h_row);
267 assert.equal('b', h_series);
268 }
269
270 return g;
271};
272
273/**
274 * Test basic closest-point highlighting.
275 */
276it('testClosestPointCallback', function() {
277 runClosestTest(false, 1, 3);
278});
279
280/**
281 * Test setSelection() with series name
282 */
283it('testSetSelection', function() {
284 var g = runClosestTest(false, 1, 3);
285 assert.equal(1, g.attr_('strokeWidth', 'c'));
286 g.setSelection(false, 'c');
287 assert.equal(3, g.attr_('strokeWidth', 'c'));
288});
289
290/**
291 * Test closest-point highlighting for stacked graph
292 */
293it('testClosestPointStackedCallback', function() {
294 runClosestTest(true, 1, 3);
295});
296
297/**
298 * Closest-point highlighting with legend CSS - border around active series.
299 */
300it('testClosestPointCallbackCss1', function() {
301 var css = "div.dygraph-legend > span { display: block; }\n" +
302 "div.dygraph-legend > span.highlight { border: 1px solid grey; }\n";
303 styleSheet.innerHTML = css;
304 runClosestTest(false, 2, 4);
305 styleSheet.innerHTML = '';
306});
307
308/**
309 * Closest-point highlighting with legend CSS - show only closest series.
310 */
311it('testClosestPointCallbackCss2', function() {
312 var css = "div.dygraph-legend > span { display: none; }\n" +
313 "div.dygraph-legend > span.highlight { display: inline; }\n";
314 styleSheet.innerHTML = css;
315 runClosestTest(false, 10, 15);
316 styleSheet.innerHTML = '';
317 // TODO(klausw): verify that the highlighted line is drawn on top?
318});
319
320/**
321 * Closest-point highlighting with locked series.
322 */
323it('testSetSelectionLocking', function() {
324 var g = runClosestTest(false, 2, 4);
325
326 // Default behavior, 'b' is closest
327 DygraphOps.dispatchMouseMove(g, 11, 4);
328 assert.equal('b', g.getHighlightSeries());
329
330 // Now lock selection to 'c'
331 g.setSelection(false, 'c', true);
332 DygraphOps.dispatchMouseMove(g, 11, 4);
333 assert.equal('c', g.getHighlightSeries());
334
335 // Unlock, should be back to 'b'
336 g.clearSelection();
337 DygraphOps.dispatchMouseMove(g, 11, 4);
338 assert.equal('b', g.getHighlightSeries());
339});
340
341/**
342 * This tests that closest point searches work for data containing NaNs.
343 *
344 * It's intended to catch a regression where a NaN Y value confuses the
345 * closest-point algorithm, treating it as closer as any previous point.
346 */
347it('testNaNData', function() {
348 var dataNaN = [
349 [9, -1, NaN, NaN],
350 [10, -1, 1, 2],
351 [11, 0, 3, 1],
352 [12, 1, 4, NaN],
353 [13, 0, 2, 3],
354 [14, -1, 1, 4]];
355
356 var h_row;
357 var h_pts;
358
359 var highlightCallback = function(e, x, pts, row) {
360 assert.equal(g, this);
361 h_row = row;
362 h_pts = pts;
363 };
364
365 var g = new Dygraph(graph, dataNaN,
366 {
367 width: 600,
368 height: 400,
369 labels: ['x', 'a', 'b', 'c'],
370 visibility: [false, true, true],
371 highlightCallback: highlightCallback
372 });
373
374 DygraphOps.dispatchMouseMove(g, 10.1, 0.9);
375 //check correct row is returned
376 assert.equal(1, h_row);
377
378 // Explicitly test closest point algorithms
379 var dom = g.toDomCoords(10.1, 0.9);
380 assert.equal(1, g.findClosestRow(dom[0]));
381
382 var res = g.findClosestPoint(dom[0], dom[1]);
383 assert.equal(1, res.row);
384 assert.equal('b', res.seriesName);
385
386 res = g.findStackedPoint(dom[0], dom[1]);
387 assert.equal(1, res.row);
388 assert.equal('c', res.seriesName);
389});
390
391/**
392 * This tests that stacked point searches work for data containing NaNs.
393 */
394it('testNaNDataStack', function() {
395 var dataNaN = [
396 [9, -1, NaN, NaN],
397 [10, -1, 1, 2],
398 [11, 0, 3, 1],
399 [12, 1, NaN, 2],
400 [13, 0, 2, 3],
401 [14, -1, 1, 4],
402 [15, 0, 2, NaN],
403 [16, 1, 1, 3],
404 [17, 1, NaN, 3],
405 [18, 0, 2, 5],
406 [19, 0, 1, 4]];
407
408 var h_row;
409 var h_pts;
410
411 var highlightCallback = function(e, x, pts, row) {
412 assert.equal(g, this);
413 h_row = row;
414 h_pts = pts;
415 };
416
417 var g = new Dygraph(graph, dataNaN,
418 {
419 width: 600,
420 height: 400,
421 labels: ['x', 'a', 'b', 'c'],
422 visibility: [false, true, true],
423 stackedGraph: true,
424 highlightCallback: highlightCallback
425 });
426
427 DygraphOps.dispatchMouseMove(g, 10.1, 0.9);
428 //check correct row is returned
429 assert.equal(1, h_row);
430
431 // Explicitly test stacked point algorithm.
432 var dom = g.toDomCoords(10.1, 0.9);
433 var res = g.findStackedPoint(dom[0], dom[1]);
434 assert.equal(1, res.row);
435 assert.equal('c', res.seriesName);
436
437 // All-NaN area at left, should get no points.
438 dom = g.toDomCoords(9.1, 0.9);
439 res = g.findStackedPoint(dom[0], dom[1]);
440 assert.equal(0, res.row);
441 assert.equal(undefined, res.seriesName);
442
443 // First gap, get 'c' since it's non-NaN.
444 dom = g.toDomCoords(12.1, 0.9);
445 res = g.findStackedPoint(dom[0], dom[1]);
446 assert.equal(3, res.row);
447 assert.equal('c', res.seriesName);
448
449 // Second gap, get 'b' since 'c' is NaN.
450 dom = g.toDomCoords(15.1, 0.9);
451 res = g.findStackedPoint(dom[0], dom[1]);
452 assert.equal(6, res.row);
453 assert.equal('b', res.seriesName);
454
455 // Isolated points should work, finding series b in this case.
456 dom = g.toDomCoords(15.9, 3.1);
457 res = g.findStackedPoint(dom[0], dom[1]);
458 assert.equal(7, res.row);
459 assert.equal('b', res.seriesName);
460});
461
462it('testGapHighlight', function() {
463 var dataGap = [
464 [1, null, 3],
465 [2, 2, null],
466 [3, null, 5],
467 [4, 4, null],
468 [5, null, 7],
469 [6, NaN, null],
470 [8, 8, null],
471 [10, 10, null]];
472
473 var h_row;
474 var h_pts;
475
476 var highlightCallback = function(e, x, pts, row) {
477 assert.equal(g, this);
478 h_row = row;
479 h_pts = pts;
480 };
481
482 var g = new Dygraph(graph, dataGap, {
483 width: 400,
484 height: 300,
485 //stackedGraph: true,
486 connectSeparatedPoints: true,
487 drawPoints: true,
488 labels: ['x', 'A', 'B'],
489 highlightCallback: highlightCallback
490 });
491
492 DygraphOps.dispatchMouseMove(g, 1.1, 10);
493 //point from series B
494 assert.equal(0, h_row);
495 assert.equal(1, h_pts.length);
496 assert.equal(3, h_pts[0].yval);
497 assert.equal('B', h_pts[0].name);
498
499 DygraphOps.dispatchMouseMove(g, 6.1, 10);
500 // A is NaN at x=6
501 assert.equal(1, h_pts.length);
502 assert(isNaN(h_pts[0].yval));
503 assert.equal('A', h_pts[0].name);
504
505 DygraphOps.dispatchMouseMove(g, 8.1, 10);
506 //point from series A
507 assert.equal(6, h_row);
508 assert.equal(1, h_pts.length);
509 assert.equal(8, h_pts[0].yval);
510 assert.equal('A', h_pts[0].name);
511});
512
513it('testFailedResponse', function() {
514
515 // Fake out the XMLHttpRequest so it doesn't do anything.
516 XMLHttpRequest = function () {};
517 XMLHttpRequest.prototype.open = function () {};
518 XMLHttpRequest.prototype.send = function () {};
519
520 var highlightCallback = function(e, x, pts, row) {
521 throw "should not reach here";
522 };
523
524 graph.style.border = "2px solid black";
525 var g = new Dygraph(graph, "data.csv", { // fake name
526 width: 400,
527 height: 300,
528 highlightCallback : highlightCallback
529 });
530
531 DygraphOps.dispatchMouseOver_Point(g, 800, 800);
532 DygraphOps.dispatchMouseMove_Point(g, 100, 100);
533 DygraphOps.dispatchMouseMove_Point(g, 800, 800);
534
535 var oldOnerror = window.onerror;
536 var failed = false;
537 window.onerror = function() { failed = true; return false; }
538
539 DygraphOps.dispatchMouseOut_Point(g, 800, 800); // This call should not throw an exception.
540
541 assert.isFalse(failed, "exception thrown during mouseout");
542});
543
544
545// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=355
546it('testHighlightCallbackRow', function() {
547 var highlightRow;
548 var highlightCallback = function(e, x, pts, row) {
549 assert.equal(g, this);
550 highlightRow = row;
551 };
552
553 var g = new Dygraph(graph,
554 "X,Y,Z\n" +
555 "0,1,2\n" + // 0
556 "1,2,3\n" + // 100
557 "2,3,4\n" + // 200
558 "3,4,5\n" + // 300
559 "4,5,6\n", // 400
560 { // fake name
561 width: 400,
562 height: 300,
563 highlightCallback : highlightCallback
564 });
565
566 // Mouse over each of the points
567 DygraphOps.dispatchMouseOver_Point(g, 0, 0);
568 DygraphOps.dispatchMouseMove_Point(g, 0, 0);
569 assert.equal(0, highlightRow);
570 DygraphOps.dispatchMouseMove_Point(g, 100, 0);
571 assert.equal(1, highlightRow);
572 DygraphOps.dispatchMouseMove_Point(g, 200, 0);
573 assert.equal(2, highlightRow);
574 DygraphOps.dispatchMouseMove_Point(g, 300, 0);
575 assert.equal(3, highlightRow);
576 DygraphOps.dispatchMouseMove_Point(g, 400, 0);
577 assert.equal(4, highlightRow);
578
579 // Now zoom and verify that the row numbers still refer to rows in the data
580 // array.
581 g.updateOptions({dateWindow: [2, 4]});
582 DygraphOps.dispatchMouseOver_Point(g, 0, 0);
583 DygraphOps.dispatchMouseMove_Point(g, 0, 0);
584 assert.equal(2, highlightRow);
585 assert.equal('2: Y: 3 Z: 4', Util.getLegend());
586});
587
588/**
589 * Test that underlay callback is called even when there are no series,
590 * and that the y axis ranges are not NaN.
591 */
592it('testUnderlayCallback_noSeries', function() {
593 var called = false;
594 var yMin, yMax;
595
596 var callback = function(canvas, area, g) {
597 assert.equal(g, this);
598 called = true;
599 yMin = g.yAxisRange(0)[0];
600 yMax = g.yAxisRange(0)[1];
601 };
602
603 var g = new Dygraph(graph, "\n", {
604 underlayCallback: callback
605 });
606
607 assert.isTrue(called);
608 assert.isFalse(isNaN(yMin));
609 assert.isFalse(isNaN(yMax));
610});
611
612/**
613 * Test that underlay callback receives the correct y-axis range.
614 */
615it('testUnderlayCallback_yAxisRange', function() {
616 var called = false;
617 var yMin, yMax;
618
619 var callback = function(canvas, area, g) {
620 assert.equal(g, this);
621 yMin = g.yAxisRange(0)[0];
622 yMax = g.yAxisRange(0)[1];
623 };
624
625 var g = new Dygraph(graph, "\n", {
626 valueRange: [0,10],
627 underlayCallback: callback
628 });
629
630 assert.equal(0, yMin);
631 assert.equal(10, yMax);
632});
633
634/**
635 * Test that drawPointCallback is called for isolated points and correct idx for the point is returned.
636 */
637it('testDrawPointCallback_idx', function() {
638 var indices = [];
639
640 var g;
641 var callback = function(g, seriesName, canvasContext, cx, cy, color, pointSizeParam,idx) {
642 assert.equal(g, this);
643 indices.push(idx);
644 utils.Circles.DEFAULT.apply(this, arguments);
645 };
646
647
648 var testdata = [[10, 2], [11, 3], [12, NaN], [13, 2], [14, NaN], [15, 3]];
649 var graphOpts = {
650 labels: ['X', 'Y'],
651 valueRange: [0, 4],
652 drawPoints : false,
653 drawPointCallback : callback,
654 pointSize : 8
655 };
656
657 // Test that correct idx for isolated points are passed to the callback.
658 g = new Dygraph(graph, testdata, graphOpts);
659 assert.equal(2, indices.length);
660 assert.deepEqual([3, 5],indices);
661
662 // Test that correct indices for isolated points + gap points are passed to the callback when
663 // drawGapEdgePoints is set. This should add one point at the right
664 // edge of the segment at x=11, but not at the graph edge at x=10.
665 indices = []; // Reset for new test
666 graphOpts.drawGapEdgePoints = true;
667 g = new Dygraph(graph, testdata, graphOpts);
668 assert.equal(3, indices.length);
669 assert.deepEqual([1, 3, 5],indices);
670
671
672 //Test that correct indices are passed to the callback when zoomed in.
673 indices = []; // Reset for new test
674 graphOpts.dateWindow = [12.5,13.5]
675 graphOpts.drawPoints = true;
676 testdata = [[10, 2], [11, 3], [12, 4], [13, 2], [14, 5], [15, 3]];
677 g = new Dygraph(graph, testdata, graphOpts);
678 assert.equal(3, indices.length);
679 assert.deepEqual([2, 3, 4],indices);
680});
681
682/**
683 * Test that the correct idx is returned for the point in the onHiglightCallback.
684 */
685it('testDrawHighlightPointCallback_idx', function() {
686 var idxToCheck = null;
687
688 var drawHighlightPointCallback = function(g, seriesName, canvasContext, cx, cy, color, pointSizeParam,idx) {
689 assert.equal(g, this);
690 idxToCheck = idx;
691 };
692 var testdata = [[1, 2], [2, 3], [3, NaN], [4, 2], [5, NaN], [6, 3]];
693 var g = new Dygraph(graph, testdata, {
694 drawHighlightPointCallback: drawHighlightPointCallback,
695 labels: ['X', 'Y']
696 });
697
698 assert.isNull(idxToCheck);
699 DygraphOps.dispatchMouseMove(g, 3, 0);
700 // check that NaN point is not highlighted
701 assert.isNull(idxToCheck);
702 DygraphOps.dispatchMouseMove(g, 1, 2);
703 // check that correct index is returned
704 assert.equal(0,idxToCheck);
705 DygraphOps.dispatchMouseMove(g, 6, 3);
706 assert.equal(5,idxToCheck);
707});
708
709/**
710 * Test that drawCallback is called with the correct value for `this`.
711 */
712it('should set this in drawCallback', function() {
713 var g = new Dygraph('graph', data, {
714 drawCallback: function(g, is_initial) {
715 assert.isTrue(is_initial);
716 assert.equal(g, this);
717 }
718 });
719});
720
721});