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