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 describe("range-selector", function() {
   8
   9 beforeEach(function() {
  10   document.body.innerHTML = "<div id='graph'></div>";
  11 });
  12
  13 afterEach(function() {
  14 });
  15
  16 it('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   assertGraphExistence(g, graph);
  37 });
  38
  39 it('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   assertGraphExistence(g, graph);
  61 });
  62
  63 it('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   assertGraphExistence(g, graph);
  85 });
  86
  87 it('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   assertGraphExistence(g, graph);
 109 });
 110
 111 it('testRangeSelectorOptions', function() {
 112   var opts = {
 113     width: 480,
 114     height: 320,
 115     showRangeSelector: true,
 116     rangeSelectorHeight: 30,
 117     rangeSelectorPlotFillColor: 'lightyellow',
 118     rangeSelectorPlotFillGradientColor: 'rgba(200, 200, 42, 10)',
 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   assertGraphExistence(g, graph);
 135 });
 136
 137 it('testAdditionalRangeSelectorOptions', function() {
 138   var opts = {
 139     width: 480,
 140     height: 320,
 141     showRangeSelector: true,
 142     rangeSelectorHeight: 30,
 143     rangeSelectorBackgroundStrokeColor: 'blue',
 144     rangeSelectorBackgroundLineWidth: 3,
 145     rangeSelectorPlotLineWidth: 0.5,
 146     rangeSelectorForegroundStrokeColor: 'red',
 147     rangeSelectorForegroundLineWidth: 2,
 148     rangeSelectorAlpha: 0.8,
 149     labels: ['X', 'Y']
 150   };
 151   var data = [
 152                [1, 10],
 153                [2, 15],
 154                [3, 10],
 155                [4, 15],
 156                [5, 10],
 157                [6, 15],
 158                [7, 10],
 159                [8, 15],
 160                [9, 10]
 161              ];
 162   var graph = document.getElementById("graph");
 163   var g = new Dygraph(graph, data, opts);
 164   assertGraphExistence(g, graph);
 165 });
 166
 167 it('testRangeSelectorEnablingAfterCreation', function() {
 168   var opts = {
 169     width: 480,
 170     height: 320,
 171     labels: ['X', 'Y']
 172   };
 173   var data = [
 174                [1, 10],
 175                [2, 15],
 176                [3, 10],
 177                [4, 15],
 178                [5, 10],
 179                [6, 15],
 180                [7, 10],
 181                [8, 15],
 182                [9, 10]
 183              ];
 184   var graph = document.getElementById("graph");
 185   var g = new Dygraph(graph, data, opts);
 186   var initialChartHeight = g.getArea().h;
 187   g.updateOptions({showRangeSelector: true});
 188   assertGraphExistence(g, graph);
 189   assert(g.getArea().h < initialChartHeight);  // range selector shown
 190
 191   g.updateOptions({showRangeSelector: false});
 192   assert.equal(g.getArea().h, initialChartHeight);  // range selector hidden
 193 });
 194
 195 // The animatedZooms option does not work with the range selector. Make sure it gets turned off.
 196 it('testRangeSelectorWithAnimatedZoomsOption', function() {
 197   var opts = {
 198     width: 480,
 199     height: 320,
 200     showRangeSelector: true,
 201     animatedZooms: true,
 202     labels: ['X', 'Y']
 203   };
 204   var data = [
 205                [1, 10],
 206                [2, 15],
 207                [3, 10],
 208                [4, 15],
 209                [5, 10],
 210                [6, 15],
 211                [7, 10],
 212                [8, 15],
 213                [9, 10]
 214              ];
 215   var graph = document.getElementById("graph");
 216   var g = new Dygraph(graph, data, opts);
 217   assertGraphExistence(g, graph);
 218   assert.isFalse(g.getOption('animatedZooms'));
 219 });
 220
 221 it('testRangeSelectorWithAnimatedZoomsOption2', function() {
 222   var opts = {
 223     width: 480,
 224     height: 320,
 225     animatedZooms: true,
 226     labels: ['X', 'Y']
 227   };
 228   var data = [
 229                [1, 10],
 230                [2, 15],
 231                [3, 10],
 232                [4, 15],
 233                [5, 10],
 234                [6, 15],
 235                [7, 10],
 236                [8, 15],
 237                [9, 10]
 238              ];
 239   var graph = document.getElementById("graph");
 240   var g = new Dygraph(graph, data, opts);
 241   g.updateOptions({showRangeSelector: true});
 242   assertGraphExistence(g, graph);
 243   assert.isFalse(g.getOption('animatedZooms'));
 244 });
 245
 246 it('testRangeSelectorInteraction', function() {
 247   var opts = {
 248     width: 480,
 249     height: 320,
 250     showRangeSelector: true,
 251     labels: ['X', 'Y']
 252   };
 253   var data = [
 254                [1, 10],
 255                [2, 15],
 256                [3, 10],
 257                [4, 15],
 258                [5, 10],
 259                [6, 15],
 260                [7, 10],
 261                [8, 15],
 262                [9, 10]
 263              ];
 264   var graph = document.getElementById("graph");
 265   var g = new Dygraph(graph, data, opts);
 266   assertGraphExistence(g, graph);
 267   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
 268
 269   // Move left zoomhandle in
 270   var xRange = g.xAxisRange().slice();
 271
 272   var mouseDownEvent = DygraphOps.createEvent({
 273     type : 'dragstart',
 274     detail: 1,
 275     clientX : 0,
 276     clientY : 0
 277   });
 278   zoomhandles[0].dispatchEvent(mouseDownEvent);
 279
 280   var mouseMoveEvent = DygraphOps.createEvent({
 281     type : 'mousemove',
 282     clientX : 20,
 283     clientY : 20
 284   });
 285   zoomhandles[0].dispatchEvent(mouseMoveEvent);
 286
 287   var mouseUpEvent = DygraphOps.createEvent({
 288     type : 'mouseup',
 289     detail: 1,
 290     clientX : 20,
 291     clientY : 20
 292   });
 293   zoomhandles[0].dispatchEvent(mouseUpEvent);
 294
 295   var newXRange = g.xAxisRange().slice();
 296   assert(newXRange[0] > xRange[0], 'left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0]);
 297   assert.equal(xRange[1], newXRange[1], 'right zoomhandle should not have moved');
 298
 299   // Move right zoomhandle in
 300   xRange = newXRange;
 301
 302   mouseDownEvent = DygraphOps.createEvent({
 303     type : 'dragstart',
 304     detail: 1,
 305     clientX : 100,
 306     clientY : 100
 307   });
 308   zoomhandles[1].dispatchEvent(mouseDownEvent);
 309
 310   mouseMoveEvent = DygraphOps.createEvent({
 311     type : 'mousemove',
 312     clientX : 80,
 313     clientY : 80
 314   });
 315   zoomhandles[1].dispatchEvent(mouseMoveEvent);
 316
 317   mouseUpEvent = DygraphOps.createEvent({
 318     type : 'mouseup',
 319     detail: 1,
 320     clientX : 80,
 321     clientY : 80
 322   });
 323   zoomhandles[1].dispatchEvent(mouseUpEvent);
 324
 325   var newXRange = g.xAxisRange().slice();
 326   assert(newXRange[1] < xRange[1], 'right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1]);
 327   assert.equal(xRange[0], newXRange[0], 'left zoomhandle should not have moved');
 328
 329   // Pan left
 330   xRange = newXRange;
 331   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
 332   var x = parseInt(zoomhandles[0].style.left) + 20;
 333   var y = parseInt(zoomhandles[0].style.top);
 334
 335   mouseDownEvent = DygraphOps.createEvent({
 336     type : 'mousedown',
 337     detail: 1,
 338     clientX : x,
 339     clientY : y
 340   });
 341   fgcanvas.dispatchEvent(mouseDownEvent);
 342
 343   x -= 10;
 344
 345   mouseMoveEvent = DygraphOps.createEvent({
 346     type : 'mousemove',
 347     clientX : x,
 348     clientY : y
 349   });
 350   fgcanvas.dispatchEvent(mouseMoveEvent);
 351
 352   mouseUpEvent = DygraphOps.createEvent({
 353     type : 'mouseup',
 354     detail: 1,
 355     clientX : x,
 356     clientY : y
 357   });
 358   fgcanvas.dispatchEvent(mouseUpEvent);
 359
 360   var newXRange = g.xAxisRange().slice();
 361   assert(newXRange[0] < xRange[0], newXRange[0]+'<'+xRange[0]);
 362   assert(newXRange[1] < xRange[1], newXRange[1]+'<'+xRange[1]);
 363 });
 364
 365
 366 it('testRangeSelectorPositionIfXAxisNotDrawn', function() {
 367   var opts = {
 368     width: 480,
 369     height: 100,
 370     xAxisHeight: 30,
 371     axes : { x : { drawAxis: false }},
 372     showRangeSelector: true,
 373     rangeSelectorHeight: 30,
 374     labels: ['X', 'Y']
 375   };
 376   var data = [
 377                [0, 1],
 378                [10, 1]
 379              ];
 380   var graph = document.getElementById("graph");
 381   var g = new Dygraph(graph, data, opts);
 382
 383   //assert, that the range selector is at top position 70 since the 30px of the
 384   // xAxis shouldn't be reserved since it isn't drawn.
 385   assertGraphExistence(g, graph);
 386   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
 387   assert.equal("70px", bgcanvas.style.top, "Range selector is not at the expected position.");
 388   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
 389   assert.equal("70px", fgcanvas.style.top, "Range selector is not at the expected position.");
 390 });
 391
 392 it('testMiniPlotDrawn', function() {
 393   // Install Proxy to track canvas calls.
 394   var origFunc = Dygraph.getContext;
 395   var miniHtx;
 396   Dygraph.getContext = function(canvas) {
 397     if (canvas.className != 'dygraph-rangesel-bgcanvas') {
 398       return origFunc(canvas);
 399     }
 400     miniHtx = new Proxy(origFunc(canvas));
 401     return miniHtx;
 402   };
 403
 404   var opts = {
 405     width: 480,
 406     height: 100,
 407     xAxisHeight: 30,
 408     axes : { x : { drawAxis: false }},
 409     showRangeSelector: true,
 410     rangeSelectorHeight: 30,
 411     rangeSelectorPlotStrokeColor: '#ff0000',
 412     labels: ['X', 'Y']
 413   };
 414   var data = [
 415       [0, 1],
 416       [5, 4],
 417       [10, 8]
 418     ];
 419   var graph = document.getElementById("graph");
 420   var g = new Dygraph(graph, data, opts);
 421
 422   // TODO(danvk): more precise tests.
 423   assert.isNotNull(miniHtx);
 424   assert.isTrue(0 < CanvasAssertions.numLinesDrawn(miniHtx, '#ff0000'));
 425
 426   Dygraph.getContext = origFunc;
 427 });
 428
 429 // Tests data computation for the mini plot with a single series.
 430 it('testSingleCombinedSeries', function() {
 431   var opts = {
 432     showRangeSelector: true,
 433     labels: ['X', 'Y1']
 434   };
 435   var data = [
 436       [0, 1],
 437       [5, 4],
 438       [10, 8]
 439     ];
 440   var graph = document.getElementById("graph");
 441   var g = new Dygraph(graph, data, opts);
 442
 443   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 444   assert.isNotNull(rangeSelector);
 445
 446   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 447   assert.deepEqual({
 448     yMin: 1 - 7 * 0.25,  // 25% padding
 449     yMax: 8 + 7 * 0.25,
 450     data: [
 451       [0, 1],
 452       [5, 4],
 453       [10, 8]
 454     ]
 455   }, combinedSeries);
 456 });
 457
 458
 459 // Tests that multiple series are averaged for the miniplot.
 460 it('testCombinedSeries', function() {
 461   var opts = {
 462     showRangeSelector: true,
 463     labels: ['X', 'Y1', 'Y2']
 464   };
 465   var data = [
 466       [0, 1, 3],  // average = 2
 467       [5, 4, 6],  // average = 5
 468       [10, 7, 9]  // average = 8
 469     ];
 470   var graph = document.getElementById("graph");
 471   var g = new Dygraph(graph, data, opts);
 472
 473   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 474   assert.isNotNull(rangeSelector);
 475
 476   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 477   assert.deepEqual({
 478     yMin: 2 - 6 * 0.25,  // 25% padding on combined series range.
 479     yMax: 8 + 6 * 0.25,
 480     data: [
 481       [0, 2],
 482       [5, 5],
 483       [10, 8]
 484     ]
 485   }, combinedSeries);
 486 });
 487
 488 // Tests selection of a specific series to average for the mini plot.
 489 it('testSelectedCombinedSeries', function() {
 490   var opts = {
 491     showRangeSelector: true,
 492     labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4'],
 493     series: {
 494       'Y1': { showInRangeSelector: true },
 495       'Y3': { showInRangeSelector: true }
 496     }
 497   };
 498   var data = [
 499       [0, 5, 8, 13, 21],  // average (first and third) = 9
 500       [5, 1, 3, 7, 14],   // average (first and third) = 4
 501       [10, 0, 19, 10, 6]  // average (first and third) = 5
 502     ];
 503   var graph = document.getElementById("graph");
 504   var g = new Dygraph(graph, data, opts);
 505
 506   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 507   assert.isNotNull(rangeSelector);
 508
 509   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 510   assert.deepEqual({
 511     yMin: 4 - 5 * 0.25,  // 25% padding on combined series range.
 512     yMax: 9 + 5 * 0.25,
 513     data: [
 514       [0, 9],
 515       [5, 4],
 516       [10, 5]
 517     ]
 518   }, combinedSeries);
 519 });
 520
 521 // Tests data computation for the mini plot with a single error bar series.
 522 it('testSingleCombinedSeriesCustomBars', function() {
 523   var opts = {
 524     customBars: true,
 525     showRangeSelector: true,
 526     labels: ['X', 'Y1']
 527   };
 528   var data = [
 529       [0, [0, 1, 2]],  // [low, value, high]
 530       [5, [1, 4, 5]],
 531       [10, [7, 8, 9]]
 532     ];
 533   var graph = document.getElementById("graph");
 534   var g = new Dygraph(graph, data, opts);
 535
 536   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 537   assert.isNotNull(rangeSelector);
 538
 539   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 540   assert.deepEqual({
 541     yMin: 1 - 7 * 0.25,  // 25% padding
 542     yMax: 8 + 7 * 0.25,
 543     data: [
 544       [0, 1],
 545       [5, 4],
 546       [10, 8]
 547     ]
 548   }, combinedSeries);
 549 });
 550
 551 it('testSingleCombinedSeriesErrorBars', function() {
 552   var opts = {
 553     errorBars: true,
 554     showRangeSelector: true,
 555     labels: ['X', 'Y1']
 556   };
 557   var data = [
 558       [0, [1, 1]],  // [value, standard deviation]
 559       [5, [4, 2]],
 560       [10, [8, 1]]
 561     ];
 562   var graph = document.getElementById("graph");
 563   var g = new Dygraph(graph, data, opts);
 564
 565   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 566   assert.isNotNull(rangeSelector);
 567
 568   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 569   assert.deepEqual({
 570     yMin: 1 - 7 * 0.25,  // 25% padding
 571     yMax: 8 + 7 * 0.25,
 572     data: [
 573       [0, 1],
 574       [5, 4],
 575       [10, 8]
 576     ]
 577   }, combinedSeries);
 578 });
 579
 580 // Tests data computation for the mini plot with two custom bar series.
 581 it('testTwoCombinedSeriesCustomBars', function() {
 582   var opts = {
 583     customBars: true,
 584     showRangeSelector: true,
 585     labels: ['X', 'Y1', 'Y2']
 586   };
 587   var data = [
 588       [0, [0, 1, 2], [4, 5, 6]],  // [low, value, high], avg_val = 3
 589       [5, [1, 4, 5], [5, 8, 9]],  // avg_val = 6
 590       [10, [7, 8, 9], [11, 12, 13]]  // avg_val = 10
 591     ];
 592   var graph = document.getElementById("graph");
 593   var g = new Dygraph(graph, data, opts);
 594
 595   var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
 596   assert.isNotNull(rangeSelector);
 597
 598   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
 599   assert.deepEqual({
 600     yMin: 3 - 7 * 0.25,  // 25% padding
 601     yMax: 10 + 7 * 0.25,
 602     data: [
 603       [0, 3],
 604       [5, 6],
 605       [10, 10]
 606     ]
 607   }, combinedSeries);
 608 });
 609
 610
 611 var assertGraphExistence = function(g, graph) {
 612   assert.isNotNull(g);
 613   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
 614   assert.equal(2, zoomhandles.length);
 615   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
 616   assert.equal(1, bgcanvas.length);
 617   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
 618   assert.equal(1, fgcanvas.length);
 619 };
 620
 621 });