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