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