stacked.js

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