| 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 | }); |