Commit | Line | Data |
---|---|---|
4fa81db5 | 1 | /** |
2 | * @fileoverview Test cases for the option "stepPlot" especially for the scenario where the option is not set for the whole graph but for single series. | |
3 | * | |
20b87d28 DV |
4 | * TODO(danvk): delete this test once dpxdt screenshot tests are part of the |
5 | * main dygraphs repo. The tests have extremely specific expectations about | |
6 | * how drawing is performed. It's more realistic to test the resulting | |
7 | * pixels. | |
8 | * | |
4fa81db5 | 9 | * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG) |
10 | */ | |
4fa81db5 | 11 | |
e8c70e4e DV |
12 | import Dygraph from '../../src/dygraph'; |
13 | import * as utils from '../../src/dygraph-utils'; | |
4fa81db5 | 14 | |
e8c70e4e DV |
15 | import Proxy from './Proxy'; |
16 | import CanvasAssertions from './CanvasAssertions'; | |
5546c2e3 | 17 | |
e8c70e4e | 18 | describe("step-plot-per-series", function() { |
4fa81db5 | 19 | |
e8c70e4e DV |
20 | cleanupAfterEach(); |
21 | useProxyCanvas(utils, Proxy); | |
4fa81db5 | 22 | |
89fdcedb | 23 | it('testMixedModeStepAndLineFilled', function() { |
4fa81db5 | 24 | var opts = { |
25 | width: 480, | |
26 | height: 320, | |
bfb3e0a4 RK |
27 | axes : { |
28 | x : { | |
29 | drawGrid: false, | |
30 | drawAxis: false, | |
31 | }, | |
32 | y : { | |
33 | drawGrid: false, | |
34 | drawAxis: false, | |
35 | } | |
36 | }, | |
4fa81db5 | 37 | errorBars: false, |
38 | labels: ["X", "Idle", "Used"], | |
39 | series: { | |
40 | Idle: {stepPlot: false}, | |
41 | Used: {stepPlot: true} | |
42 | }, | |
43 | fillGraph: true, | |
44 | stackedGraph: false, | |
45 | includeZero: true | |
46 | }; | |
47 | ||
48 | var data = [ | |
49 | [1, 70,30], | |
50 | [2, 12,88], | |
51 | [3, 88,12], | |
52 | [4, 63,37], | |
53 | [5, 35,65] | |
54 | ]; | |
55 | ||
56 | var graph = document.getElementById("graph"); | |
57 | var g = new Dygraph(graph, data, opts); | |
58 | ||
89fdcedb | 59 | var htx = g.hidden_ctx_; |
4fa81db5 | 60 | |
61 | var attrs = {}; | |
62 | ||
63 | ||
64 | for (var i = 0; i < data.length - 1; i++) { | |
65 | ||
66 | var x1 = data[i][0]; | |
67 | var x2 = data[i + 1][0]; | |
68 | ||
69 | var y1 = data[i][1]; | |
70 | var y2 = data[i + 1][1]; | |
71 | ||
72 | // First series (line) | |
73 | var xy1 = g.toDomCoords(x1, y1); | |
74 | var xy2 = g.toDomCoords(x2, y2); | |
75 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
76 | ||
77 | y1 = data[i][2]; | |
78 | y2 = data[i + 1][2]; | |
79 | ||
80 | // Seconds series (step) | |
81 | // Horizontal line | |
82 | xy1 = g.toDomCoords(x1, y1); | |
83 | xy2 = g.toDomCoords(x2, y1); | |
84 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
85 | // Vertical line | |
86 | xy1 = g.toDomCoords(x2, y1); | |
87 | xy2 = g.toDomCoords(x2, y2); | |
88 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
89 | } | |
89fdcedb | 90 | }); |
4fa81db5 | 91 | |
89fdcedb | 92 | it('testMixedModeStepAndLineStackedAndFilled', function() { |
4fa81db5 | 93 | var opts = { |
94 | width: 480, | |
95 | height: 320, | |
bfb3e0a4 RK |
96 | axes : { |
97 | x : { | |
98 | drawGrid: false, | |
99 | drawAxis: false, | |
100 | }, | |
101 | y : { | |
102 | drawGrid: false, | |
103 | drawAxis: false, | |
104 | } | |
105 | }, | |
4fa81db5 | 106 | errorBars: false, |
107 | labels: ["X", "Idle", "Used", "NotUsed", "Active"], | |
108 | series: { | |
109 | Idle: {stepPlot: false}, | |
110 | Used: {stepPlot: true}, | |
111 | NotUsed: {stepPlot: false}, | |
112 | Active: {stepPlot: true} | |
113 | }, | |
114 | fillGraph: true, | |
115 | stackedGraph: true, | |
116 | includeZero: true | |
117 | }; | |
118 | ||
119 | var data = [ | |
120 | [1, 60,30,5,5], | |
121 | [2, 12,73,5,10], | |
122 | [3, 38,12,30,20], | |
123 | [4, 50,17,23,10], | |
124 | [5, 35,25,35,5] | |
125 | ]; | |
126 | ||
127 | var graph = document.getElementById("graph"); | |
128 | var g = new Dygraph(graph, data, opts); | |
129 | ||
89fdcedb | 130 | var htx = g.hidden_ctx_; |
4fa81db5 | 131 | |
132 | var attrs = {}; | |
133 | ||
134 | ||
135 | for (var i = 0; i < data.length - 1; i++) { | |
136 | ||
137 | var x1 = data[i][0]; | |
138 | var x2 = data[i + 1][0]; | |
139 | var y1base = 0; | |
140 | var y2base = 0; | |
141 | var y1 = data[i][4]; | |
142 | var y2 = data[i + 1][4]; | |
143 | ||
4fa81db5 | 144 | // Fourth series (step) |
145 | // Test lines | |
146 | // Horizontal line | |
147 | var xy1 = g.toDomCoords(x1, y1); | |
148 | var xy2 = g.toDomCoords(x2, y1); | |
149 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
150 | // Vertical line | |
151 | xy1 = g.toDomCoords(x2, y1); | |
152 | xy2 = g.toDomCoords(x2, y2); | |
153 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
154 | ||
155 | // Test edges of areas (also drawn by dygraphs as lines) | |
156 | xy1 = g.toDomCoords(x1, y1); | |
157 | xy2 = g.toDomCoords(x2, y1); | |
158 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
159 | xy1 = xy2; | |
160 | xy2 = g.toDomCoords(x2, y2base); | |
20b87d28 | 161 | // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); |
4fa81db5 | 162 | xy1 = xy2; |
163 | xy2 = g.toDomCoords(x1, y1base); | |
164 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
1654747c | 165 | // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath. |
166 | // But a rectangle is completely tested with three of its four edges. | |
4fa81db5 | 167 | |
168 | y1base = y1; | |
1654747c | 169 | y2base = y1; |
4fa81db5 | 170 | y1 += data[i][3]; |
171 | y2 += data[i + 1][3]; | |
172 | ||
173 | // Third series (line) | |
174 | // Test lines | |
175 | xy1 = g.toDomCoords(x1, y1); | |
176 | xy2 = g.toDomCoords(x2, y2); | |
177 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
178 | ||
179 | // Test edges of areas (also drawn by dygraphs as lines) | |
180 | xy1 = g.toDomCoords(x1, y1); | |
181 | xy2 = g.toDomCoords(x2, y2); | |
182 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
183 | xy1 = xy2; | |
184 | xy2 = g.toDomCoords(x2, y2base); | |
20b87d28 | 185 | // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); |
4fa81db5 | 186 | xy1 = xy2; |
187 | xy2 = g.toDomCoords(x1, y1base); | |
188 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
1654747c | 189 | // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath. |
190 | // But a rectangle is completely tested with three of its four edges. | |
4fa81db5 | 191 | |
192 | y1base = y1; | |
193 | y2base = y2; | |
194 | y1 += data[i][2]; | |
195 | y2 += data[i + 1][2]; | |
196 | ||
197 | // Second series (step) | |
198 | // Test lines | |
199 | // Horizontal line | |
200 | xy1 = g.toDomCoords(x1, y1); | |
201 | xy2 = g.toDomCoords(x2, y1); | |
202 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
203 | // Vertical line | |
204 | xy1 = g.toDomCoords(x2, y1); | |
205 | xy2 = g.toDomCoords(x2, y2); | |
206 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
207 | ||
208 | // Test edges of areas (also drawn by dygraphs as lines) | |
209 | xy1 = g.toDomCoords(x1, y1); | |
210 | xy2 = g.toDomCoords(x2, y1); | |
211 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
212 | xy1 = xy2; | |
213 | xy2 = g.toDomCoords(x2, y2base); | |
20b87d28 | 214 | // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); |
4fa81db5 | 215 | xy1 = xy2; |
216 | xy2 = g.toDomCoords(x1, y1base); | |
217 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
1654747c | 218 | // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath. |
219 | // But a rectangle is completely tested with three of its four edges. | |
4fa81db5 | 220 | |
221 | y1base = y1; | |
1654747c | 222 | y2base = y1; |
4fa81db5 | 223 | y1 += data[i][1]; |
224 | y2 += data[i + 1][1]; | |
225 | ||
226 | // First series (line) | |
227 | // Test lines | |
228 | xy1 = g.toDomCoords(x1, y1); | |
229 | xy2 = g.toDomCoords(x2, y2); | |
230 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
231 | ||
232 | // Test edges of areas (also drawn by dygraphs as lines) | |
233 | xy1 = g.toDomCoords(x1, y1); | |
234 | xy2 = g.toDomCoords(x2, y2); | |
235 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
236 | xy1 = xy2; | |
237 | xy2 = g.toDomCoords(x2, y2base); | |
20b87d28 | 238 | // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); |
4fa81db5 | 239 | xy1 = xy2; |
240 | xy2 = g.toDomCoords(x1, y1base); | |
241 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
1654747c | 242 | // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath. |
243 | // But a rectangle is completely tested with three of its four edges. | |
4fa81db5 | 244 | } |
89fdcedb | 245 | }); |
4fa81db5 | 246 | |
89fdcedb | 247 | it('testMixedModeStepAndLineErrorBars', function() { |
4fa81db5 | 248 | var opts = { |
249 | width: 480, | |
250 | height: 320, | |
bfb3e0a4 RK |
251 | axes : { |
252 | x : { | |
253 | drawGrid: false, | |
254 | drawAxis: false, | |
255 | }, | |
256 | y : { | |
257 | drawGrid: false, | |
258 | drawAxis: false, | |
259 | } | |
260 | }, | |
4fa81db5 | 261 | errorBars: true, |
262 | sigma: 1, | |
263 | labels: ["X", "Data1", "Data2"], | |
264 | series: { | |
265 | Data1: {stepPlot: true}, | |
266 | Data2: {stepPlot: false} | |
267 | } | |
268 | }; | |
269 | var data = [ | |
270 | [1, [75, 2], [50, 3]], | |
271 | [2, [70, 5], [90, 4]], | |
272 | [3, [80, 7], [112, 5]], | |
273 | [4, [55, 3], [100, 2]], | |
274 | [5, [69, 4], [85, 6]] | |
275 | ]; | |
276 | ||
277 | var graph = document.getElementById("graph"); | |
278 | var g = new Dygraph(graph, data, opts); | |
279 | ||
89fdcedb | 280 | var htx = g.hidden_ctx_; |
4fa81db5 | 281 | |
282 | var attrs = {}; | |
283 | ||
284 | // Test first series (step) | |
285 | for (var i = 0; i < data.length - 1; i++) { | |
286 | var x1 = data[i][0]; | |
287 | var x2 = data[i + 1][0]; | |
288 | ||
289 | var y1_middle = data[i][1][0]; | |
290 | var y2_middle = data[i + 1][1][0]; | |
291 | ||
292 | var y1_top = y1_middle + data[i][1][1]; | |
293 | var y2_top = y2_middle + data[i + 1][1][1]; | |
294 | ||
295 | var y1_bottom = y1_middle - data[i][1][1]; | |
296 | var y2_bottom = y2_middle - data[i + 1][1][1]; | |
297 | // Bottom line | |
4fa81db5 | 298 | var xy1 = g.toDomCoords(x1, y1_bottom); |
299 | var xy2 = g.toDomCoords(x2, y1_bottom); | |
300 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
4fa81db5 | 301 | |
302 | // Top line | |
4fa81db5 | 303 | xy1 = g.toDomCoords(x1, y1_top); |
304 | xy2 = g.toDomCoords(x2, y1_top); | |
305 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
4fa81db5 | 306 | |
307 | // Middle line | |
4fa81db5 | 308 | xy1 = g.toDomCoords(x1, y1_middle); |
309 | xy2 = g.toDomCoords(x2, y1_middle); | |
310 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
1654747c | 311 | |
312 | // Test edges of error bar areas(also drawn by dygraphs as lines) | |
313 | xy1 = g.toDomCoords(x1, y1_top); | |
314 | xy2 = g.toDomCoords(x2, y1_top); | |
315 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
316 | xy1 = xy2; | |
317 | xy2 = g.toDomCoords(x2, y1_bottom); | |
318 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
319 | xy1 = xy2; | |
320 | xy2 = g.toDomCoords(x1, y1_bottom); | |
4fa81db5 | 321 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); |
1654747c | 322 | // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath. |
323 | // But a rectangle is completely tested with three of its four edges. | |
4fa81db5 | 324 | } |
325 | ||
326 | // Test second series (line) | |
327 | for (var i = 0; i < data.length - 1; i++) { | |
328 | // bottom line | |
329 | var xy1 = g.toDomCoords(data[i][0], (data[i][2][0] - data[i][2][1])); | |
330 | var xy2 = g.toDomCoords(data[i + 1][0], (data[i + 1][2][0] - data[i + 1][2][1])); | |
331 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
332 | ||
333 | // top line | |
334 | xy1 = g.toDomCoords(data[i][0], data[i][2][0] + data[i][2][1]); | |
335 | xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0] + data[i + 1][2][1]); | |
336 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
337 | ||
338 | // middle line | |
339 | xy1 = g.toDomCoords(data[i][0], data[i][2][0]); | |
340 | xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]); | |
341 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
342 | } | |
343 | ||
89fdcedb | 344 | }); |
4fa81db5 | 345 | |
89fdcedb | 346 | it('testMixedModeStepAndLineCustomBars', function() { |
4fa81db5 | 347 | var opts = { |
348 | width: 480, | |
349 | height: 320, | |
bfb3e0a4 RK |
350 | axes : { |
351 | x : { | |
352 | drawGrid: false, | |
353 | drawAxis: false, | |
354 | }, | |
355 | y : { | |
356 | drawGrid: false, | |
357 | drawAxis: false, | |
358 | } | |
359 | }, | |
4fa81db5 | 360 | customBars: true, |
361 | labels: ["X", "Data1", "Data2"], | |
362 | series: { | |
363 | Data1: {stepPlot: true}, | |
364 | Data2: {stepPlot: false} | |
365 | } | |
366 | }; | |
367 | var data = [ | |
368 | [1, [73, 75, 78], [50, 55, 70]], | |
369 | [2, [65, 70, 75], [83, 91, 99]], | |
370 | [3, [75, 85, 90], [98, 107, 117]], | |
371 | [4, [55, 58, 61], [93, 102, 105]], | |
372 | [5, [69, 73, 85], [80, 85, 87]] | |
373 | ]; | |
374 | ||
375 | var graph = document.getElementById("graph"); | |
376 | var g = new Dygraph(graph, data, opts); | |
377 | ||
89fdcedb | 378 | var htx = g.hidden_ctx_; |
4fa81db5 | 379 | |
380 | var attrs = {}; | |
381 | ||
382 | // Test first series (step) | |
383 | for (var i = 0; i < data.length - 1; i++) { | |
384 | ||
385 | var x1 = data[i][0]; | |
386 | var x2 = data[i + 1][0]; | |
387 | ||
388 | var y1_middle = data[i][1][1]; | |
389 | var y2_middle = data[i + 1][1][1]; | |
390 | ||
391 | var y1_top = data[i][1][2]; | |
392 | var y2_top = data[i + 1][1][2]; | |
393 | ||
394 | var y1_bottom = data[i][1][0]; | |
395 | var y2_bottom = data[i + 1][1][0]; | |
396 | ||
397 | // Bottom line | |
4fa81db5 | 398 | var xy1 = g.toDomCoords(x1, y1_bottom); |
399 | var xy2 = g.toDomCoords(x2, y1_bottom); | |
400 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
4fa81db5 | 401 | |
402 | // Top line | |
4fa81db5 | 403 | xy1 = g.toDomCoords(x1, y1_top); |
404 | xy2 = g.toDomCoords(x2, y1_top); | |
405 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
4fa81db5 | 406 | |
407 | // Middle line | |
4fa81db5 | 408 | xy1 = g.toDomCoords(x1, y1_middle); |
409 | xy2 = g.toDomCoords(x2, y1_middle); | |
410 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
1654747c | 411 | |
412 | // Test edges of custom bar areas(also drawn by dygraphs as lines) | |
413 | xy1 = g.toDomCoords(x1, y1_top); | |
414 | xy2 = g.toDomCoords(x2, y1_top); | |
415 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
416 | xy1 = xy2; | |
417 | xy2 = g.toDomCoords(x2, y1_bottom); | |
418 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
419 | xy1 = xy2; | |
420 | xy2 = g.toDomCoords(x1, y1_bottom); | |
4fa81db5 | 421 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); |
1654747c | 422 | // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath. |
423 | // But a rectangle is completely tested with three of its four edges. | |
4fa81db5 | 424 | } |
425 | ||
426 | // Test second series (line) | |
427 | for (var i = 0; i < data.length - 1; i++) { | |
428 | // Bottom line | |
429 | var xy1 = g.toDomCoords(data[i][0], data[i][2][0]); | |
430 | var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]); | |
431 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
432 | ||
433 | // Top line | |
434 | xy1 = g.toDomCoords(data[i][0], data[i][2][2]); | |
435 | xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][2]); | |
436 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
437 | ||
438 | // Middle line | |
439 | xy1 = g.toDomCoords(data[i][0], data[i][2][1]); | |
440 | xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][1]); | |
441 | CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs); | |
442 | } | |
89fdcedb DV |
443 | }); |
444 | ||
445 | }); |