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