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 * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
6 var StepTestCase
= TestCase("step-plot-per-series");
8 StepTestCase
.prototype.setUp
= function() {
9 document
.body
.innerHTML
= "<div id='graph'></div>";
12 StepTestCase
.origFunc
= Dygraph
.getContext
;
14 StepTestCase
.prototype.setUp
= function() {
15 document
.body
.innerHTML
= "<div id='graph'></div>";
16 Dygraph
.getContext
= function(canvas
) {
17 return new Proxy(StepTestCase
.origFunc(canvas
));
21 StepTestCase
.prototype.tearDown
= function() {
22 Dygraph
.getContext
= StepTestCase
.origFunc
;
25 StepTestCase
.prototype.testMixedModeStepAndLineFilled
= function() {
34 labels
: ["X", "Idle", "Used"],
36 Idle
: {stepPlot
: false},
37 Used
: {stepPlot
: true}
52 var graph
= document
.getElementById("graph");
53 var g
= new Dygraph(graph
, data
, opts
);
60 for (var i
= 0; i
< data
.length
- 1; i
++) {
63 var x2
= data
[i
+ 1][0];
66 var y2
= data
[i
+ 1][1];
68 // First series (line)
69 var xy1
= g
.toDomCoords(x1
, y1
);
70 var xy2
= g
.toDomCoords(x2
, y2
);
71 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
76 // Seconds series (step)
78 xy1
= g
.toDomCoords(x1
, y1
);
79 xy2
= g
.toDomCoords(x2
, y1
);
80 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
82 xy1
= g
.toDomCoords(x2
, y1
);
83 xy2
= g
.toDomCoords(x2
, y2
);
84 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
88 StepTestCase
.prototype.testMixedModeStepAndLineStackedAndFilled
= function() {
97 labels
: ["X", "Idle", "Used", "NotUsed", "Active"],
99 Idle
: {stepPlot
: false},
100 Used
: {stepPlot
: true},
101 NotUsed
: {stepPlot
: false},
102 Active
: {stepPlot
: true}
117 var graph
= document
.getElementById("graph");
118 var g
= new Dygraph(graph
, data
, opts
);
125 for (var i
= 0; i
< data
.length
- 1; i
++) {
128 var x2
= data
[i
+ 1][0];
132 var y2
= data
[i
+ 1][4];
134 // Fourth series (step)
137 var xy1
= g
.toDomCoords(x1
, y1
);
138 var xy2
= g
.toDomCoords(x2
, y1
);
139 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
141 xy1
= g
.toDomCoords(x2
, y1
);
142 xy2
= g
.toDomCoords(x2
, y2
);
143 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
145 // Test edges of areas (also drawn by dygraphs as lines)
146 xy1
= g
.toDomCoords(x1
, y1
);
147 xy2
= g
.toDomCoords(x2
, y1
);
148 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
150 xy2
= g
.toDomCoords(x2
, y2base
);
151 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
153 xy2
= g
.toDomCoords(x1
, y1base
);
154 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
155 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
156 // But a rectangle is completely tested with three of its four edges.
161 y2
+= data
[i
+ 1][3];
163 // Third series (line)
165 xy1
= g
.toDomCoords(x1
, y1
);
166 xy2
= g
.toDomCoords(x2
, y2
);
167 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
169 // Test edges of areas (also drawn by dygraphs as lines)
170 xy1
= g
.toDomCoords(x1
, y1
);
171 xy2
= g
.toDomCoords(x2
, y2
);
172 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
174 xy2
= g
.toDomCoords(x2
, y2base
);
175 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
177 xy2
= g
.toDomCoords(x1
, y1base
);
178 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
179 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
180 // But a rectangle is completely tested with three of its four edges.
185 y2
+= data
[i
+ 1][2];
187 // Second series (step)
190 xy1
= g
.toDomCoords(x1
, y1
);
191 xy2
= g
.toDomCoords(x2
, y1
);
192 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
194 xy1
= g
.toDomCoords(x2
, y1
);
195 xy2
= g
.toDomCoords(x2
, y2
);
196 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
198 // Test edges of areas (also drawn by dygraphs as lines)
199 xy1
= g
.toDomCoords(x1
, y1
);
200 xy2
= g
.toDomCoords(x2
, y1
);
201 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
203 xy2
= g
.toDomCoords(x2
, y2base
);
204 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
206 xy2
= g
.toDomCoords(x1
, y1base
);
207 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
208 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
209 // But a rectangle is completely tested with three of its four edges.
214 y2
+= data
[i
+ 1][1];
216 // First series (line)
218 xy1
= g
.toDomCoords(x1
, y1
);
219 xy2
= g
.toDomCoords(x2
, y2
);
220 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
222 // Test edges of areas (also drawn by dygraphs as lines)
223 xy1
= g
.toDomCoords(x1
, y1
);
224 xy2
= g
.toDomCoords(x2
, y2
);
225 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
227 xy2
= g
.toDomCoords(x2
, y2base
);
228 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
230 xy2
= g
.toDomCoords(x1
, y1base
);
231 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
232 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
233 // But a rectangle is completely tested with three of its four edges.
237 StepTestCase
.prototype.testMixedModeStepAndLineErrorBars
= function() {
247 labels
: ["X", "Data1", "Data2"],
249 Data1
: {stepPlot
: true},
250 Data2
: {stepPlot
: false}
254 [1, [75, 2], [50, 3]],
255 [2, [70, 5], [90, 4]],
256 [3, [80, 7], [112, 5]],
257 [4, [55, 3], [100, 2]],
258 [5, [69, 4], [85, 6]]
261 var graph
= document
.getElementById("graph");
262 var g
= new Dygraph(graph
, data
, opts
);
268 // Test first series (step)
269 for (var i
= 0; i
< data
.length
- 1; i
++) {
271 var x2
= data
[i
+ 1][0];
273 var y1_middle
= data
[i
][1][0];
274 var y2_middle
= data
[i
+ 1][1][0];
276 var y1_top
= y1_middle
+ data
[i
][1][1];
277 var y2_top
= y2_middle
+ data
[i
+ 1][1][1];
279 var y1_bottom
= y1_middle
- data
[i
][1][1];
280 var y2_bottom
= y2_middle
- data
[i
+ 1][1][1];
282 var xy1
= g
.toDomCoords(x1
, y1_bottom
);
283 var xy2
= g
.toDomCoords(x2
, y1_bottom
);
284 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
287 xy1
= g
.toDomCoords(x1
, y1_top
);
288 xy2
= g
.toDomCoords(x2
, y1_top
);
289 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
292 xy1
= g
.toDomCoords(x1
, y1_middle
);
293 xy2
= g
.toDomCoords(x2
, y1_middle
);
294 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
296 // Test edges of error bar areas(also drawn by dygraphs as lines)
297 xy1
= g
.toDomCoords(x1
, y1_top
);
298 xy2
= g
.toDomCoords(x2
, y1_top
);
299 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
301 xy2
= g
.toDomCoords(x2
, y1_bottom
);
302 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
304 xy2
= g
.toDomCoords(x1
, y1_bottom
);
305 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
306 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
307 // But a rectangle is completely tested with three of its four edges.
310 // Test second series (line)
311 for (var i
= 0; i
< data
.length
- 1; i
++) {
313 var xy1
= g
.toDomCoords(data
[i
][0], (data
[i
][2][0] - data
[i
][2][1]));
314 var xy2
= g
.toDomCoords(data
[i
+ 1][0], (data
[i
+ 1][2][0] - data
[i
+ 1][2][1]));
315 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
318 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0] + data
[i
][2][1]);
319 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]);
324 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0]);
325 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
330 StepTestCase
.prototype.testMixedModeStepAndLineCustomBars
= function() {
339 labels
: ["X", "Data1", "Data2"],
341 Data1
: {stepPlot
: true},
342 Data2
: {stepPlot
: false}
346 [1, [73, 75, 78], [50, 55, 70]],
347 [2, [65, 70, 75], [83, 91, 99]],
348 [3, [75, 85, 90], [98, 107, 117]],
349 [4, [55, 58, 61], [93, 102, 105]],
350 [5, [69, 73, 85], [80, 85, 87]]
353 var graph
= document
.getElementById("graph");
354 var g
= new Dygraph(graph
, data
, opts
);
360 // Test first series (step)
361 for (var i
= 0; i
< data
.length
- 1; i
++) {
364 var x2
= data
[i
+ 1][0];
366 var y1_middle
= data
[i
][1][1];
367 var y2_middle
= data
[i
+ 1][1][1];
369 var y1_top
= data
[i
][1][2];
370 var y2_top
= data
[i
+ 1][1][2];
372 var y1_bottom
= data
[i
][1][0];
373 var y2_bottom
= data
[i
+ 1][1][0];
376 var xy1
= g
.toDomCoords(x1
, y1_bottom
);
377 var xy2
= g
.toDomCoords(x2
, y1_bottom
);
378 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
381 xy1
= g
.toDomCoords(x1
, y1_top
);
382 xy2
= g
.toDomCoords(x2
, y1_top
);
383 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
386 xy1
= g
.toDomCoords(x1
, y1_middle
);
387 xy2
= g
.toDomCoords(x2
, y1_middle
);
388 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
390 // Test edges of custom bar areas(also drawn by dygraphs as lines)
391 xy1
= g
.toDomCoords(x1
, y1_top
);
392 xy2
= g
.toDomCoords(x2
, y1_top
);
393 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
395 xy2
= g
.toDomCoords(x2
, y1_bottom
);
396 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
398 xy2
= g
.toDomCoords(x1
, y1_bottom
);
399 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
400 // The last edge can not be tested via assertLineDrawn since it wasn't drawn as a line but via clossePath.
401 // But a rectangle is completely tested with three of its four edges.
404 // Test second series (line)
405 for (var i
= 0; i
< data
.length
- 1; i
++) {
407 var xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][0]);
408 var xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][0]);
409 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
412 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][2]);
413 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][2]);
414 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);
417 xy1
= g
.toDomCoords(data
[i
][0], data
[i
][2][1]);
418 xy2
= g
.toDomCoords(data
[i
+ 1][0], data
[i
+ 1][2][1]);
419 CanvasAssertions
.assertLineDrawn(htx
, xy1
, xy2
, attrs
);