auto_tests/tests/missing_points.js

   1 // Copyright (c) 2012 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  * @fileoverview Test cases for drawing lines with missing points.
  23  *
  24  * @author konigsberg@google.com (Robert Konigsberg)
  25  */
  26 var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]];
  27
  28 describe("missing-points", function() {
  29
  30 var _origFunc = Dygraph.getContext;
  31 beforeEach(function() {
  32   document.body.innerHTML = "<div id='graph'></div>";
  33   Dygraph.getContext = function(canvas) {
  34     return new Proxy(_origFunc(canvas));
  35   }
  36 });
  37
  38 afterEach(function() {
  39   Dygraph.getContext = _origFunc;
  40 });
  41
  42 it('testSeparatedPointsDontDraw', function() {
  43   var graph = document.getElementById("graph");
  44   var g = new Dygraph(
  45       graph,
  46       [[1, 10, 11],
  47        [2, 11, null],
  48        [3, 12, 13]],
  49       {
  50         colors: ['red', 'blue'],
  51         labels: ['X', 'Y1', 'Y2']
  52       });
  53   var htx = g.hidden_ctx_;
  54   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  55   assert.equal(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  56 });
  57
  58 it('testSeparatedPointsDontDraw_expanded', function() {
  59   var graph = document.getElementById("graph");
  60   var g = new Dygraph(
  61       graph,
  62       [[0, 10],
  63        [1, 11],
  64        [2, null],
  65        [3, 13],
  66        [4, 14]],
  67       { colors: ['blue'], labels: ['X', 'Y']});
  68   var htx = g.hidden_ctx_;
  69
  70   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  71   CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212],
  72       { strokeStyle: '#0000ff', });
  73   CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25],
  74       { strokeStyle: '#0000ff', });
  75 });
  76
  77 it('testSeparatedPointsDontDraw_expanded_connected', function() {
  78   var graph = document.getElementById("graph");
  79   var g = new Dygraph(
  80       graph,
  81       [[0, 10],
  82        [1, 11],
  83        [2, null],
  84        [3, 13],
  85        [4, 14]],
  86       {
  87         colors: ['blue'],
  88         connectSeparatedPoints: true,
  89         labels: ['X', 'Y']
  90       });
  91   var htx = g.hidden_ctx_;
  92   var num_lines = 0;
  93
  94   assert.equal(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  95   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
  96       [[56, 275], [161, 212], [370, 87], [475, 25]],
  97       { strokeStyle: '#0000ff' });
  98 });
  99
 100 /**
 101  * At the time of writing this test, the blue series is only points, and not lines.
 102  */
 103 it('testConnectSeparatedPoints', function() {
 104   var g = new Dygraph(
 105     document.getElementById("graph"),
 106     [
 107       [1, null, 3],
 108       [2, 2, null],
 109       [3, null, 7],
 110       [4, 5, null],
 111       [5, null, 5],
 112       [6, 3, null]
 113     ],
 114     {
 115       connectSeparatedPoints: true,
 116       drawPoints: true,
 117       colors: ['red', 'blue'],
 118       labels: ['X', 'Y1', 'Y2']
 119     }
 120   );
 121
 122   var htx = g.hidden_ctx_;
 123
 124   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
 125   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 126       [[56, 225], [223, 25], [391, 125]],
 127       { strokeStyle: '#0000ff' });
 128
 129   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 130   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 131       [[140, 275], [307, 125], [475, 225]],
 132       { strokeStyle: '#ff0000' });
 133 });
 134
 135 /**
 136  * At the time of writing this test, the blue series is only points, and not lines.
 137  */
 138 it('testConnectSeparatedPointsWithNan', function() {
 139   var g = new Dygraph(
 140     document.getElementById("graph"),
 141     "x,A,B  \n" +
 142     "1,,3   \n" +
 143     "2,2,   \n" +
 144     "3,,5   \n" +
 145     "4,4,   \n" +
 146     "5,,7   \n" +
 147     "6,NaN, \n" +
 148     "8,8,   \n" +
 149     "10,10, \n",
 150     {
 151       connectSeparatedPoints: true,
 152       drawPoints: true,
 153       colors: ['red', 'blue']
 154     }
 155   );
 156
 157   var htx = g.hidden_ctx_;
 158
 159   // Red has two disconnected line segments
 160   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 161   CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' });
 162   CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' });
 163
 164   // Blue's lines are consecutive, however.
 165   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
 166   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 167       [[56, 244], [149, 181], [242, 118]],
 168       { strokeStyle: '#0000ff' });
 169 });
 170
 171 /* These lines contain awesome powa!
 172   var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"});
 173   for (var idx = 0; idx < lines.length; idx++) {
 174     var line = lines[idx];
 175     console.log(line[0].args, line[1].args, line[0].properties.strokeStyle);
 176   }
 177 */
 178
 179 it('testErrorBarsWithMissingPoints', function() {
 180   var data = [
 181               [1, [2,1]],
 182               [2, [3,1]],
 183               [3, null],
 184               [4, [5,1]],
 185               [5, [4,1]],
 186               [6, [null,null]],
 187              ];
 188   var g = new Dygraph(
 189     document.getElementById("graph"),
 190     data,
 191     {
 192       errorBars: true,
 193       colors: ['red'],
 194       labels: ['X', 'Y']
 195     }
 196   );
 197
 198   var htx = g.hidden_ctx_;
 199
 200   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 201
 202   var p0 = g.toDomCoords(data[0][0], data[0][1][0]);
 203   var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
 204   var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
 205   var p3 = g.toDomCoords(data[4][0], data[4][1][0]);
 206   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 207       [p0, p1], { strokeStyle: '#ff0000' });
 208   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 209       [p2, p3], { strokeStyle: '#ff0000' });
 210 });
 211
 212 it('testErrorBarsWithMissingPointsConnected', function() {
 213   var data = [
 214               [1, [null,1]],
 215               [2, [2,1]],
 216               [3, null],
 217               [4, [5,1]],
 218               [5, [null,null]],
 219               [6, [3,1]]
 220              ];
 221   var g = new Dygraph(
 222     document.getElementById("graph"),
 223     data,
 224     {
 225       connectSeparatedPoints: true,
 226       drawPoints: true,
 227       errorBars: true,
 228       colors: ['red'],
 229       labels: ['X', 'Y']
 230     }
 231   );
 232
 233   var htx = g.hidden_ctx_;
 234
 235   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 236
 237   var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
 238   var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
 239   var p3 = g.toDomCoords(data[5][0], data[5][1][0]);
 240   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 241       [p1, p2, p3],
 242       { strokeStyle: '#ff0000' });
 243 });
 244 it('testCustomBarsWithMissingPoints', function() {
 245   var data = [
 246               [1, [1,2,3]],
 247               [2, [2,3,4]],
 248               [3, null],
 249               [4, [4,5,6]],
 250               [5, [3,4,5]],
 251               [6, [null,null,null]],
 252               [7, [2,3,4]],
 253               [8, [1,2,3]],
 254               [9, NaN],
 255               [10, [2,3,4]],
 256               [11, [3,4,5]],
 257               [12, [NaN,NaN,NaN]]
 258              ];
 259   var g = new Dygraph(
 260     document.getElementById("graph"),
 261     data,
 262     {
 263       customBars: true,
 264       colors: ['red'],
 265       labels: ['X', 'Y']
 266     }
 267   );
 268
 269   var htx = g.hidden_ctx_;
 270
 271   assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 272
 273   var p0 = g.toDomCoords(data[0][0], data[0][1][1]);
 274   var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
 275   CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
 276
 277   p0 = g.toDomCoords(data[3][0], data[3][1][1]);
 278   p1 = g.toDomCoords(data[4][0], data[4][1][1]);
 279   CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
 280
 281   p0 = g.toDomCoords(data[6][0], data[6][1][1]);
 282   p1 = g.toDomCoords(data[7][0], data[7][1][1]);
 283   CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });;
 284
 285   p0 = g.toDomCoords(data[9][0], data[9][1][1]);
 286   p1 = g.toDomCoords(data[10][0], data[10][1][1]);
 287   CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
 288 });
 289
 290 it('testCustomBarsWithMissingPointsConnected', function() {
 291   var data = [
 292               [1, [1,null,1]],
 293               [2, [1,2,3]],
 294               [3, null],
 295               [4, [4,5,6]],
 296               [5, [null,null,null]],
 297               [6, [2,3,4]]
 298              ];
 299   var g = new Dygraph(
 300     document.getElementById("graph"),
 301     data,
 302     {
 303       connectSeparatedPoints: true,
 304       drawPoints: true,
 305       customBars: true,
 306       colors: ['red'],
 307       labels: ['X', 'Y']
 308     }
 309   );
 310
 311   var htx = g.hidden_ctx_;
 312
 313   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 314
 315   var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
 316   var p2 = g.toDomCoords(data[3][0], data[3][1][1]);
 317   var p3 = g.toDomCoords(data[5][0], data[5][1][1]);
 318   CanvasAssertions.assertConsecutiveLinesDrawn(htx,
 319       [p1, p2, p3],
 320       { strokeStyle: '#ff0000' });
 321 });
 322
 323 it('testLeftBoundaryWithMisingPoints', function() {
 324   var data = [
 325               [1, null, 3],
 326               [2, 1, null],
 327               [3, 0, 5],
 328               [4, 2, 1],
 329               [5, 4, null],
 330               [6, 3, 2]
 331              ];
 332   var g = new Dygraph(
 333     document.getElementById("graph"),
 334     data,
 335     {
 336       connectSeparatedPoints: true,
 337       drawPoints: true,
 338       colors: ['red','blue'],
 339       labels: ['X', 'Y1', 'Y2']
 340     }
 341   );
 342   g.updateOptions({ dateWindow : [ 2.5, 4.5 ] });
 343   assert.equal(1, g.getLeftBoundary_(0));
 344   assert.equal(0, g.getLeftBoundary_(1));
 345
 346   var domX = g.toDomXCoord(1.9);
 347   var closestRow = g.findClosestRow(domX);
 348   assert.equal(1, closestRow);
 349
 350   g.setSelection(closestRow);
 351   assert.equal(1, g.selPoints_.length);
 352   assert.equal(1, g.selPoints_[0].yval);
 353
 354   g.setSelection(3);
 355   assert.equal(2, g.selPoints_.length);
 356   assert.equal(g.selPoints_[0].xval, g.selPoints_[1].xval);
 357   assert.equal(2, g.selPoints_[0].yval);
 358   assert.equal(1, g.selPoints_[1].yval);
 359 });
 360
 361 // Regression test for issue #411
 362 it('testEmptySeries', function() {
 363   var graphDiv = document.getElementById("graph");
 364   var g = new Dygraph(
 365        graphDiv,
 366        "Time,Empty Series,Series 1,Series 2\n" +
 367        "1381134460,,0,100\n" +
 368        "1381134461,,1,99\n" +
 369        "1381134462,,2,98\n" +
 370        "1381134463,,3,97\n" +
 371        "1381134464,,4,96\n" +
 372        "1381134465,,5,95\n" +
 373        "1381134466,,6,94\n" +
 374        "1381134467,,7,93\n" +
 375        "1381134468,,8,92\n" +
 376        "1381134469,,9,91\n", {
 377            visibility: [true, false, true],
 378            dateWindow: [1381134465, 1381134467]
 379        });
 380
 381   g.setSelection(6);
 382   assert.equal("1381134466: Series 2: 94", Util.getLegend(graphDiv));
 383 });
 384
 385 // Regression test for issue #485
 386 it('testMissingFill', function() {
 387   var graphDiv = document.getElementById("graph");
 388   var N = null;
 389   var g = new Dygraph(
 390       graphDiv,
 391       [
 392         [1, [8, 10, 12]],
 393         [2, [3, 5,7]   ],
 394         [3,     N,     ],
 395         [4, [9, N, 2]  ],  // Note: nulls in arrays are not technically valid.
 396         [5, [N, 2, N]  ],  // see dygraphs.com/data.html.
 397         [6, [2, 3, 6]  ]
 398       ],
 399       {
 400         customBars: true,
 401         connectSeparatedPoints: false,
 402         labels: [ "X", "Series1"]
 403       }
 404   );
 405
 406   // Make sure there are no 'NaN' line segments.
 407   var htx = g.hidden_ctx_;
 408   for (var i = 0; i < htx.calls__.length; i++) {
 409     var call = htx.calls__[i];
 410     if ((call.name == 'moveTo' || call.name == 'lineTo') && call.args) {
 411       for (var j = 0; j < call.args.length; j++) {
 412         assert.isFalse(isNaN(call.args[j]));
 413       }
 414     }
 415   }
 416 });
 417
 418 });