auto_tests/tests/range_selector.js

   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,
  20     showRangeSelector: true,
  21     labels: ['X', 'Y']
  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,
  44     showRangeSelector: true,
  45     labels: ['X', 'Y']
  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,
  68     showRangeSelector: true,
  69     labels: ['X', 'Y']
  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,
  92     showRangeSelector: true,
  93     labels: ['X', 'Y']
  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',
 118     rangeSelectorPlotStyleColor: 'yellow',
 119     labels: ['X', 'Y']
 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
 137 RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
 138   var opts = {
 139     width: 480,
 140     height: 320,
 141     labels: ['X', 'Y']
 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,
 166     animatedZooms: true,
 167     labels: ['X', 'Y']
 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,
 190     animatedZooms: true,
 191     labels: ['X', 'Y']
 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
 211 RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() {
 212   var opts = {
 213     width: 480,
 214     height: 320,
 215     showRangeSelector: true,
 216     labels: ['X', 'Y']
 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
 330
 331 RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
 332   var opts = {
 333     width: 480,
 334     height: 100,
 335     xAxisHeight: 30,
 336     drawXAxis: false,
 337     showRangeSelector: true,
 338     rangeSelectorHeight: 30,
 339     labels: ['X', 'Y']
 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
 349   // xAxis shouldn't be reserved since it isn't drawn.
 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
 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) {
 362     console.log(canvas.className);
 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.
 389   assertNotNull(miniHtx);
 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 selection of a specific series to average for the mini plot.
 455 RangeSelectorTestCase.prototype.testSelectedCombinedSeries = function() {
 456   var opts = {
 457     showRangeSelector: true,
 458     rangeSelectorCombinedSeries: [1, 3], // first and third series averaged, second skipped
 459     labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4']
 460   };
 461   var data = [
 462       [0, 5, 8, 13, 21],  // average (first and third) = 9
 463       [5, 1, 3, 7, 14],   // average (first and third) = 4
 464       [10, 0, 19, 10, 6]  // average (first and third) = 5
 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: 4 - 5 * 0.25,  // 25% padding on combined series range.
 475     yMax: 9 + 5 * 0.25,
 476     data: [
 477       [0, 9],
 478       [5, 4],
 479       [10, 5]
 480     ]
 481   }, combinedSeries);
 482 };
 483
 484 // Tests data computation for the mini plot with a single error bar series.
 485 RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() {
 486   var opts = {
 487     customBars: true,
 488     showRangeSelector: true,
 489     labels: ['X', 'Y1']
 490   };
 491   var data = [
 492       [0, [0, 1, 2]],  // [low, value, high]
 493       [5, [1, 4, 5]],
 494       [10, [7, 8, 9]]
 495     ];
 496   var graph = document.getElementById("graph");
 497   var g = new Dygraph(graph, data, opts);
 498
 499   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 500   assertNotNull(rangeSelector);
 501
 502   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 503   assertEquals({
 504     yMin: 1 - 7 * 0.25,  // 25% padding
 505     yMax: 8 + 7 * 0.25,
 506     data: [
 507       [0, 1],
 508       [5, 4],
 509       [10, 8]
 510     ]
 511   }, combinedSeries);
 512 };
 513
 514 RangeSelectorTestCase.prototype.testSingleCombinedSeriesErrorBars = function() {
 515   var opts = {
 516     errorBars: true,
 517     showRangeSelector: true,
 518     labels: ['X', 'Y1']
 519   };
 520   var data = [
 521       [0, [1, 1]],  // [value, standard deviation]
 522       [5, [4, 2]],
 523       [10, [8, 1]]
 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: 1 - 7 * 0.25,  // 25% padding
 534     yMax: 8 + 7 * 0.25,
 535     data: [
 536       [0, 1],
 537       [5, 4],
 538       [10, 8]
 539     ]
 540   }, combinedSeries);
 541 };
 542
 543 // Tests data computation for the mini plot with two custom bar series.
 544 RangeSelectorTestCase.prototype.testTwoCombinedSeriesCustomBars = function() {
 545   var opts = {
 546     customBars: true,
 547     showRangeSelector: true,
 548     labels: ['X', 'Y1', 'Y2']
 549   };
 550   var data = [
 551       [0, [0, 1, 2], [4, 5, 6]],  // [low, value, high], avg_val = 3
 552       [5, [1, 4, 5], [5, 8, 9]],  // avg_val = 6
 553       [10, [7, 8, 9], [11, 12, 13]]  // avg_val = 10
 554     ];
 555   var graph = document.getElementById("graph");
 556   var g = new Dygraph(graph, data, opts);
 557
 558   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 559   assertNotNull(rangeSelector);
 560
 561   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 562   assertEquals({
 563     yMin: 3 - 7 * 0.25,  // 25% padding
 564     yMax: 10 + 7 * 0.25,
 565     data: [
 566       [0, 3],
 567       [5, 6],
 568       [10, 10]
 569     ]
 570   }, combinedSeries);
 571 };
 572
 573
 574 RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
 575   assertNotNull(g);
 576   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
 577   assertEquals(2, zoomhandles.length);
 578   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
 579   assertEquals(1, bgcanvas.length);
 580   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
 581   assertEquals(1, fgcanvas.length);
 582 }