auto_tests/tests/range_tests.js

   1 // Copyright (c) 2011 Google, Inc.
   2 //
   3 // Permission is hereby granted, free of charge, to any person obtaining a copy
   4 // of this software and associated documentation files (the "Software"), to deal
   5 // in the Software without restriction, including without limitation the rights
   6 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   7 // copies of the Software, and to permit persons to whom the Software is
   8 // furnished to do so, subject to the following conditions:
   9 //
  10 // The above copyright notice and this permission notice shall be included in
  11 // all copies or substantial portions of the Software.
  12 //
  13 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  19 // THE SOFTWARE.
  20
  21
  22 /**
  23  * @fileoverview Test valueRange and dateWindow changes.
  24  *
  25  * @author konigsberg@google.com (Robert Konigsberg)
  26  */
  27 var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]];
  28 var ZERO_TO_FIFTY_STEPS = function() {
  29   var a = [];
  30   var x = 10;
  31   var y = 0;
  32   var step = 0;
  33   for (step = 0; step <= 50; step++) {
  34     a.push([x + (step * .2), y + step]);
  35   }
  36   return a;
  37 } ();
  38 var FIVE_TO_ONE_THOUSAND = [
  39     [ 1, 10 ], [ 2, 20 ], [ 3, 30 ], [ 4, 40 ] , [ 5, 50 ],
  40     [ 6, 60 ], [ 7, 70 ], [ 8, 80 ], [ 9, 90 ] , [ 10, 1000 ]];
  41
  42 var RangeTestCase = TestCase("range-tests");
  43
  44 RangeTestCase.prototype.setUp = function() {
  45   document.body.innerHTML = "<div id='graph'></div>";
  46 };
  47
  48 RangeTestCase.prototype.createGraph = function(opts, data, expectRangeX, expectRangeY) {
  49   if (data === undefined) data = ZERO_TO_FIFTY_STEPS;
  50   if (expectRangeX === undefined) expectRangeX = [10, 20];
  51   if (expectRangeY === undefined) expectRangeY = [0, 55];
  52   var graph = document.getElementById("graph");
  53   var g = new Dygraph(graph, data, opts);
  54
  55   assertEqualsDelta(expectRangeX, g.xAxisRange(), 0.01);
  56   assertEqualsDelta(expectRangeY, g.yAxisRange(0), 0.01);
  57
  58   return g;
  59 };
  60
  61 /**
  62  * Test that changes to valueRange and dateWindow are reflected
  63  * appropriately.
  64  */
  65 RangeTestCase.prototype.testRangeSetOperations = function() {
  66   var g = this.createGraph({valueRange : [ 0, 55 ]});
  67
  68   g.updateOptions({ dateWindow : [ 12, 18 ] });
  69   assertEquals([12, 18], g.xAxisRange());
  70   assertEquals([0, 55], g.yAxisRange(0));
  71
  72   g.updateOptions({ valueRange : [ 10, 40 ] });
  73   assertEquals([12, 18], g.xAxisRange());
  74   assertEquals([10, 40], g.yAxisRange(0));
  75
  76   g.updateOptions({ valueRange: [10, NaN] });
  77   assertEquals([12, 18], g.xAxisRange());
  78   assertEquals([10, 44.2], g.yAxisRange(0));
  79
  80   g.updateOptions({ valueRange: [10, 40] });
  81   assertEquals([12, 18], g.xAxisRange());
  82   assertEquals([10, 40], g.yAxisRange(0));
  83
  84   g.updateOptions({ valueRange: [10, null] });
  85   assertEquals([12, 18], g.xAxisRange());
  86   assertEquals([10, 44.2], g.yAxisRange(0));
  87
  88   g.updateOptions({ valueRange: [10, 40] });
  89   assertEquals([12, 18], g.xAxisRange());
  90   assertEquals([10, 40], g.yAxisRange(0));
  91
  92   g.updateOptions({ valueRange: [10, undefined] });
  93   assertEquals([12, 18], g.xAxisRange());
  94   assertEquals([10, 44.2], g.yAxisRange(0));
  95
  96   g.updateOptions({ valueRange: [10, 40] });
  97   assertEquals([12, 18], g.xAxisRange());
  98   assertEquals([10, 40], g.yAxisRange(0));
  99
 100   g.updateOptions({  });
 101   assertEquals([12, 18], g.xAxisRange());
 102   assertEquals([10, 40], g.yAxisRange(0));
 103
 104   g.updateOptions({valueRange : null, axes: {y:{valueRange : [15, 20]}}});
 105   assertEquals([12, 18], g.xAxisRange());
 106   assertEquals([15, 20], g.yAxisRange(0));
 107
 108   g.updateOptions({ dateWindow : null, valueRange : null, axes: null });
 109   assertEquals([10, 20], g.xAxisRange());
 110   assertEquals([0, 55], g.yAxisRange(0));
 111 };
 112
 113 /**
 114  * Verify that when zoomed in by mouse operations, an empty call to
 115  * updateOptions doesn't change the displayed ranges.
 116  */
 117 RangeTestCase.prototype.zoom = function(g, xRange, yRange) {
 118   var originalXRange = g.xAxisRange();
 119   var originalYRange = g.yAxisRange(0);
 120
 121   DygraphOps.dispatchMouseDown(g, xRange[0], yRange[0]);
 122   DygraphOps.dispatchMouseMove(g, xRange[1], yRange[0]); // this is really necessary.
 123   DygraphOps.dispatchMouseUp(g, xRange[1], yRange[0]);
 124
 125   assertEqualsDelta(xRange, g.xAxisRange(), 0.2);
 126   // assertEqualsDelta(originalYRange, g.yAxisRange(0), 0.2); // Not true, it's something in the middle.
 127
 128   var midX = (xRange[1] - xRange[0]) / 2;
 129   DygraphOps.dispatchMouseDown(g, midX, yRange[0]);
 130   DygraphOps.dispatchMouseMove(g, midX, yRange[1]); // this is really necessary.
 131   DygraphOps.dispatchMouseUp(g, midX, yRange[1]);
 132
 133   assertEqualsDelta(xRange, g.xAxisRange(), 0.2);
 134   assertEqualsDelta(yRange, g.yAxisRange(0), 0.2);
 135 }
 136
 137
 138 /**
 139  * Verify that when zoomed in by mouse operations, an empty call to
 140  * updateOptions doesn't change the displayed ranges.
 141  */
 142 RangeTestCase.prototype.testEmptyUpdateOptions_doesntUnzoom = function() {
 143   var g = this.createGraph();
 144   this.zoom(g, [ 11, 18 ], [ 35, 40 ]);
 145
 146   assertEqualsDelta([11, 18], g.xAxisRange(), 0.1);
 147   assertEqualsDelta([35, 40], g.yAxisRange(0), 0.2);
 148
 149   g.updateOptions({});
 150
 151   assertEqualsDelta([11, 18], g.xAxisRange(), 0.1);
 152   assertEqualsDelta([35, 40], g.yAxisRange(0), 0.2);
 153 }
 154
 155 /**
 156  * Verify that when zoomed in by mouse operations, a call to
 157  * updateOptions({ dateWindow : null, valueRange : null }) fully
 158  * unzooms.
 159  */
 160 RangeTestCase.prototype.testRestoreOriginalRanges_viaUpdateOptions = function() {
 161   var g = this.createGraph();
 162   this.zoom(g, [ 11, 18 ], [ 35, 40 ]);
 163
 164   g.updateOptions({ dateWindow : null, valueRange : null });
 165
 166   assertEquals([0, 55], g.yAxisRange(0));
 167   assertEquals([10, 20], g.xAxisRange());
 168 }
 169
 170 /**
 171  * Verify that log scale axis range is properly specified.
 172  */
 173 RangeTestCase.prototype.testLogScaleExcludesZero = function() {
 174   var g = new Dygraph("graph", FIVE_TO_ONE_THOUSAND, { logscale : true });
 175   assertEquals([10, 1099], g.yAxisRange(0));
 176
 177   g.updateOptions({ logscale : false });
 178   assertEquals([0, 1099], g.yAxisRange(0));
 179 }
 180
 181 /**
 182  * Verify that includeZero range is properly specified.
 183  */
 184 RangeTestCase.prototype.testIncludeZeroIncludesZero = function() {
 185   var g = new Dygraph("graph", [[0, 500], [500, 1000]], { includeZero : true });
 186   assertEquals([0, 1100], g.yAxisRange(0));
 187
 188   g.updateOptions({ includeZero : false });
 189   assertEquals([450, 1050], g.yAxisRange(0));
 190 }
 191
 192
 193 /**
 194  * Verify that includeZero range is properly specified per axis.
 195  */
 196 RangeTestCase.prototype.testIncludeZeroPerAxis = function() {
 197   var g = new Dygraph("graph",
 198     'X,A,B\n'+
 199     '0,50,50\n'+
 200     '50,110,110\n',
 201     {
 202       drawPoints: true,
 203       pointSize:5,
 204       series:{
 205         A: {
 206           axis: 'y',
 207           pointSize: 10
 208         },
 209         B: {
 210           axis: 'y2'
 211         }
 212       },
 213       axes: {
 214         'y2': { includeZero: true }
 215       }
 216     });
 217
 218
 219   assertEquals([44, 116], g.yAxisRange(0));
 220   assertEquals([0, 121], g.yAxisRange(1));
 221
 222   g.updateOptions({
 223     axes: {
 224       'y2': { includeZero: false }
 225     }
 226   });
 227
 228   assertEquals([44, 116], g.yAxisRange(1));
 229 }
 230
 231 /**
 232  * Verify that very large Y ranges don't break things.
 233  */
 234 RangeTestCase.prototype.testHugeRange = function() {
 235   var g = new Dygraph("graph", [[0, -1e120], [1, 1e230]], { includeZero : true });
 236   assertEqualsDelta(1, -1e229 / g.yAxisRange(0)[0], 0.001);
 237   assertEqualsDelta(1, 1.1e230 / g.yAxisRange(0)[1], 0.001);
 238 }
 239
 240 /**
 241  * Verify old-style avoidMinZero option.
 242  */
 243 RangeTestCase.prototype.testAvoidMinZero = function() {
 244   var g = this.createGraph({
 245       avoidMinZero: true,
 246     }, ZERO_TO_FIFTY_STEPS, [10, 20], [-5, 55]);
 247 };
 248
 249 /**
 250  * Verify ranges with user-specified padding, implicit avoidMinZero.
 251  */
 252 RangeTestCase.prototype.testPaddingAuto = function() {
 253   var g = this.createGraph({
 254       xRangePad: 42,
 255       yRangePad: 30
 256     }, ZERO_TO_FIFTY_STEPS, [9, 21], [-5, 55]);
 257 };
 258
 259 /**
 260  * Verify auto range with drawAxesAtZero.
 261  */
 262 RangeTestCase.prototype.testPaddingAutoAxisAtZero = function() {
 263   var g = this.createGraph({
 264       drawAxesAtZero: true,
 265     }, ZERO_TO_FIFTY_STEPS, [10, 20], [0, 55]);
 266 };
 267
 268 /**
 269  * Verify user-specified range with padding and drawAxesAtZero options.
 270  * Try explicit range matching the auto range, should have identical results.
 271  */
 272 RangeTestCase.prototype.testPaddingRange1 = function() {
 273   var g = this.createGraph({
 274       valueRange: [0, 50],
 275       xRangePad: 42,
 276       yRangePad: 30,
 277       drawAxesAtZero: true
 278     }, ZERO_TO_FIFTY_STEPS, [9, 21], [-5, 55]);
 279 };
 280
 281 /**
 282  * Verify user-specified range with padding and drawAxesAtZero options.
 283  * User-supplied range differs from the auto range.
 284  */
 285 RangeTestCase.prototype.testPaddingRange2 = function() {
 286   var g = this.createGraph({
 287       valueRange: [10, 60],
 288       xRangePad: 42,
 289       yRangePad: 30,
 290       drawAxesAtZero: true,
 291     }, ZERO_TO_FIFTY_STEPS, [9, 21], [5, 65]);
 292 };
 293
 294 /**
 295  * Verify drawAxesAtZero and includeZero.
 296  */
 297 RangeTestCase.prototype.testPaddingYAtZero = function() {
 298   var g = this.createGraph({
 299       includeZero: true,
 300       xRangePad: 42,
 301       yRangePad: 30,
 302       drawAxesAtZero: true,
 303     }, [
 304       [-10, 10],
 305       [10, 20],
 306       [30, 50]
 307     ], [-14, 34], [-5, 55]);
 308 };
 309
 310 /**
 311  * Verify logscale, compat mode.
 312  */
 313 RangeTestCase.prototype.testLogscaleCompat = function() {
 314   var g = this.createGraph({
 315       logscale: true
 316     },
 317     [[-10, 10], [10, 10], [30, 1000]],
 318     [-10, 30], [10, 1099]);
 319 };
 320
 321 /**
 322  * Verify logscale, new mode.
 323  */
 324 RangeTestCase.prototype.testLogscalePad = function() {
 325   var g = this.createGraph({
 326       logscale: true,
 327       yRangePad: 30
 328     },
 329     [[-10, 10], [10, 10], [30, 1000]],
 330     [-10, 30], [5.01691, 1993.25801]);
 331 };
 332
 333 /**
 334  * Verify scrolling all-zero region, traditional.
 335  */
 336 RangeTestCase.prototype.testZeroScroll = function() {
 337   g = new Dygraph(
 338       document.getElementById("graph"),
 339       "X,Y\n" +
 340       "1,0\n" +
 341       "8,0\n" +
 342       "9,0.1\n",
 343       {
 344         drawAxesAtZero: true,
 345         animatedZooms: true,
 346         avoidMinZero: true
 347       });
 348 };
 349
 350 /**
 351  * Verify scrolling all-zero region, new-style.
 352  */
 353 RangeTestCase.prototype.testZeroScroll2 = function() {
 354   g = new Dygraph(
 355       document.getElementById("graph"),
 356       "X,Y\n" +
 357       "1,0\n" +
 358       "8,0\n" +
 359       "9,0.1\n",
 360       {
 361         animatedZooms: true,
 362         drawAxesAtZero: true,
 363         xRangePad: 4,
 364         yRangePad: 4
 365       });
 366 };