error_bars.js

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