auto_tests/tests/stacked.js

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