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