auto_tests/tests/error_bars.js

   1 /**
   2  * @fileoverview FILL THIS IN
   3  *
   4  * @author danvk@google.com (Dan Vanderkam)
   5  */
   6 describe("error-bars", function() {
   7
   8 beforeEach(function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 });
  11
  12 var _origFunc = Dygraph.getContext;
  13 beforeEach(function() {
  14   document.body.innerHTML = "<div id='graph'></div>";
  15   Dygraph.getContext = function(canvas) {
  16     return new Proxy(_origFunc(canvas));
  17   }
  18 });
  19
  20 afterEach(function() {
  21   Dygraph.getContext = _origFunc;
  22 });
  23
  24 it('testErrorBarsDrawn', function() {
  25   var opts = {
  26     width: 480,
  27     height: 320,
  28     axes : {
  29       x : {
  30         drawGrid: false,
  31         drawAxis: false,
  32       },
  33       y : {
  34         drawGrid: false,
  35         drawAxis: false,
  36       }
  37     },
  38     customBars: true,
  39     errorBars: true,
  40     labels: ['X', 'Y']
  41   };
  42   var data = [
  43                [1, [10,  10, 100]],
  44                [2, [15,  20, 110]],
  45                [3, [10,  30, 100]],
  46                [4, [15,  40, 110]],
  47                [5, [10, 120, 100]],
  48                [6, [15,  50, 110]],
  49                [7, [10,  70, 100]],
  50                [8, [15,  90, 110]],
  51                [9, [10,  50, 100]]
  52              ];
  53
  54   var graph = document.getElementById("graph");
  55   var g = new Dygraph(graph, data, opts);
  56
  57   var htx = g.hidden_ctx_;
  58
  59   var attrs = {};  // TODO(danvk): fill in
  60
  61   for (var i = 0; i < data.length - 1; i++) {
  62     // bottom line
  63     var xy1 = g.toDomCoords(data[i][0], data[i][1][0]);
  64     var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][0]);
  65     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  66
  67     // top line
  68     xy1 = g.toDomCoords(data[i][0], data[i][1][2]);
  69     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][2]);
  70     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  71
  72     // middle line
  73     xy1 = g.toDomCoords(data[i][0], data[i][1][1]);
  74     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][1]);
  75     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  76   }
  77
  78   g.updateOptions({logscale: true});
  79
  80   for (var i = 0; i < data.length - 1; i++) {
  81     // bottom line
  82     var xy1 = g.toDomCoords(data[i][0], data[i][1][0]);
  83     var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][0]);
  84     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  85
  86     // top line
  87     xy1 = g.toDomCoords(data[i][0], data[i][1][2]);
  88     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][2]);
  89     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  90
  91     // middle line
  92     xy1 = g.toDomCoords(data[i][0], data[i][1][1]);
  93     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][1]);
  94     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  95   }
  96   g.destroy(); // Restore balanced saves and restores.
  97   CanvasAssertions.assertBalancedSaveRestore(htx);
  98 });
  99
 100 it('testErrorBarsCorrectColors', function() {
 101   // Two constant series with constant error.
 102   var data = [
 103     [0, [100, 50], [200, 50]],
 104     [1, [100, 50], [200, 50]]
 105   ];
 106
 107   var opts = {
 108     errorBars: true,
 109     sigma: 1.0,
 110     fillAlpha: 0.15,
 111     colors: ['#00ff00', '#0000ff'],
 112     axes : {
 113       x : {
 114         drawGrid: false,
 115         drawAxis: false,
 116       },
 117       y : {
 118         drawGrid: false,
 119         drawAxis: false,
 120       }
 121     },
 122     width: 400,
 123     height: 300,
 124     valueRange: [0, 300],
 125     labels: ['X', 'Y1', 'Y2']
 126   };
 127   var graph = document.getElementById("graph");
 128   var g = new Dygraph(graph, data, opts);
 129
 130   // y-pixels (0=top, 299=bottom)
 131   //   0- 48: empty (white)
 132   //  49- 98: Y2 error bar
 133   //  99:     Y2 center line
 134   // 100-148: Y2 error bar
 135   // 149-198: Y1 error bar
 136   // 199:     Y1 center line
 137   // 200-248: Y1 error bar
 138   // 249-299: empty (white)
 139   // TODO(danvk): test the edges of these regions.
 140
 141   assert.deepEqual([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 75));
 142   assert.deepEqual([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 125));
 143   assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 175));
 144   assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 225));
 145 });
 146
 147 // Regression test for https://github.com/danvk/dygraphs/issues/517
 148 // This verifies that the error bars have alpha=fillAlpha, even if the series
 149 // color has its own alpha value.
 150 it('testErrorBarsForAlphaSeriesCorrectColors', function() {
 151   var data = [
 152     [0, [100, 50]],
 153     [2, [100, 50]]
 154   ];
 155
 156   var opts = {
 157     errorBars: true,
 158     sigma: 1.0,
 159     fillAlpha: 0.15,
 160     strokeWidth: 10,
 161     colors: ['rgba(0, 255, 0, 0.5)'],
 162     axes : {
 163       x : {
 164         drawGrid: false,
 165         drawAxis: false,
 166       },
 167       y : {
 168         drawGrid: false,
 169         drawAxis: false,
 170       }
 171     },
 172     width: 400,
 173     height: 300,
 174     valueRange: [0, 300],
 175     labels: ['X', 'Y']
 176   };
 177   var graph = document.getElementById("graph");
 178   var g = new Dygraph(graph, data, opts);
 179
 180   // y-pixels (0=top, 299=bottom)
 181   //   0-148: empty (white)
 182   // 149-198: Y error bar
 183   // 199:     Y center line
 184   // 200-248: Y error bar
 185   // 249-299: empty (white)
 186
 187   //  38 = 255 * 0.15 (fillAlpha)
 188   // 146 = 255 * (0.15 * 0.5 + 1 * 0.5) (fillAlpha from error bar + alpha from series line)
 189   assert.deepEqual([0, 255, 0, 38],  Util.samplePixel(g.hidden_, 1, 175));
 190   assert.deepEqual([0, 255, 0, 146], Util.samplePixel(g.hidden_, 200, 199));
 191   assert.deepEqual([0, 255, 0, 38],  Util.samplePixel(g.hidden_, 1, 225));
 192 });
 193
 194
 195 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=392
 196 it('testRollingAveragePreservesNaNs', function() {
 197   var graph = document.getElementById("graph");
 198   var data =
 199     [
 200       [1, [null, null], [3,1]],
 201       [2, [2, 1], [null, null]],
 202       [3, [null, null], [5,1]],
 203       [4, [4, 0.5], [null, null]],
 204       [5, [null, null], [7,1]],
 205       [6, [NaN, NaN], [null, null]],
 206       [8, [8, 1], [null, null]],
 207       [10, [10, 1], [null, null]]
 208     ];
 209   var g = new Dygraph(graph, data,
 210         {
 211           labels: ['x', 'A', 'B' ],
 212           connectSeparatedPoints: true,
 213           drawPoints: true,
 214           errorBars: true
 215         }
 216       );
 217
 218   var in_series = g.dataHandler_.extractSeries(data, 1, g.attributes_);
 219
 220   assert.equal(null, in_series[4][1]);
 221   assert.equal(null, in_series[4][2][0]);
 222   assert.equal(null, in_series[4][2][1]);
 223   assert(isNaN(in_series[5][1]));
 224   assert(isNaN(in_series[5][2][0]));
 225   assert(isNaN(in_series[5][2][1]));
 226
 227   var out_series = g.dataHandler_.rollingAverage(in_series, 1, g.attributes_);
 228   assert(isNaN(out_series[5][1]));
 229   assert(isNaN(out_series[5][2][0]));
 230   assert(isNaN(out_series[5][2][1]));
 231   assert.equal(null, out_series[4][1]);
 232   assert.equal(null, out_series[4][2][0]);
 233   assert.equal(null, out_series[4][2][1]);
 234 });
 235
 236 });