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 var StepTestCase
= TestCase("step-plot-per-series");
13 StepTestCase
.prototype.setUp
= function() {
14 document
.body
.innerHTML
= "<div id='graph'></div>";
17 StepTestCase
.origFunc
= Dygraph
.getContext
;
19 StepTestCase
.prototype.setUp
= function() {
20 document
.body
.innerHTML
= "<div id='graph'></div>";
21 Dygraph
.getContext
= function(canvas
) {
22 return new Proxy(StepTestCase
.origFunc(canvas
));
26 StepTestCase
.prototype.tearDown
= function() {
27 Dygraph
.getContext
= StepTestCase
.origFunc
;
30 StepTestCase
.prototype.testMixedModeStepAndLineFilled
= function() {
39 labels
: ["X", "Idle", "Used"],
41 Idle
: {stepPlot
: false},
42 Used
: {stepPlot
: true}
57 var graph
= document
.getElementById("graph");
58 var g
= new Dygraph(graph
, data
, opts
);
65 for (var i
= 0; i
< data
.length
- 1; i
++) {
68 var x2
= data
[i
+ 1][0];
71 var y2
= data
[i
+ 1][1];
73 // First series (line)
74 var xy1
= g
.toDomCoords(x1
, y1
);
75 var xy2
= g
.toDomCoords(x2
, y2
);
76 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
81 // Seconds series (step)
83 xy1
= g
.toDomCoords(x1
, y1
);
84 xy2
= g
.toDomCoords(x2
, y1
);
85 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
87 xy1
= g
.toDomCoords(x2
, y1
);
88 xy2
= g
.toDomCoords(x2
, y2
);
89 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
93 StepTestCase
.prototype.testMixedModeStepAndLineStackedAndFilled
= function() {
102 labels
: ["X", "Idle", "Used", "NotUsed", "Active"],
104 Idle
: {stepPlot
: false},
105 Used
: {stepPlot
: true},
106 NotUsed
: {stepPlot
: false},
107 Active
: {stepPlot
: true}
122 var graph
= document
.getElementById("graph");
123 var g
= new Dygraph(graph
, data
, opts
);
130 for (var i
= 0; i
< data
.length
- 1; i
++) {
133 var x2
= data
[i
+ 1][0];
137 var y2
= data
[i
+ 1][4];
139 // Fourth series (step)
142 var xy1
= g
.toDomCoords(x1
, y1
);
143 var xy2
= g
.toDomCoords(x2
, y1
);
144 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
146 xy1
= g
.toDomCoords(x2
, y1
);
147 xy2
= g
.toDomCoords(x2
, y2
);
148 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
150 // Test edges of areas (also drawn by dygraphs as lines)
151 xy1
= g
.toDomCoords(x1
, y1
);
152 xy2
= g
.toDomCoords(x2
, y1
);
153 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
155 xy2
= g
.toDomCoords(x2
, y2base
);
156 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
158 xy2
= g
.toDomCoords(x1
, y1base
);
159 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
160 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
161 // But a rectangle is completely tested with three of its four edges.
166 y2
+= data
[i
+ 1][3];
168 // Third series (line)
170 xy1
= g
.toDomCoords(x1
, y1
);
171 xy2
= g
.toDomCoords(x2
, y2
);
172 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
174 // Test edges of areas (also drawn by dygraphs as lines)
175 xy1
= g
.toDomCoords(x1
, y1
);
176 xy2
= g
.toDomCoords(x2
, y2
);
177 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
179 xy2
= g
.toDomCoords(x2
, y2base
);
180 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
182 xy2
= g
.toDomCoords(x1
, y1base
);
183 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
184 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
185 // But a rectangle is completely tested with three of its four edges.
190 y2
+= data
[i
+ 1][2];
192 // Second series (step)
195 xy1
= g
.toDomCoords(x1
, y1
);
196 xy2
= g
.toDomCoords(x2
, y1
);
197 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
199 xy1
= g
.toDomCoords(x2
, y1
);
200 xy2
= g
.toDomCoords(x2
, y2
);
201 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
203 // Test edges of areas (also drawn by dygraphs as lines)
204 xy1
= g
.toDomCoords(x1
, y1
);
205 xy2
= g
.toDomCoords(x2
, y1
);
206 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
208 xy2
= g
.toDomCoords(x2
, y2base
);
209 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
211 xy2
= g
.toDomCoords(x1
, y1base
);
212 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
213 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
214 // But a rectangle is completely tested with three of its four edges.
219 y2
+= data
[i
+ 1][1];
221 // First series (line)
223 xy1
= g
.toDomCoords(x1
, y1
);
224 xy2
= g
.toDomCoords(x2
, y2
);
225 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
227 // Test edges of areas (also drawn by dygraphs as lines)
228 xy1
= g
.toDomCoords(x1
, y1
);
229 xy2
= g
.toDomCoords(x2
, y2
);
230 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
232 xy2
= g
.toDomCoords(x2
, y2base
);
233 // CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
235 xy2
= g
.toDomCoords(x1
, y1base
);
236 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
237 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
238 // But a rectangle is completely tested with three of its four edges.
242 StepTestCase
.prototype.testMixedModeStepAndLineErrorBars
= function() {
252 labels
: ["X", "Data1", "Data2"],
254 Data1
: {stepPlot
: true},
255 Data2
: {stepPlot
: false}
259 [1, [75, 2], [50, 3]],
260 [2, [70, 5], [90, 4]],
261 [3, [80, 7], [112, 5]],
262 [4, [55, 3], [100, 2]],
263 [5, [69, 4], [85, 6]]
266 var graph
= document
.getElementById("graph");
267 var g
= new Dygraph(graph
, data
, opts
);
273 // Test first series (step)
274 for (var i
= 0; i
< data
.length
- 1; i
++) {
276 var x2
= data
[i
+ 1][0];
278 var y1_middle
= data
[i
][1][0];
279 var y2_middle
= data
[i
+ 1][1][0];
281 var y1_top
= y1_middle
+ data
[i
][1][1];
282 var y2_top
= y2_middle
+ data
[i
+ 1][1][1];
284 var y1_bottom
= y1_middle
- data
[i
][1][1];
285 var y2_bottom
= y2_middle
- data
[i
+ 1][1][1];
287 var xy1
= g
.toDomCoords(x1
, y1_bottom
);
288 var xy2
= g
.toDomCoords(x2
, y1_bottom
);
289 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
292 xy1
= g
.toDomCoords(x1
, y1_top
);
293 xy2
= g
.toDomCoords(x2
, y1_top
);
294 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
297 xy1
= g
.toDomCoords(x1
, y1_middle
);
298 xy2
= g
.toDomCoords(x2
, y1_middle
);
299 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
301 // Test edges of error bar areas(also drawn by dygraphs as lines)
302 xy1
= g
.toDomCoords(x1
, y1_top
);
303 xy2
= g
.toDomCoords(x2
, y1_top
);
304 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
306 xy2
= g
.toDomCoords(x2
, y1_bottom
);
307 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
309 xy2
= g
.toDomCoords(x1
, y1_bottom
);
310 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
311 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
312 // But a rectangle is completely tested with three of its four edges.
315 // Test second series (line)
316 for (var i
= 0; i
< data
.length
- 1; i
++) {
318 var xy1
= g
.toDomCoords(data
[i
][0], (data
[i
][2][0] - data
[i
][2][1]));
319 var xy2
= g
.toDomCoords(data
[i
+ 1][0], (data
[i
+ 1][2][0] - data
[i
+ 1][2][1]));
320 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
323 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0] + data
[i
][2][1]);
324 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0] + data
[i
+ 1][2][1]);
325 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
328 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0]);
329 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0]);
330 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
335 StepTestCase
.prototype.testMixedModeStepAndLineCustomBars
= function() {
344 labels
: ["X", "Data1", "Data2"],
346 Data1
: {stepPlot
: true},
347 Data2
: {stepPlot
: false}
351 [1, [73, 75, 78], [50, 55, 70]],
352 [2, [65, 70, 75], [83, 91, 99]],
353 [3, [75, 85, 90], [98, 107, 117]],
354 [4, [55, 58, 61], [93, 102, 105]],
355 [5, [69, 73, 85], [80, 85, 87]]
358 var graph
= document
.getElementById("graph");
359 var g
= new Dygraph(graph
, data
, opts
);
365 // Test first series (step)
366 for (var i
= 0; i
< data
.length
- 1; i
++) {
369 var x2
= data
[i
+ 1][0];
371 var y1_middle
= data
[i
][1][1];
372 var y2_middle
= data
[i
+ 1][1][1];
374 var y1_top
= data
[i
][1][2];
375 var y2_top
= data
[i
+ 1][1][2];
377 var y1_bottom
= data
[i
][1][0];
378 var y2_bottom
= data
[i
+ 1][1][0];
381 var xy1
= g
.toDomCoords(x1
, y1_bottom
);
382 var xy2
= g
.toDomCoords(x2
, y1_bottom
);
383 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
386 xy1
= g
.toDomCoords(x1
, y1_top
);
387 xy2
= g
.toDomCoords(x2
, y1_top
);
388 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
391 xy1
= g
.toDomCoords(x1
, y1_middle
);
392 xy2
= g
.toDomCoords(x2
, y1_middle
);
393 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
395 // Test edges of custom bar areas(also drawn by dygraphs as lines)
396 xy1
= g
.toDomCoords(x1
, y1_top
);
397 xy2
= g
.toDomCoords(x2
, y1_top
);
398 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
400 xy2
= g
.toDomCoords(x2
, y1_bottom
);
401 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
403 xy2
= g
.toDomCoords(x1
, y1_bottom
);
404 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
405 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
406 // But a rectangle is completely tested with three of its four edges.
409 // Test second series (line)
410 for (var i
= 0; i
< data
.length
- 1; i
++) {
412 var xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0]);
413 var xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0]);
414 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
417 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][2]);
418 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][2]);
419 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
422 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][1]);
423 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][1]);
424 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);