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.
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
9 * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
11 describe("step-plot-per-series", function() {
13 beforeEach(function() {
14 document
.body
.innerHTML
= "<div id='graph'></div>";
17 var origFunc
= Dygraph
.getContext
;
19 beforeEach(function() {
20 document
.body
.innerHTML
= "<div id='graph'></div>";
21 Dygraph
.getContext
= function(canvas
) {
22 return new Proxy(origFunc(canvas
));
26 afterEach(function() {
27 Dygraph
.getContext
= origFunc
;
30 it('testMixedModeStepAndLineFilled', function() {
45 labels
: ["X", "Idle", "Used"],
47 Idle
: {stepPlot
: false},
48 Used
: {stepPlot
: true}
63 var graph
= document
.getElementById("graph");
64 var g
= new Dygraph(graph
, data
, opts
);
66 var htx
= g
.hidden_ctx_
;
71 for (var i
= 0; i
< data
.length
- 1; i
++) {
74 var x2
= data
[i
+ 1][0];
77 var y2
= data
[i
+ 1][1];
79 // First series (line)
80 var xy1
= g
.toDomCoords(x1
, y1
);
81 var xy2
= g
.toDomCoords(x2
, y2
);
82 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
87 // Seconds series (step)
89 xy1
= g
.toDomCoords(x1
, y1
);
90 xy2
= g
.toDomCoords(x2
, y1
);
91 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
93 xy1
= g
.toDomCoords(x2
, y1
);
94 xy2
= g
.toDomCoords(x2
, y2
);
95 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
99 it('testMixedModeStepAndLineStackedAndFilled', function() {
114 labels
: ["X", "Idle", "Used", "NotUsed", "Active"],
116 Idle
: {stepPlot
: false},
117 Used
: {stepPlot
: true},
118 NotUsed
: {stepPlot
: false},
119 Active
: {stepPlot
: true}
134 var graph
= document
.getElementById("graph");
135 var g
= new Dygraph(graph
, data
, opts
);
137 var htx
= g
.hidden_ctx_
;
142 for (var i
= 0; i
< data
.length
- 1; i
++) {
145 var x2
= data
[i
+ 1][0];
149 var y2
= data
[i
+ 1][4];
151 // Fourth series (step)
154 var xy1
= g
.toDomCoords(x1
, y1
);
155 var xy2
= g
.toDomCoords(x2
, y1
);
156 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
158 xy1
= g
.toDomCoords(x2
, y1
);
159 xy2
= g
.toDomCoords(x2
, y2
);
160 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
162 // Test edges of areas (also drawn by dygraphs as lines)
163 xy1
= g
.toDomCoords(x1
, y1
);
164 xy2
= g
.toDomCoords(x2
, y1
);
165 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
167 xy2
= g
.toDomCoords(x2
, y2base
);
168 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
170 xy2
= g
.toDomCoords(x1
, y1base
);
171 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
172 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
173 // But a rectangle is completely tested with three of its four edges.
178 y2
+= data
[i
+ 1][3];
180 // Third series (line)
182 xy1
= g
.toDomCoords(x1
, y1
);
183 xy2
= g
.toDomCoords(x2
, y2
);
184 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
186 // Test edges of areas (also drawn by dygraphs as lines)
187 xy1
= g
.toDomCoords(x1
, y1
);
188 xy2
= g
.toDomCoords(x2
, y2
);
189 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
191 xy2
= g
.toDomCoords(x2
, y2base
);
192 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
194 xy2
= g
.toDomCoords(x1
, y1base
);
195 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
196 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
197 // But a rectangle is completely tested with three of its four edges.
202 y2
+= data
[i
+ 1][2];
204 // Second series (step)
207 xy1
= g
.toDomCoords(x1
, y1
);
208 xy2
= g
.toDomCoords(x2
, y1
);
209 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
211 xy1
= g
.toDomCoords(x2
, y1
);
212 xy2
= g
.toDomCoords(x2
, y2
);
213 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
215 // Test edges of areas (also drawn by dygraphs as lines)
216 xy1
= g
.toDomCoords(x1
, y1
);
217 xy2
= g
.toDomCoords(x2
, y1
);
218 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
220 xy2
= g
.toDomCoords(x2
, y2base
);
221 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
223 xy2
= g
.toDomCoords(x1
, y1base
);
224 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
225 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
226 // But a rectangle is completely tested with three of its four edges.
231 y2
+= data
[i
+ 1][1];
233 // First series (line)
235 xy1
= g
.toDomCoords(x1
, y1
);
236 xy2
= g
.toDomCoords(x2
, y2
);
237 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
239 // Test edges of areas (also drawn by dygraphs as lines)
240 xy1
= g
.toDomCoords(x1
, y1
);
241 xy2
= g
.toDomCoords(x2
, y2
);
242 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
244 xy2
= g
.toDomCoords(x2
, y2base
);
245 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
247 xy2
= g
.toDomCoords(x1
, y1base
);
248 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
249 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
250 // But a rectangle is completely tested with three of its four edges.
254 it('testMixedModeStepAndLineErrorBars', function() {
270 labels
: ["X", "Data1", "Data2"],
272 Data1
: {stepPlot
: true},
273 Data2
: {stepPlot
: false}
277 [1, [75, 2], [50, 3]],
278 [2, [70, 5], [90, 4]],
279 [3, [80, 7], [112, 5]],
280 [4, [55, 3], [100, 2]],
281 [5, [69, 4], [85, 6]]
284 var graph
= document
.getElementById("graph");
285 var g
= new Dygraph(graph
, data
, opts
);
287 var htx
= g
.hidden_ctx_
;
291 // Test first series (step)
292 for (var i
= 0; i
< data
.length
- 1; i
++) {
294 var x2
= data
[i
+ 1][0];
296 var y1_middle
= data
[i
][1][0];
297 var y2_middle
= data
[i
+ 1][1][0];
299 var y1_top
= y1_middle
+ data
[i
][1][1];
300 var y2_top
= y2_middle
+ data
[i
+ 1][1][1];
302 var y1_bottom
= y1_middle
- data
[i
][1][1];
303 var y2_bottom
= y2_middle
- data
[i
+ 1][1][1];
305 var xy1
= g
.toDomCoords(x1
, y1_bottom
);
306 var xy2
= g
.toDomCoords(x2
, y1_bottom
);
307 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
310 xy1
= g
.toDomCoords(x1
, y1_top
);
311 xy2
= g
.toDomCoords(x2
, y1_top
);
312 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
315 xy1
= g
.toDomCoords(x1
, y1_middle
);
316 xy2
= g
.toDomCoords(x2
, y1_middle
);
317 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
319 // Test edges of error bar areas(also drawn by dygraphs as lines)
320 xy1
= g
.toDomCoords(x1
, y1_top
);
321 xy2
= g
.toDomCoords(x2
, y1_top
);
322 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
324 xy2
= g
.toDomCoords(x2
, y1_bottom
);
325 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
327 xy2
= g
.toDomCoords(x1
, y1_bottom
);
328 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
329 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
330 // But a rectangle is completely tested with three of its four edges.
333 // Test second series (line)
334 for (var i
= 0; i
< data
.length
- 1; i
++) {
336 var xy1
= g
.toDomCoords(data
[i
][0], (data
[i
][2][0] - data
[i
][2][1]));
337 var xy2
= g
.toDomCoords(data
[i
+ 1][0], (data
[i
+ 1][2][0] - data
[i
+ 1][2][1]));
338 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
341 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0] + data
[i
][2][1]);
342 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0] + data
[i
+ 1][2][1]);
343 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
346 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0]);
347 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0]);
348 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
353 it('testMixedModeStepAndLineCustomBars', function() {
368 labels
: ["X", "Data1", "Data2"],
370 Data1
: {stepPlot
: true},
371 Data2
: {stepPlot
: false}
375 [1, [73, 75, 78], [50, 55, 70]],
376 [2, [65, 70, 75], [83, 91, 99]],
377 [3, [75, 85, 90], [98, 107, 117]],
378 [4, [55, 58, 61], [93, 102, 105]],
379 [5, [69, 73, 85], [80, 85, 87]]
382 var graph
= document
.getElementById("graph");
383 var g
= new Dygraph(graph
, data
, opts
);
385 var htx
= g
.hidden_ctx_
;
389 // Test first series (step)
390 for (var i
= 0; i
< data
.length
- 1; i
++) {
393 var x2
= data
[i
+ 1][0];
395 var y1_middle
= data
[i
][1][1];
396 var y2_middle
= data
[i
+ 1][1][1];
398 var y1_top
= data
[i
][1][2];
399 var y2_top
= data
[i
+ 1][1][2];
401 var y1_bottom
= data
[i
][1][0];
402 var y2_bottom
= data
[i
+ 1][1][0];
405 var xy1
= g
.toDomCoords(x1
, y1_bottom
);
406 var xy2
= g
.toDomCoords(x2
, y1_bottom
);
407 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
410 xy1
= g
.toDomCoords(x1
, y1_top
);
411 xy2
= g
.toDomCoords(x2
, y1_top
);
412 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
415 xy1
= g
.toDomCoords(x1
, y1_middle
);
416 xy2
= g
.toDomCoords(x2
, y1_middle
);
417 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
419 // Test edges of custom bar areas(also drawn by dygraphs as lines)
420 xy1
= g
.toDomCoords(x1
, y1_top
);
421 xy2
= g
.toDomCoords(x2
, y1_top
);
422 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
424 xy2
= g
.toDomCoords(x2
, y1_bottom
);
425 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
427 xy2
= g
.toDomCoords(x1
, y1_bottom
);
428 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
429 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
430 // But a rectangle is completely tested with three of its four edges.
433 // Test second series (line)
434 for (var i
= 0; i
< data
.length
- 1; i
++) {
436 var xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0]);
437 var xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0]);
438 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
441 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][2]);
442 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][2]);
443 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
446 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][1]);
447 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][1]);
448 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);