auto_tests/tests/step_plot_per_series.js

   1 /**
   2  * @fileoverview Test cases for the option "stepPlot" especially for the scenario where the option is not set for the whole graph but for single series.
   3  *
   4  * TODO(danvk): delete this test once dpxdt screenshot tests are part of the
   5  *     main dygraphs repo. The tests have extremely specific expectations about
   6  *     how drawing is performed. It's more realistic to test the resulting
   7  *     pixels.
   8  *
   9  * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
  10  */
  11 describe("step-plot-per-series", function() {
  12
  13 beforeEach(function() {
  14   document.body.innerHTML = "<div id='graph'></div>";
  15 });
  16
  17 var origFunc = Dygraph.getContext;
  18
  19 beforeEach(function() {
  20   document.body.innerHTML = "<div id='graph'></div>";
  21   Dygraph.getContext = function(canvas) {
  22     return new Proxy(origFunc(canvas));
  23   };
  24 });
  25
  26 afterEach(function() {
  27   Dygraph.getContext = origFunc;
  28 });
  29
  30 it('testMixedModeStepAndLineFilled', function() {
  31   var opts = {
  32     width: 480,
  33     height: 320,
  34     axes : {
  35       x : {
  36         drawGrid: false,
  37         drawAxis: false,
  38       },
  39       y : {
  40         drawGrid: false,
  41         drawAxis: false,
  42       }
  43     },
  44     errorBars: false,
  45     labels: ["X", "Idle", "Used"],
  46     series: {
  47       Idle: {stepPlot: false},
  48       Used: {stepPlot: true}
  49     },
  50     fillGraph: true,
  51     stackedGraph: false,
  52     includeZero: true
  53   };
  54
  55   var data = [
  56                [1, 70,30],
  57                [2, 12,88],
  58                [3, 88,12],
  59                [4, 63,37],
  60                [5, 35,65]
  61              ];
  62
  63   var graph = document.getElementById("graph");
  64   var g = new Dygraph(graph, data, opts);
  65
  66   var htx = g.hidden_ctx_;
  67
  68   var attrs = {};
  69
  70
  71   for (var i = 0; i < data.length - 1; i++) {
  72
  73     var x1 = data[i][0];
  74     var x2 = data[i + 1][0];
  75
  76     var y1 = data[i][1];
  77     var y2 = data[i + 1][1];
  78
  79     // First series (line)
  80     var xy1 = g.toDomCoords(x1, y1);
  81     var xy2 = g.toDomCoords(x2, y2);
  82     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  83
  84     y1 = data[i][2];
  85     y2 = data[i + 1][2];
  86
  87     // Seconds series (step)
  88     // Horizontal line
  89     xy1 = g.toDomCoords(x1, y1);
  90     xy2 = g.toDomCoords(x2, y1);
  91     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  92     // Vertical line
  93     xy1 = g.toDomCoords(x2, y1);
  94     xy2 = g.toDomCoords(x2, y2);
  95     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  96   }
  97 });
  98
  99 it('testMixedModeStepAndLineStackedAndFilled', function() {
 100   var opts = {
 101     width: 480,
 102     height: 320,
 103     axes : {
 104       x : {
 105         drawGrid: false,
 106         drawAxis: false,
 107       },
 108       y : {
 109         drawGrid: false,
 110         drawAxis: false,
 111       }
 112     },
 113     errorBars: false,
 114     labels: ["X", "Idle", "Used", "NotUsed", "Active"],
 115     series: {
 116       Idle: {stepPlot: false},
 117       Used: {stepPlot: true},
 118       NotUsed: {stepPlot: false},
 119       Active: {stepPlot: true}
 120     },
 121     fillGraph: true,
 122     stackedGraph: true,
 123     includeZero: true
 124   };
 125
 126   var data = [
 127                [1, 60,30,5,5],
 128                [2, 12,73,5,10],
 129                [3, 38,12,30,20],
 130                [4, 50,17,23,10],
 131                [5, 35,25,35,5]
 132              ];
 133
 134   var graph = document.getElementById("graph");
 135   var g = new Dygraph(graph, data, opts);
 136
 137   var htx = g.hidden_ctx_;
 138
 139   var attrs = {};
 140
 141
 142   for (var i = 0; i < data.length - 1; i++) {
 143
 144     var x1 = data[i][0];
 145     var x2 = data[i + 1][0];
 146     var y1base = 0;
 147     var y2base = 0;
 148     var y1 = data[i][4];
 149     var y2 = data[i + 1][4];
 150
 151     // Fourth series (step)
 152     // Test lines
 153     // Horizontal line
 154     var xy1 = g.toDomCoords(x1, y1);
 155     var xy2 = g.toDomCoords(x2, y1);
 156     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 157     // Vertical line
 158     xy1 = g.toDomCoords(x2, y1);
 159     xy2 = g.toDomCoords(x2, y2);
 160     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 161
 162     // Test edges of areas (also drawn by dygraphs as lines)
 163     xy1 = g.toDomCoords(x1, y1);
 164     xy2 = g.toDomCoords(x2, y1);
 165     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 166     xy1 = xy2;
 167     xy2 = g.toDomCoords(x2, y2base);
 168     // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 169     xy1 = xy2;
 170     xy2 = g.toDomCoords(x1, y1base);
 171     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 172     // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
 173     // But a rectangle is completely tested with three of its four edges.
 174
 175     y1base = y1;
 176     y2base = y1;
 177     y1 += data[i][3];
 178     y2 += data[i + 1][3];
 179
 180     // Third series (line)
 181     // Test lines
 182     xy1 = g.toDomCoords(x1, y1);
 183     xy2 = g.toDomCoords(x2, y2);
 184     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 185
 186     // Test edges of areas (also drawn by dygraphs as lines)
 187     xy1 = g.toDomCoords(x1, y1);
 188     xy2 = g.toDomCoords(x2, y2);
 189     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 190     xy1 = xy2;
 191     xy2 = g.toDomCoords(x2, y2base);
 192     // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 193     xy1 = xy2;
 194     xy2 = g.toDomCoords(x1, y1base);
 195     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 196     // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
 197     // But a rectangle is completely tested with three of its four edges.
 198
 199     y1base = y1;
 200     y2base = y2;
 201     y1 += data[i][2];
 202     y2 += data[i + 1][2];
 203
 204     // Second series (step)
 205     // Test lines
 206     // Horizontal line
 207     xy1 = g.toDomCoords(x1, y1);
 208     xy2 = g.toDomCoords(x2, y1);
 209     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 210     // Vertical line
 211     xy1 = g.toDomCoords(x2, y1);
 212     xy2 = g.toDomCoords(x2, y2);
 213     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 214
 215     // Test edges of areas (also drawn by dygraphs as lines)
 216     xy1 = g.toDomCoords(x1, y1);
 217     xy2 = g.toDomCoords(x2, y1);
 218     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 219     xy1 = xy2;
 220     xy2 = g.toDomCoords(x2, y2base);
 221     // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 222     xy1 = xy2;
 223     xy2 = g.toDomCoords(x1, y1base);
 224     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 225     // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
 226     // But a rectangle is completely tested with three of its four edges.
 227
 228     y1base = y1;
 229     y2base = y1;
 230     y1 += data[i][1];
 231     y2 += data[i + 1][1];
 232
 233     // First series (line)
 234     // Test lines
 235     xy1 = g.toDomCoords(x1, y1);
 236     xy2 = g.toDomCoords(x2, y2);
 237     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 238
 239     // Test edges of areas (also drawn by dygraphs as lines)
 240     xy1 = g.toDomCoords(x1, y1);
 241     xy2 = g.toDomCoords(x2, y2);
 242     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 243     xy1 = xy2;
 244     xy2 = g.toDomCoords(x2, y2base);
 245     // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 246     xy1 = xy2;
 247     xy2 = g.toDomCoords(x1, y1base);
 248     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 249     // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
 250     // But a rectangle is completely tested with three of its four edges.
 251   }
 252 });
 253
 254 it('testMixedModeStepAndLineErrorBars', function() {
 255   var opts = {
 256     width: 480,
 257     height: 320,
 258     axes : {
 259       x : {
 260         drawGrid: false,
 261         drawAxis: false,
 262       },
 263       y : {
 264         drawGrid: false,
 265         drawAxis: false,
 266       }
 267     },
 268     errorBars: true,
 269     sigma: 1,
 270     labels: ["X", "Data1", "Data2"],
 271     series: {
 272       Data1: {stepPlot: true},
 273       Data2: {stepPlot: false}
 274     }
 275   };
 276   var data = [
 277                [1, [75, 2], [50, 3]],
 278                [2, [70, 5], [90, 4]],
 279                [3, [80, 7], [112, 5]],
 280                [4, [55, 3], [100, 2]],
 281                [5, [69, 4], [85, 6]]
 282              ];
 283
 284   var graph = document.getElementById("graph");
 285   var g = new Dygraph(graph, data, opts);
 286
 287   var htx = g.hidden_ctx_;
 288
 289   var attrs = {};
 290
 291   // Test first series (step)
 292   for (var i = 0; i < data.length - 1; i++) {
 293     var x1 = data[i][0];
 294     var x2 = data[i + 1][0];
 295
 296     var y1_middle = data[i][1][0];
 297     var y2_middle = data[i + 1][1][0];
 298
 299     var y1_top = y1_middle + data[i][1][1];
 300     var y2_top = y2_middle + data[i + 1][1][1];
 301
 302     var y1_bottom = y1_middle - data[i][1][1];
 303     var y2_bottom = y2_middle - data[i + 1][1][1];
 304     // Bottom line
 305     var xy1 = g.toDomCoords(x1, y1_bottom);
 306     var xy2 = g.toDomCoords(x2, y1_bottom);
 307     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 308
 309     // Top line
 310     xy1 = g.toDomCoords(x1, y1_top);
 311     xy2 = g.toDomCoords(x2, y1_top);
 312     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 313
 314     // Middle line
 315     xy1 = g.toDomCoords(x1, y1_middle);
 316     xy2 = g.toDomCoords(x2, y1_middle);
 317     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 318
 319     // Test edges of error bar areas(also drawn by dygraphs as lines)
 320     xy1 = g.toDomCoords(x1, y1_top);
 321     xy2 = g.toDomCoords(x2, y1_top);
 322     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 323     xy1 = xy2;
 324     xy2 = g.toDomCoords(x2, y1_bottom);
 325     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 326     xy1 = xy2;
 327     xy2 = g.toDomCoords(x1, y1_bottom);
 328     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 329     // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
 330     // But a rectangle is completely tested with three of its four edges.
 331   }
 332
 333   // Test second series (line)
 334   for (var i = 0; i < data.length - 1; i++) {
 335     // bottom line
 336     var xy1 = g.toDomCoords(data[i][0], (data[i][2][0] - data[i][2][1]));
 337     var xy2 = g.toDomCoords(data[i + 1][0], (data[i + 1][2][0] - data[i + 1][2][1]));
 338     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 339
 340     // top line
 341     xy1 = g.toDomCoords(data[i][0], data[i][2][0] + data[i][2][1]);
 342     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0] + data[i + 1][2][1]);
 343     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 344
 345     // middle line
 346     xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
 347     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
 348     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 349   }
 350
 351 });
 352
 353 it('testMixedModeStepAndLineCustomBars', function() {
 354   var opts = {
 355     width: 480,
 356     height: 320,
 357     axes : {
 358       x : {
 359         drawGrid: false,
 360         drawAxis: false,
 361       },
 362       y : {
 363         drawGrid: false,
 364         drawAxis: false,
 365       }
 366     },
 367     customBars: true,
 368         labels: ["X", "Data1", "Data2"],
 369     series: {
 370       Data1: {stepPlot: true},
 371       Data2: {stepPlot: false}
 372     }
 373   };
 374   var data = [
 375                [1, [73, 75, 78], [50, 55, 70]],
 376                [2, [65, 70, 75], [83, 91, 99]],
 377                [3, [75, 85, 90], [98, 107, 117]],
 378                [4, [55, 58, 61], [93, 102, 105]],
 379                [5, [69, 73, 85], [80, 85, 87]]
 380              ];
 381
 382   var graph = document.getElementById("graph");
 383   var g = new Dygraph(graph, data, opts);
 384
 385   var htx = g.hidden_ctx_;
 386
 387   var attrs = {};
 388
 389   // Test first series (step)
 390   for (var i = 0; i < data.length - 1; i++) {
 391
 392     var x1 = data[i][0];
 393     var x2 = data[i + 1][0];
 394
 395     var y1_middle = data[i][1][1];
 396     var y2_middle = data[i + 1][1][1];
 397
 398     var y1_top = data[i][1][2];
 399     var y2_top = data[i + 1][1][2];
 400
 401     var y1_bottom = data[i][1][0];
 402     var y2_bottom = data[i + 1][1][0];
 403
 404     // Bottom line
 405     var xy1 = g.toDomCoords(x1, y1_bottom);
 406     var xy2 = g.toDomCoords(x2, y1_bottom);
 407     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 408
 409     // Top line
 410     xy1 = g.toDomCoords(x1, y1_top);
 411     xy2 = g.toDomCoords(x2, y1_top);
 412     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 413
 414     // Middle line
 415     xy1 = g.toDomCoords(x1, y1_middle);
 416     xy2 = g.toDomCoords(x2, y1_middle);
 417     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 418
 419     // Test edges of custom bar areas(also drawn by dygraphs as lines)
 420     xy1 = g.toDomCoords(x1, y1_top);
 421     xy2 = g.toDomCoords(x2, y1_top);
 422     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 423     xy1 = xy2;
 424     xy2 = g.toDomCoords(x2, y1_bottom);
 425     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 426     xy1 = xy2;
 427     xy2 = g.toDomCoords(x1, y1_bottom);
 428     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 429     // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
 430     // But a rectangle is completely tested with three of its four edges.
 431   }
 432
 433   // Test second series (line)
 434   for (var i = 0; i < data.length - 1; i++) {
 435     // Bottom line
 436     var xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
 437     var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
 438     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 439
 440     // Top line
 441     xy1 = g.toDomCoords(data[i][0], data[i][2][2]);
 442     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][2]);
 443     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 444
 445     // Middle line
 446     xy1 = g.toDomCoords(data[i][0], data[i][2][1]);
 447     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][1]);
 448     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 449   }
 450 });
 451
 452 });