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