805a65adc6cbe83e825326b4506062b84ee52035
[dygraphs.git] / step_plot_per_series.js
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 *
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 *
9 * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
10 */
11
12 import Dygraph from '../../src/dygraph';
13 import * as utils from '../../src/dygraph-utils';
14
15 import Proxy from './Proxy';
16 import CanvasAssertions from './CanvasAssertions';
17
18 describe("step-plot-per-series", function() {
19
20 cleanupAfterEach();
21 useProxyCanvas(utils, Proxy);
22
23 it('testMixedModeStepAndLineFilled', function() {
24 var opts = {
25 width: 480,
26 height: 320,
27 axes : {
28 x : {
29 drawGrid: false,
30 drawAxis: false,
31 },
32 y : {
33 drawGrid: false,
34 drawAxis: false,
35 }
36 },
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
59 var htx = g.hidden_ctx_;
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 }
90 });
91
92 it('testMixedModeStepAndLineStackedAndFilled', function() {
93 var opts = {
94 width: 480,
95 height: 320,
96 axes : {
97 x : {
98 drawGrid: false,
99 drawAxis: false,
100 },
101 y : {
102 drawGrid: false,
103 drawAxis: false,
104 }
105 },
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
130 var htx = g.hidden_ctx_;
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
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);
161 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
162 xy1 = xy2;
163 xy2 = g.toDomCoords(x1, y1base);
164 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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.
167
168 y1base = y1;
169 y2base = y1;
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);
185 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
186 xy1 = xy2;
187 xy2 = g.toDomCoords(x1, y1base);
188 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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.
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);
214 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
215 xy1 = xy2;
216 xy2 = g.toDomCoords(x1, y1base);
217 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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.
220
221 y1base = y1;
222 y2base = y1;
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);
238 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
239 xy1 = xy2;
240 xy2 = g.toDomCoords(x1, y1base);
241 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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.
244 }
245 });
246
247 it('testMixedModeStepAndLineErrorBars', function() {
248 var opts = {
249 width: 480,
250 height: 320,
251 axes : {
252 x : {
253 drawGrid: false,
254 drawAxis: false,
255 },
256 y : {
257 drawGrid: false,
258 drawAxis: false,
259 }
260 },
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
280 var htx = g.hidden_ctx_;
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
298 var xy1 = g.toDomCoords(x1, y1_bottom);
299 var xy2 = g.toDomCoords(x2, y1_bottom);
300 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
301
302 // Top line
303 xy1 = g.toDomCoords(x1, y1_top);
304 xy2 = g.toDomCoords(x2, y1_top);
305 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
306
307 // Middle line
308 xy1 = g.toDomCoords(x1, y1_middle);
309 xy2 = g.toDomCoords(x2, y1_middle);
310 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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);
321 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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.
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
344 });
345
346 it('testMixedModeStepAndLineCustomBars', function() {
347 var opts = {
348 width: 480,
349 height: 320,
350 axes : {
351 x : {
352 drawGrid: false,
353 drawAxis: false,
354 },
355 y : {
356 drawGrid: false,
357 drawAxis: false,
358 }
359 },
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
378 var htx = g.hidden_ctx_;
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
398 var xy1 = g.toDomCoords(x1, y1_bottom);
399 var xy2 = g.toDomCoords(x2, y1_bottom);
400 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
401
402 // Top line
403 xy1 = g.toDomCoords(x1, y1_top);
404 xy2 = g.toDomCoords(x2, y1_top);
405 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
406
407 // Middle line
408 xy1 = g.toDomCoords(x1, y1_middle);
409 xy2 = g.toDomCoords(x2, y1_middle);
410 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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);
421 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
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.
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 }
443 });
444
445 });