auto_tests/tests/stacked.js

   1 /**
   2  * @fileoverview Tests using the "stackedGraph" option.
   3  *
   4  * @author dan@dygraphs.com (Dan Vanderkam)
   5  */
   6 describe("stacked", function() {
   7
   8 var _origGetContext = Dygraph.getContext;
   9
  10 beforeEach(function() {
  11   document.body.innerHTML = "<div id='graph'></div>";
  12   Dygraph.getContext = function(canvas) {
  13     return new Proxy(_origGetContext(canvas));
  14   }
  15 });
  16
  17 afterEach(function() {
  18   Dygraph.getContext = _origGetContext;
  19 });
  20
  21 it('testCorrectColors', function() {
  22   var opts = {
  23     width: 400,
  24     height: 300,
  25     stackedGraph: true,
  26     axes : {
  27       x : {
  28         drawGrid: false,
  29         drawAxis: false,
  30       },
  31       y : {
  32         drawGrid: false,
  33         drawAxis: false,
  34       }
  35     },
  36     valueRange: [0, 3],
  37     colors: ['#00ff00', '#0000ff'],
  38     fillAlpha: 0.15
  39   };
  40   var data = "X,Y1,Y2\n" +
  41       "0,1,1\n" +
  42       "1,1,1\n" +
  43       "2,1,1\n" +
  44       "3,1,1\n"
  45   ;
  46
  47   var graph = document.getElementById("graph");
  48   var g = new Dygraph(graph, data, opts);
  49
  50   // y pixels 299-201 = y2 = transparent blue
  51   // y pixel 200 = y2 line (blue)
  52   // y pixels 199-101 = y1 = transparent green
  53   // y pixel 100 = y1 line (green)
  54   // y pixels 0-99 = nothing (white)
  55
  56   // 38 = round(0.15 * 255)
  57   assert.deepEqual([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 250));
  58   assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 150));
  59 });
  60
  61 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
  62 it('testSelectionValues', function() {
  63   var opts = {
  64     stackedGraph: true
  65   };
  66   var data = "X,Y1,Y2\n" +
  67       "0,1,1\n" +
  68       "1,1,1\n" +
  69       "2,1,1\n" +
  70       "3,1,1\n"
  71   ;
  72
  73   var graph = document.getElementById("graph");
  74   var g = new Dygraph(graph, data, opts);
  75
  76   g.setSelection(0);
  77
  78   assert.equal("0: Y1: 1 Y2: 1", Util.getLegend());
  79
  80   // Verify that the behavior is correct with highlightSeriesOpts as well.
  81   g.updateOptions({
  82     highlightSeriesOpts: {
  83       strokeWidth: 10
  84     }
  85   });
  86   g.setSelection(0);
  87   assert.equal("0: Y1: 1 Y2: 1", Util.getLegend());
  88
  89   g.setSelection(1);
  90   assert.equal("1: Y1: 1 Y2: 1", Util.getLegend());
  91
  92   g.setSelection(0, 'Y2');
  93   assert.equal("0: Y1: 1 Y2: 1", Util.getLegend());
  94 });
  95
  96 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
  97 it('testDuplicatedXValue', function() {
  98   var opts = {
  99     stackedGraph: true,
 100     fillAlpha: 0.15,
 101     colors: ['#00ff00'],
 102     width: 400,
 103     height: 300
 104   };
 105   var data = "X,Y1\n" +
 106       "0,1\n" +
 107       "1,1\n" +
 108       "2,1\n" +
 109       "2,1\n" +  // duplicate x-value!
 110       "3,1\n"
 111   ;
 112
 113   var graph = document.getElementById("graph");
 114   var g = new Dygraph(graph, data, opts);
 115
 116   assert(g.yAxisRange()[1] < 2);
 117
 118   assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
 119   assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
 120 });
 121
 122 // Validates regression when null values in stacked graphs show up
 123 // incorrectly in the legend.
 124 it('testNullValues', function() {
 125   var opts = {
 126     stackedGraph: true,
 127     stepPlot:true
 128   };
 129   var data = "X,Y1,Y2,Y3\n" +
 130       "0,-5,-1,1\n" +
 131       "1,1,,1\n" +
 132       "2,1,2,3\n" +
 133       "3,3,,4\n" +
 134       "4,3,2,3\n"
 135   ;
 136
 137   var graph = document.getElementById("graph");
 138   var g = new Dygraph(graph, data, opts);
 139
 140   g.setSelection(0);
 141   assert.equal("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());
 142
 143   g.setSelection(1);
 144   assert.equal("1: Y1: 1 Y3: 1", Util.getLegend());
 145
 146   g.setSelection(2);
 147   assert.equal("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());
 148
 149   g.setSelection(3);
 150   assert.equal("3: Y1: 3 Y3: 4", Util.getLegend());
 151
 152   g.setSelection(4);
 153   assert.equal("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
 154 });
 155
 156 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
 157 it('testMissingValueAtZero', function() {
 158   var opts = {
 159     stackedGraph: true
 160   };
 161   var data = "X,Y1,Y2\n" +
 162       "0,,1\n" +
 163       "1,1,2\n" +
 164       "2,,3\n"
 165   ;
 166
 167   var graph = document.getElementById("graph");
 168   var g = new Dygraph(graph, data, opts);
 169
 170   g.setSelection(0);
 171   assert.equal("0: Y2: 1", Util.getLegend());
 172
 173   g.setSelection(1);
 174   assert.equal("1: Y1: 1 Y2: 2", Util.getLegend());
 175
 176   g.setSelection(2);
 177   assert.equal("2: Y2: 3", Util.getLegend());
 178 });
 179
 180 it('testInterpolation', function() {
 181   var opts = {
 182     colors: ['#ff0000', '#00ff00', '#0000ff'],
 183     stackedGraph: true,
 184     labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4']
 185   };
 186
 187   // The last series is all-NaN, it ought to be treated as all zero
 188   // for stacking purposes.
 189   var N = NaN;
 190   var data = [
 191     [100, 1, 2, N, N],
 192     [101, 1, 2, 2, N],
 193     [102, 1, N, N, N],
 194     [103, 1, 2, 4, N],
 195     [104, N, N, N, N],
 196     [105, 1, 2, N, N],
 197     [106, 1, 2, 7, N],
 198     [107, 1, 2, 8, N],
 199     [108, 1, 2, 9, N],
 200     [109, 1, N, N, N]];
 201
 202   var graph = document.getElementById("graph");
 203   var g = new Dygraph(graph, data, opts);
 204
 205   var htx = g.hidden_ctx_;
 206   var attrs = {};
 207
 208   // Check that lines are drawn at the expected positions, using
 209   // interpolated values for missing data.
 210   CanvasAssertions.assertLineDrawn(
 211       htx, g.toDomCoords(100, 4), g.toDomCoords(101, 4), {strokeStyle: '#00ff00'});
 212   CanvasAssertions.assertLineDrawn(
 213       htx, g.toDomCoords(102, 6), g.toDomCoords(103, 7), {strokeStyle: '#ff0000'});
 214   CanvasAssertions.assertLineDrawn(
 215       htx, g.toDomCoords(107, 8), g.toDomCoords(108, 9), {strokeStyle: '#0000ff'});
 216   CanvasAssertions.assertLineDrawn(
 217       htx, g.toDomCoords(108, 12), g.toDomCoords(109, 12), {strokeStyle: '#ff0000'});
 218
 219   // Check that the expected number of line segments gets drawn
 220   // for each series. Gaps don't get a line.
 221   assert.equal(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 222   assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
 223   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
 224
 225   // Check that the selection returns the original (non-stacked)
 226   // values and skips gaps.
 227   g.setSelection(1);
 228   assert.equal("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
 229
 230   g.setSelection(8);
 231   assert.equal("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
 232
 233   g.setSelection(9);
 234   assert.equal("109: Y1: 1", Util.getLegend());
 235 });
 236
 237 it('testInterpolationOptions', function() {
 238   var opts = {
 239     colors: ['#ff0000', '#00ff00', '#0000ff'],
 240     stackedGraph: true,
 241     labels: ['X', 'Y1', 'Y2', 'Y3']
 242   };
 243
 244   var data = [
 245     [100, 1, NaN, 3],
 246     [101, 1, 2, 3],
 247     [102, 1, NaN, 3],
 248     [103, 1, 2, 3],
 249     [104, 1, NaN, 3]];
 250
 251   var choices = ['all', 'inside', 'none'];
 252   var stackedY = [
 253     [6, 6, 6, 6, 6],
 254     [4, 6, 6, 6, 4],
 255     [4, 6, 4, 6, 4]];
 256
 257   for (var i = 0; i < choices.length; ++i) {
 258     var graph = document.getElementById("graph");
 259     opts['stackedGraphNaNFill'] = choices[i];
 260     var g = new Dygraph(graph, data, opts);
 261
 262     var htx = g.hidden_ctx_;
 263     var attrs = {};
 264
 265     // Check top lines get drawn at the expected positions.
 266     for (var j = 0; j < stackedY[i].length - 1; ++j) {
 267       CanvasAssertions.assertLineDrawn(
 268           htx,
 269           g.toDomCoords(100 + j, stackedY[i][j]),
 270           g.toDomCoords(101 + j, stackedY[i][j + 1]),
 271           {strokeStyle: '#ff0000'});
 272     }
 273   }
 274 });
 275
 276 it('testMultiAxisInterpolation', function() {
 277   // Setting 2 axes to test that each axis stacks separately
 278   var opts = {
 279     colors: ['#ff0000', '#00ff00', '#0000ff'],
 280     stackedGraph: true,
 281     series: {
 282       'Y1': {
 283         axis: 'y',
 284       },
 285       'Y2': {
 286         axis: 'y',
 287       },
 288       'Y3': {
 289         axis: 'y2',
 290       },
 291       'Y4': {
 292         axis: 'y2',
 293       }
 294     },
 295     labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4']
 296   };
 297
 298   // The last series is all-NaN, it ought to be treated as all zero
 299   // for stacking purposes.
 300   var N = NaN;
 301   var data = [
 302     [100, 1, 2, N, N],
 303     [101, 1, 2, 2, N],
 304     [102, 1, N, N, N],
 305     [103, 1, 2, 4, N],
 306     [104, N, N, N, N],
 307     [105, 1, 2, N, N],
 308     [106, 1, 2, 7, N],
 309     [107, 1, 2, 8, N],
 310     [108, 1, 2, 9, N],
 311     [109, 1, N, N, N]];
 312
 313   var graph = document.getElementById("graph");
 314   var g = new Dygraph(graph, data, opts);
 315
 316   var htx = g.hidden_ctx_;
 317   var attrs = {};
 318
 319   // Check that lines are drawn at the expected positions, using
 320   // interpolated values for missing data.
 321   CanvasAssertions.assertLineDrawn(
 322       htx, g.toDomCoords(100, 2), g.toDomCoords(101, 2), {strokeStyle: '#00ff00'});
 323   CanvasAssertions.assertLineDrawn(
 324       htx, g.toDomCoords(102, 3), g.toDomCoords(103, 3), {strokeStyle: '#ff0000'});
 325   CanvasAssertions.assertLineDrawn(
 326       htx, g.toDomCoords(107, 2.71), g.toDomCoords(108, 3), {strokeStyle: '#0000ff'});
 327   CanvasAssertions.assertLineDrawn(
 328       htx, g.toDomCoords(108, 3), g.toDomCoords(109, 3), {strokeStyle: '#ff0000'});
 329
 330   // Check that the expected number of line segments gets drawn
 331   // for each series. Gaps don't get a line.
 332   assert.equal(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 333   assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
 334   assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
 335
 336   // Check that the selection returns the original (non-stacked)
 337   // values and skips gaps.
 338   g.setSelection(1);
 339   assert.equal("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
 340
 341   g.setSelection(8);
 342   assert.equal("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
 343
 344   g.setSelection(9);
 345   assert.equal("109: Y1: 1", Util.getLegend());
 346 });
 347
 348 });