Commit | Line | Data |
---|---|---|
890e2a37 DV |
1 | /** |
2 | * @fileoverview Tests using the "stackedGraph" option. | |
3 | * | |
4 | * @author dan@dygraphs.com (Dan Vanderkam) | |
5 | */ | |
89fdcedb | 6 | describe("stacked", function() { |
890e2a37 | 7 | |
319d0361 | 8 | var _origGetContext = Dygraph.getContext; |
30a5cfc6 | 9 | |
89fdcedb | 10 | beforeEach(function() { |
890e2a37 | 11 | document.body.innerHTML = "<div id='graph'></div>"; |
30a5cfc6 | 12 | Dygraph.getContext = function(canvas) { |
319d0361 | 13 | return new Proxy(_origGetContext(canvas)); |
30a5cfc6 | 14 | } |
89fdcedb | 15 | }); |
890e2a37 | 16 | |
89fdcedb | 17 | afterEach(function() { |
319d0361 | 18 | Dygraph.getContext = _origGetContext; |
89fdcedb | 19 | }); |
890e2a37 | 20 | |
89fdcedb | 21 | it('testCorrectColors', function() { |
890e2a37 DV |
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) |
89fdcedb DV |
57 | assert.deepEqual([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 250)); |
58 | assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 150)); | |
59 | }); | |
9b3d9459 DV |
60 | |
61 | // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358 | |
89fdcedb | 62 | it('testSelectionValues', function() { |
9b3d9459 DV |
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"); | |
89fdcedb | 74 | var g = new Dygraph(graph, data, opts); |
9b3d9459 DV |
75 | |
76 | g.setSelection(0); | |
77 | ||
89fdcedb | 78 | assert.equal("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 | 86 | g.setSelection(0); |
89fdcedb | 87 | assert.equal("0: Y1: 1 Y2: 1", Util.getLegend()); |
fa11f4e4 | 88 | |
9b3d9459 | 89 | g.setSelection(1); |
89fdcedb | 90 | assert.equal("1: Y1: 1 Y2: 1", Util.getLegend()); |
9b3d9459 DV |
91 | |
92 | g.setSelection(0, 'Y2'); | |
89fdcedb DV |
93 | assert.equal("0: Y1: 1 Y2: 1", Util.getLegend()); |
94 | }); | |
12b879f4 DV |
95 | |
96 | // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176 | |
89fdcedb | 97 | it('testDuplicatedXValue', function() { |
12b879f4 DV |
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"); | |
89fdcedb | 114 | var g = new Dygraph(graph, data, opts); |
12b879f4 DV |
115 | |
116 | assert(g.yAxisRange()[1] < 2); | |
117 | ||
89fdcedb DV |
118 | assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250)); |
119 | assert.deepEqual([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. | |
89fdcedb | 124 | it('testNullValues', function() { |
907121a8 VS |
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"); | |
89fdcedb | 138 | var g = new Dygraph(graph, data, opts); |
907121a8 VS |
139 | |
140 | g.setSelection(0); | |
89fdcedb | 141 | assert.equal("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend()); |
907121a8 VS |
142 | |
143 | g.setSelection(1); | |
89fdcedb | 144 | assert.equal("1: Y1: 1 Y3: 1", Util.getLegend()); |
907121a8 VS |
145 | |
146 | g.setSelection(2); | |
89fdcedb | 147 | assert.equal("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend()); |
907121a8 VS |
148 | |
149 | g.setSelection(3); | |
89fdcedb | 150 | assert.equal("3: Y1: 3 Y3: 4", Util.getLegend()); |
907121a8 VS |
151 | |
152 | g.setSelection(4); | |
89fdcedb DV |
153 | assert.equal("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 | |
89fdcedb | 157 | it('testMissingValueAtZero', function() { |
cc87e270 VS |
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"); | |
89fdcedb | 168 | var g = new Dygraph(graph, data, opts); |
cc87e270 VS |
169 | |
170 | g.setSelection(0); | |
89fdcedb | 171 | assert.equal("0: Y2: 1", Util.getLegend()); |
cc87e270 VS |
172 | |
173 | g.setSelection(1); | |
89fdcedb | 174 | assert.equal("1: Y1: 1 Y2: 2", Util.getLegend()); |
cc87e270 VS |
175 | |
176 | g.setSelection(2); | |
89fdcedb DV |
177 | assert.equal("2: Y2: 3", Util.getLegend()); |
178 | }); | |
30a5cfc6 | 179 | |
89fdcedb | 180 | it('testInterpolation', function() { |
30a5cfc6 KW |
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"); | |
89fdcedb | 202 | var g = new Dygraph(graph, data, opts); |
30a5cfc6 KW |
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. | |
89fdcedb DV |
220 | assert.equal(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
221 | assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00')); | |
222 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
30a5cfc6 KW |
223 | |
224 | // Check that the selection returns the original (non-stacked) | |
225 | // values and skips gaps. | |
226 | g.setSelection(1); | |
89fdcedb | 227 | assert.equal("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend()); |
30a5cfc6 KW |
228 | |
229 | g.setSelection(8); | |
89fdcedb | 230 | assert.equal("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend()); |
30a5cfc6 KW |
231 | |
232 | g.setSelection(9); | |
89fdcedb DV |
233 | assert.equal("109: Y1: 1", Util.getLegend()); |
234 | }); | |
30a5cfc6 | 235 | |
89fdcedb | 236 | it('testInterpolationOptions', function() { |
30a5cfc6 KW |
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]; | |
89fdcedb | 258 | var g = new Dygraph(graph, data, opts); |
30a5cfc6 KW |
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 | } | |
89fdcedb | 272 | }); |
0d087599 | 273 | |
89fdcedb | 274 | it('testMultiAxisInterpolation', function() { |
0d087599 JJS |
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"); | |
89fdcedb | 311 | var g = new Dygraph(graph, data, opts); |
0d087599 JJS |
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. | |
89fdcedb DV |
329 | assert.equal(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
330 | assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00')); | |
331 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
0d087599 JJS |
332 | |
333 | // Check that the selection returns the original (non-stacked) | |
334 | // values and skips gaps. | |
335 | g.setSelection(1); | |
89fdcedb | 336 | assert.equal("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend()); |
0d087599 JJS |
337 | |
338 | g.setSelection(8); | |
89fdcedb | 339 | assert.equal("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend()); |
0d087599 JJS |
340 | |
341 | g.setSelection(9); | |
89fdcedb DV |
342 | assert.equal("109: Y1: 1", Util.getLegend()); |
343 | }); | |
344 | ||
345 | }); |