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