auto_tests/tests/connect_separated_points.js

   1 /**
   2  * @fileoverview Test cases for the option "connectSeparatedPoints" especially for the scenario where not every series has a value for each timestamp.
   3  *
   4  * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
   5  */
   6
   7 import Dygraph from '../../src/dygraph';
   8 import * as utils from '../../src/dygraph-utils';
   9 import CanvasAssertions from './CanvasAssertions';
  10 import Proxy from './Proxy';
  11
  12 describe("connect-separated-points", function() {
  13
  14 cleanupAfterEach();
  15
  16 var origFunc = utils.getContext;
  17
  18 beforeEach(function() {
  19   utils.getContext = function(canvas) {
  20     return new Proxy(origFunc(canvas));
  21   };
  22 });
  23
  24 afterEach(function() {
  25   Dygraph.getContext = origFunc;
  26 });
  27
  28 it('testEdgePointsSimple', function() {
  29   var opts = {
  30     width: 480,
  31     height: 320,
  32     labels: ["x", "series1", "series2", "additionalSeries"],
  33     connectSeparatedPoints: true,
  34     dateWindow: [2.5,7.5]
  35   };
  36
  37   var data = [
  38               [0,-1,0,null],
  39               [1,null,2,null],
  40               [2,null,4,null],
  41               [3,0.5,0,null],
  42               [4,1,-1,5],
  43               [5,2,-2,6],
  44               [6,2.5,-2.5,7],
  45               [7,3,-3,null],
  46               [8,4,null,null],
  47               [9,4,-10,null]
  48              ];
  49
  50   var graph = document.getElementById("graph");
  51   var g = new Dygraph(graph, data, opts);
  52
  53   var htx = g.hidden_ctx_;
  54
  55   var attrs = {};
  56
  57   // Test if series1 is drawn correctly.
  58   // ------------------------------------
  59
  60   // The first point of the first series
  61   var x1 = data[0][0];
  62   var y1 = data[0][1];
  63   var xy1 = g.toDomCoords(x1, y1);
  64
  65   // The next valid point of this series
  66   var x2 = data[3][0];
  67   var y2 = data[3][1];
  68   var xy2 = g.toDomCoords(x2, y2);
  69
  70   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
  71   // even if the point is outside the visible range and only one series has a valid value for this point.
  72   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  73
  74   // Test if series2 is drawn correctly.
  75   // ------------------------------------
  76
  77   // The last point of the second series.
  78   var x2 = data[9][0];
  79   var y2 = data[9][2];
  80   var xy2 = g.toDomCoords(x2, y2);
  81
  82   // The previous valid point of this series
  83   var x1 = data[7][0];
  84   var y1 = data[7][2];
  85   var xy1 = g.toDomCoords(x1, y1);
  86
  87   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
  88   // even if the point is outside the visible range and only one series has a valid value for this point.
  89   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  90 });
  91
  92 it('testEdgePointsCustomBars', function() {
  93   var opts = {
  94     width: 480,
  95     height: 320,
  96     labels: ["x", "series1", "series2", "additionalSeries"],
  97     connectSeparatedPoints: true,
  98     dateWindow: [2.5,7.5],
  99     customBars: true
 100   };
 101
 102   var data = [
 103               [0,[4,5,6], [1,2,3], [null, null, null]],
 104               [1,[null,null,null], [2,3,4], [null, null, null]],
 105               [2,[null,null,null], [3,4,5], [null, null, null]],
 106               [3,[0,1,2], [2,3,4], [null, null, null]],
 107               [4,[1,2,3], [2,3,4], [4, 5, 6]],
 108               [5,[1,2,3], [3,4,5], [4, 5, 6]],
 109               [6,[0,1,2], [4,5,6], [5, 6, 7]],
 110               [7,[0,1,2], [4,5,6], [null, null, null]],
 111               [8,[2,3,4], [null,null,null], [null, null, null]],
 112               [9,[0,1,2], [2,4,9], [null, null, null]]
 113
 114              ];
 115
 116   var graph = document.getElementById("graph");
 117   var g = new Dygraph(graph, data, opts);
 118
 119   var htx = g.hidden_ctx_;
 120
 121   var attrs = {};
 122
 123
 124   // Test if values of the series1 are drawn correctly.
 125   // ------------------------------------
 126
 127   // The first point of the first series
 128   var x1 = data[0][0];
 129   var y1 = data[0][1][1];
 130   var xy1 = g.toDomCoords(x1, y1);
 131
 132   // The next valid point of this series
 133   var x2 = data[3][0];
 134   var y2 = data[3][1][1];
 135   var xy2 = g.toDomCoords(x2, y2);
 136
 137   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
 138   // even if the point is outside the visible range and only one series has a valid value for this point.
 139   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 140
 141   // Test if the custom bars of the series1 are drawn correctly
 142   // --------------------------------------------
 143
 144   // The first min-point of this series
 145   x1 = data[0][0];
 146   y1 = data[0][1][0];
 147   xy1 = g.toDomCoords(x1, y1);
 148
 149   // The next valid min-point of the second series.
 150   x2 = data[3][0];
 151   y2 = data[3][1][0];
 152   xy2 = g.toDomCoords(x2, y2);
 153
 154   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
 155   // even if the point is outside the visible range and only one series has a valid value for this point.
 156   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 157
 158   // The first max-point of this series
 159   x1 = data[0][0];
 160   y1 = data[0][1][2];
 161   xy1 = g.toDomCoords(x1, y1);
 162
 163   // The next valid max-point of the second series.
 164   x2 = data[3][0];
 165   y2 = data[3][1][2];
 166   xy2 = g.toDomCoords(x2, y2);
 167
 168   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
 169   // even if the point is outside the visible range and only one series has a valid value for this point.
 170   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 171
 172   // Test if values of the series2 are drawn correctly.
 173   // ------------------------------------
 174
 175   // The last point of the second series.
 176   var x2 = data[9][0];
 177   var y2 = data[9][2][1];
 178   var xy2 = g.toDomCoords(x2, y2);
 179
 180   // The previous valid point of this series
 181   var x1 = data[7][0];
 182   var y1 = data[7][2][1];
 183   var xy1 = g.toDomCoords(x1, y1);
 184
 185   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
 186   // even if the point is outside the visible range and only one series has a valid value for this point.
 187   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 188
 189   // Test if the custom bars of the series2 are drawn correctly
 190   // --------------------------------------------
 191
 192   // The last min-point of the second series.
 193   x2 = data[9][0];
 194   y2 = data[9][2][0];
 195   xy2 = g.toDomCoords(x2, y2);
 196
 197   // The previous valid min-point of this series
 198   x1 = data[7][0];
 199   y1 = data[7][2][0];
 200   xy1 = g.toDomCoords(x1, y1);
 201
 202   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
 203   // even if the point is outside the visible range and only one series has a valid value for this point.
 204   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 205
 206   // The last max-point of the second series.
 207   x2 = data[9][0];
 208   y2 = data[9][2][2];
 209   xy2 = g.toDomCoords(x2, y2);
 210
 211   // The previous valid max-point of this series
 212   x1 = data[7][0];
 213   y1 = data[7][2][2];
 214   xy1 = g.toDomCoords(x1, y1);
 215
 216   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
 217   // even if the point is outside the visible range and only one series has a valid value for this point.
 218   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 219 });
 220
 221 it('testEdgePointsErrorBars', function() {
 222   var opts = {
 223     width: 480,
 224     height: 320,
 225     labels: ["x", "series1", "series2", "seriesTestHelper"],
 226     connectSeparatedPoints: true,
 227     dateWindow: [2,7.5],
 228     errorBars: true
 229
 230   };
 231
 232   var data = [
 233               [0,[5,1], [2,1], [null,null]],
 234               [1,[null,null], [3,1], [null,null]],
 235               [2,[null,null], [4,1], [null,null]],
 236               [3,[1,1], [3,1], [null,null]],
 237               [4,[2,1], [3,1], [5,1]],
 238               [5,[2,1], [4,1], [5,1]],
 239               [6,[1,1], [5,1], [6,1]],
 240               [7,[1,1], [5,1], [null,null]],
 241               [8,[3,1], [null,null], [null,null]],
 242               [9,[1,1], [4,1], [null,null]]
 243
 244              ];
 245
 246   var graph = document.getElementById("graph");
 247   var g = new Dygraph(graph, data, opts);
 248
 249   var htx = g.hidden_ctx_;
 250
 251   var attrs = {};
 252
 253
 254   // Test if values of the series1 are drawn correctly.
 255   // ------------------------------------
 256
 257   // The first point of the first series
 258   var x1 = data[0][0];
 259   var y1 = data[0][1][0];
 260   var xy1 = g.toDomCoords(x1, y1);
 261
 262   // The next valid point of this series
 263   var x2 = data[3][0];
 264   var y2 = data[3][1][0];
 265   var xy2 = g.toDomCoords(x2, y2);
 266
 267   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
 268   // even if the point is outside the visible range and only one series has a valid value for this point.
 269   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 270
 271   // Test if the upper error bars of series1 are drawn correctly
 272   // --------------------------------------------
 273
 274   // The first upper error-point of this series
 275   x1 = data[0][0];
 276   var y1error = y1 + (data[0][1][1]*2);
 277   xy1 = g.toDomCoords(x1, y1error);
 278
 279   // The next valid upper error-point of the second series.
 280   x2 = data[3][0];
 281   var y2error = y2 + (data[3][1][1]*2);
 282   xy2 = g.toDomCoords(x2, y2error);
 283
 284   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
 285   // even if the point is outside the visible range and only one series has a valid value for this point.
 286   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 287
 288   // Test if the lower error bars of series1 are drawn correctly
 289   // --------------------------------------------
 290
 291   // The first lower error-point of this series
 292   x1 = data[0][0];
 293   y1error = y1 - (data[0][1][1]*2);
 294   xy1 = g.toDomCoords(x1, y1error);
 295
 296   //The next valid lower error-point of the second series.
 297   x2 = data[3][0];
 298   y2error = y2 - (data[3][1][1]*2);
 299   xy2 = g.toDomCoords(x2, y2error);
 300
 301   // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly
 302   // even if the point is outside the visible range and only one series has a valid value for this point.
 303   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 304
 305
 306   // Test if values of the series2 are drawn correctly.
 307   // ------------------------------------
 308
 309   // The last point of this series
 310   x2 = data[9][0];
 311   y2 = data[9][2][0];
 312   xy2 = g.toDomCoords(x2, y2);
 313
 314   // The previous valid point of the first series
 315   x1 = data[7][0];
 316   y1 = data[7][2][0];
 317   xy1 = g.toDomCoords(x1, y1);
 318
 319   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
 320   // even if the point is outside the visible range and only one series has a valid value for this point.
 321   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 322
 323   // Test if the upper error bars of series2 are drawn correctly
 324   // --------------------------------------------
 325
 326   // The last upper error-point of the second series.
 327   x2 = data[9][0];
 328   var y2error = y2 + (data[9][2][1]*2);
 329   xy2 = g.toDomCoords(x2, y2error);
 330
 331   // The previous valid upper error-point of this series
 332   x1 = data[7][0];
 333   var y1error = y1 + (data[7][2][1]*2);
 334   xy1 = g.toDomCoords(x1, y1error);
 335
 336   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
 337   // even if the point is outside the visible range and only one series has a valid value for this point.
 338   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 339
 340   // Test if the lower error bars of series1 are drawn correctly
 341   // --------------------------------------------
 342
 343   // The last lower error-point of the second series.
 344   x2 = data[9][0];
 345   y2error = y2 - (data[9][2][1]*2);
 346   xy2 = g.toDomCoords(x2, y2error);
 347
 348   // The previous valid lower error-point of this series
 349   x1 = data[7][0];
 350   y1error = y1 - (data[7][2][1]*2);
 351   xy1 = g.toDomCoords(x1, y1error);
 352
 353   // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly
 354   // even if the point is outside the visible range and only one series has a valid value for this point.
 355   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 356 });
 357
 358 it('testConnectSeparatedPointsPerSeries', function() {
 359   var assertExpectedLinesDrawnPerSeries = function(htx, expectedSeries1, expectedSeries2, expectedSeries3) {
 360     var expected = [expectedSeries1, expectedSeries2, expectedSeries3];
 361     var actual = [
 362         CanvasAssertions.numLinesDrawn(htx, "#ff0000"),
 363         CanvasAssertions.numLinesDrawn(htx, "#00ff00"),
 364         CanvasAssertions.numLinesDrawn(htx, "#0000ff")];
 365     assert.deepEqual(expected, actual);
 366   }
 367
 368   var g = new Dygraph(document.getElementById("graph"),
 369       [
 370         [1, 10, 10, 10],
 371         [2, 15, 11, 12],
 372         [3, null, null, 12],
 373         [4, 20, 14, null],
 374         [5, 15, null, 17],
 375         [6, 18, null, null],
 376         [7, 12, 14, null]
 377       ],
 378       {
 379         labels: ["Date","Series1","Series2","Series3"],
 380         connectSeparatedPoints: false,
 381         colors: ["#ff0000", "#00ff00", "#0000ff"]
 382       });
 383
 384   var htx = g.hidden_ctx_;
 385   assertExpectedLinesDrawnPerSeries(htx, 4, 1, 2);
 386
 387   Proxy.reset(htx);
 388   g.updateOptions({
 389     connectSeparatedPoints : true,
 390   });
 391   assertExpectedLinesDrawnPerSeries(htx, 5, 3, 3);
 392
 393   Proxy.reset(htx);
 394   g.updateOptions({
 395     connectSeparatedPoints : false,
 396     series : {
 397       Series1 : { connectSeparatedPoints : true }
 398     }
 399   });
 400   assertExpectedLinesDrawnPerSeries(htx, 5, 1, 2);
 401
 402
 403   Proxy.reset(htx);
 404   g.updateOptions({
 405     connectSeparatedPoints : true,
 406     series : {
 407       Series1 : { connectSeparatedPoints : false }
 408     }
 409   });
 410   assertExpectedLinesDrawnPerSeries(htx, 4, 3, 3);
 411 });
 412
 413 it('testNaNErrorBars', function() {
 414   var data = [
 415     [0,[1,2,3]],
 416     [1,[2,3,4]],
 417     [2,[3,4,5]],
 418     [3,[null,null,null]],
 419     [4,[2,3,4]],
 420     [5,[3,4,5]],
 421     [6,[2,3,4]],
 422     [7,[NaN,NaN,NaN]],
 423     [8,[2,3,4]],
 424     [9,[2,3,4]],
 425     [10,[2,3,4]],
 426     [11,[2,3,4]]
 427   ];
 428
 429   var opts = {
 430     labels: ["x", "y"],
 431     colors: ["#ff0000"],
 432     customBars: true,
 433     connectSeparatedPoints: true
 434   };
 435
 436   var graph = document.getElementById("graph");
 437   var g = new Dygraph(graph, data, opts);
 438
 439   var htx = g.hidden_ctx_;
 440
 441   var attrs = {};
 442
 443   // Line should be drawn across the null gap.
 444   CanvasAssertions.assertLineDrawn(htx,
 445         g.toDomCoords(data[2][0], data[2][1][1]),
 446         g.toDomCoords(data[4][0], data[4][1][1]),
 447         attrs);
 448
 449   // No line across the NaN gap, and a single line (not two)
 450   // across the null gap.
 451   assert.equal(8, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 452 });
 453
 454 });