Commit | Line | Data |
---|---|---|
f35016e8 DV |
1 | /** |
2 | * @fileoverview FILL THIS IN | |
3 | * | |
4 | * @author danvk@google.com (Dan Vanderkam) | |
5 | */ | |
f35016e8 | 6 | |
e8c70e4e DV |
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'; | |
f35016e8 | 12 | |
e8c70e4e | 13 | describe("error-bars", function() { |
f35016e8 | 14 | |
e8c70e4e DV |
15 | cleanupAfterEach(); |
16 | useProxyCanvas(utils, Proxy); | |
f35016e8 | 17 | |
89fdcedb | 18 | it('testErrorBarsDrawn', function() { |
f35016e8 DV |
19 | var opts = { |
20 | width: 480, | |
21 | height: 320, | |
bfb3e0a4 RK |
22 | axes : { |
23 | x : { | |
24 | drawGrid: false, | |
25 | drawAxis: false, | |
26 | }, | |
27 | y : { | |
28 | drawGrid: false, | |
29 | drawAxis: false, | |
30 | } | |
31 | }, | |
f35016e8 | 32 | customBars: true, |
65129ba8 DV |
33 | errorBars: true, |
34 | labels: ['X', 'Y'] | |
f35016e8 DV |
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 | ||
89fdcedb | 51 | var htx = g.hidden_ctx_; |
f35016e8 DV |
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 | } | |
b941564d | 90 | g.destroy(); // Restore balanced saves and restores. |
6278f6fe | 91 | CanvasAssertions.assertBalancedSaveRestore(htx); |
89fdcedb | 92 | }); |
f35016e8 | 93 | |
89fdcedb | 94 | it('testErrorBarsCorrectColors', function() { |
debdb88d DV |
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'], | |
bfb3e0a4 RK |
106 | axes : { |
107 | x : { | |
108 | drawGrid: false, | |
109 | drawAxis: false, | |
110 | }, | |
111 | y : { | |
112 | drawGrid: false, | |
113 | drawAxis: false, | |
114 | } | |
115 | }, | |
debdb88d DV |
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 | ||
89fdcedb DV |
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 | }); | |
7522b21b | 140 | |
337a79bc DV |
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 | ||
7522b21b DV |
188 | |
189 | // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=392 | |
89fdcedb | 190 | it('testRollingAveragePreservesNaNs', function() { |
7522b21b | 191 | var graph = document.getElementById("graph"); |
a49c164a DE |
192 | var data = |
193 | [ | |
7522b21b DV |
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]] | |
a49c164a DE |
202 | ]; |
203 | var g = new Dygraph(graph, data, | |
204 | { | |
7522b21b DV |
205 | labels: ['x', 'A', 'B' ], |
206 | connectSeparatedPoints: true, | |
207 | drawPoints: true, | |
208 | errorBars: true | |
209 | } | |
210 | ); | |
211 | ||
a49c164a DE |
212 | var in_series = g.dataHandler_.extractSeries(data, 1, g.attributes_); |
213 | ||
89fdcedb DV |
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]); | |
dc910fce DV |
217 | assert(isNaN(in_series[5][1])); |
218 | assert(isNaN(in_series[5][2][0])); | |
219 | assert(isNaN(in_series[5][2][1])); | |
a49c164a DE |
220 | |
221 | var out_series = g.dataHandler_.rollingAverage(in_series, 1, g.attributes_); | |
dc910fce DV |
222 | assert(isNaN(out_series[5][1])); |
223 | assert(isNaN(out_series[5][2][0])); | |
224 | assert(isNaN(out_series[5][2][1])); | |
89fdcedb DV |
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 | }); |