Fork off Karma file for in-browser debug
[dygraphs.git] / auto_tests / tests / missing_points.js
1 // Copyright (c) 2012 Google, Inc.
2 //
3 // Permission is hereby granted, free of charge, to any person obtaining a copy
4 // of this software and associated documentation files (the "Software"), to deal
5 // in the Software without restriction, including without limitation the rights
6 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 // copies of the Software, and to permit persons to whom the Software is
8 // furnished to do so, subject to the following conditions:
9 //
10 // The above copyright notice and this permission notice shall be included in
11 // all copies or substantial portions of the Software.
12 //
13 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 // THE SOFTWARE.
20
21 /**
22 * @fileoverview Test cases for drawing lines with missing points.
23 *
24 * @author konigsberg@google.com (Robert Konigsberg)
25 */
26 var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]];
27
28 describe("missing-points", function() {
29
30 var _origFunc = Dygraph.getContext;
31 beforeEach(function() {
32 document.body.innerHTML = "<div id='graph'></div>";
33 Dygraph.getContext = function(canvas) {
34 return new Proxy(_origFunc(canvas));
35 }
36 });
37
38 afterEach(function() {
39 Dygraph.getContext = _origFunc;
40 });
41
42 it('testSeparatedPointsDontDraw', function() {
43 var graph = document.getElementById("graph");
44 var g = new Dygraph(
45 graph,
46 [[1, 10, 11],
47 [2, 11, null],
48 [3, 12, 13]],
49 {
50 colors: ['red', 'blue'],
51 labels: ['X', 'Y1', 'Y2']
52 });
53 var htx = g.hidden_ctx_;
54 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
55 assert.equal(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
56 });
57
58 it('testSeparatedPointsDontDraw_expanded', function() {
59 var graph = document.getElementById("graph");
60 var g = new Dygraph(
61 graph,
62 [[0, 10],
63 [1, 11],
64 [2, null],
65 [3, 13],
66 [4, 14]],
67 { colors: ['blue'], labels: ['X', 'Y']});
68 var htx = g.hidden_ctx_;
69
70 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
71 CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212],
72 { strokeStyle: '#0000ff', });
73 CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25],
74 { strokeStyle: '#0000ff', });
75 });
76
77 it('testSeparatedPointsDontDraw_expanded_connected', function() {
78 var graph = document.getElementById("graph");
79 var g = new Dygraph(
80 graph,
81 [[0, 10],
82 [1, 11],
83 [2, null],
84 [3, 13],
85 [4, 14]],
86 {
87 colors: ['blue'],
88 connectSeparatedPoints: true,
89 labels: ['X', 'Y']
90 });
91 var htx = g.hidden_ctx_;
92 var num_lines = 0;
93
94 assert.equal(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
95 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
96 [[56, 275], [161, 212], [370, 87], [475, 25]],
97 { strokeStyle: '#0000ff' });
98 });
99
100 /**
101 * At the time of writing this test, the blue series is only points, and not lines.
102 */
103 it('testConnectSeparatedPoints', function() {
104 var g = new Dygraph(
105 document.getElementById("graph"),
106 [
107 [1, null, 3],
108 [2, 2, null],
109 [3, null, 7],
110 [4, 5, null],
111 [5, null, 5],
112 [6, 3, null]
113 ],
114 {
115 connectSeparatedPoints: true,
116 drawPoints: true,
117 colors: ['red', 'blue'],
118 labels: ['X', 'Y1', 'Y2']
119 }
120 );
121
122 var htx = g.hidden_ctx_;
123
124 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
125 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
126 [[56, 225], [223, 25], [391, 125]],
127 { strokeStyle: '#0000ff' });
128
129 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
130 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
131 [[140, 275], [307, 125], [475, 225]],
132 { strokeStyle: '#ff0000' });
133 });
134
135 /**
136 * At the time of writing this test, the blue series is only points, and not lines.
137 */
138 it('testConnectSeparatedPointsWithNan', function() {
139 var g = new Dygraph(
140 document.getElementById("graph"),
141 "x,A,B \n" +
142 "1,,3 \n" +
143 "2,2, \n" +
144 "3,,5 \n" +
145 "4,4, \n" +
146 "5,,7 \n" +
147 "6,NaN, \n" +
148 "8,8, \n" +
149 "10,10, \n",
150 {
151 connectSeparatedPoints: true,
152 drawPoints: true,
153 colors: ['red', 'blue']
154 }
155 );
156
157 var htx = g.hidden_ctx_;
158
159 // Red has two disconnected line segments
160 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
161 CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' });
162 CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' });
163
164 // Blue's lines are consecutive, however.
165 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
166 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
167 [[56, 244], [149, 181], [242, 118]],
168 { strokeStyle: '#0000ff' });
169 });
170
171 /* These lines contain awesome powa!
172 var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"});
173 for (var idx = 0; idx < lines.length; idx++) {
174 var line = lines[idx];
175 console.log(line[0].args, line[1].args, line[0].properties.strokeStyle);
176 }
177 */
178
179 it('testErrorBarsWithMissingPoints', function() {
180 var data = [
181 [1, [2,1]],
182 [2, [3,1]],
183 [3, null],
184 [4, [5,1]],
185 [5, [4,1]],
186 [6, [null,null]],
187 ];
188 var g = new Dygraph(
189 document.getElementById("graph"),
190 data,
191 {
192 errorBars: true,
193 colors: ['red'],
194 labels: ['X', 'Y']
195 }
196 );
197
198 var htx = g.hidden_ctx_;
199
200 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
201
202 var p0 = g.toDomCoords(data[0][0], data[0][1][0]);
203 var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
204 var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
205 var p3 = g.toDomCoords(data[4][0], data[4][1][0]);
206 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
207 [p0, p1], { strokeStyle: '#ff0000' });
208 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
209 [p2, p3], { strokeStyle: '#ff0000' });
210 });
211
212 it('testErrorBarsWithMissingPointsConnected', function() {
213 var data = [
214 [1, [null,1]],
215 [2, [2,1]],
216 [3, null],
217 [4, [5,1]],
218 [5, [null,null]],
219 [6, [3,1]]
220 ];
221 var g = new Dygraph(
222 document.getElementById("graph"),
223 data,
224 {
225 connectSeparatedPoints: true,
226 drawPoints: true,
227 errorBars: true,
228 colors: ['red'],
229 labels: ['X', 'Y']
230 }
231 );
232
233 var htx = g.hidden_ctx_;
234
235 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
236
237 var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
238 var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
239 var p3 = g.toDomCoords(data[5][0], data[5][1][0]);
240 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
241 [p1, p2, p3],
242 { strokeStyle: '#ff0000' });
243 });
244 it('testCustomBarsWithMissingPoints', function() {
245 var data = [
246 [1, [1,2,3]],
247 [2, [2,3,4]],
248 [3, null],
249 [4, [4,5,6]],
250 [5, [3,4,5]],
251 [6, [null,null,null]],
252 [7, [2,3,4]],
253 [8, [1,2,3]],
254 [9, NaN],
255 [10, [2,3,4]],
256 [11, [3,4,5]],
257 [12, [NaN,NaN,NaN]]
258 ];
259 var g = new Dygraph(
260 document.getElementById("graph"),
261 data,
262 {
263 customBars: true,
264 colors: ['red'],
265 labels: ['X', 'Y']
266 }
267 );
268
269 var htx = g.hidden_ctx_;
270
271 assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
272
273 var p0 = g.toDomCoords(data[0][0], data[0][1][1]);
274 var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
275 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
276
277 p0 = g.toDomCoords(data[3][0], data[3][1][1]);
278 p1 = g.toDomCoords(data[4][0], data[4][1][1]);
279 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
280
281 p0 = g.toDomCoords(data[6][0], data[6][1][1]);
282 p1 = g.toDomCoords(data[7][0], data[7][1][1]);
283 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });;
284
285 p0 = g.toDomCoords(data[9][0], data[9][1][1]);
286 p1 = g.toDomCoords(data[10][0], data[10][1][1]);
287 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
288 });
289
290 it('testCustomBarsWithMissingPointsConnected', function() {
291 var data = [
292 [1, [1,null,1]],
293 [2, [1,2,3]],
294 [3, null],
295 [4, [4,5,6]],
296 [5, [null,null,null]],
297 [6, [2,3,4]]
298 ];
299 var g = new Dygraph(
300 document.getElementById("graph"),
301 data,
302 {
303 connectSeparatedPoints: true,
304 drawPoints: true,
305 customBars: true,
306 colors: ['red'],
307 labels: ['X', 'Y']
308 }
309 );
310
311 var htx = g.hidden_ctx_;
312
313 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
314
315 var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
316 var p2 = g.toDomCoords(data[3][0], data[3][1][1]);
317 var p3 = g.toDomCoords(data[5][0], data[5][1][1]);
318 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
319 [p1, p2, p3],
320 { strokeStyle: '#ff0000' });
321 });
322
323 it('testLeftBoundaryWithMisingPoints', function() {
324 var data = [
325 [1, null, 3],
326 [2, 1, null],
327 [3, 0, 5],
328 [4, 2, 1],
329 [5, 4, null],
330 [6, 3, 2]
331 ];
332 var g = new Dygraph(
333 document.getElementById("graph"),
334 data,
335 {
336 connectSeparatedPoints: true,
337 drawPoints: true,
338 colors: ['red','blue'],
339 labels: ['X', 'Y1', 'Y2']
340 }
341 );
342 g.updateOptions({ dateWindow : [ 2.5, 4.5 ] });
343 assert.equal(1, g.getLeftBoundary_(0));
344 assert.equal(0, g.getLeftBoundary_(1));
345
346 var domX = g.toDomXCoord(1.9);
347 var closestRow = g.findClosestRow(domX);
348 assert.equal(1, closestRow);
349
350 g.setSelection(closestRow);
351 assert.equal(1, g.selPoints_.length);
352 assert.equal(1, g.selPoints_[0].yval);
353
354 g.setSelection(3);
355 assert.equal(2, g.selPoints_.length);
356 assert.equal(g.selPoints_[0].xval, g.selPoints_[1].xval);
357 assert.equal(2, g.selPoints_[0].yval);
358 assert.equal(1, g.selPoints_[1].yval);
359 });
360
361 // Regression test for issue #411
362 it('testEmptySeries', function() {
363 var graphDiv = document.getElementById("graph");
364 var g = new Dygraph(
365 graphDiv,
366 "Time,Empty Series,Series 1,Series 2\n" +
367 "1381134460,,0,100\n" +
368 "1381134461,,1,99\n" +
369 "1381134462,,2,98\n" +
370 "1381134463,,3,97\n" +
371 "1381134464,,4,96\n" +
372 "1381134465,,5,95\n" +
373 "1381134466,,6,94\n" +
374 "1381134467,,7,93\n" +
375 "1381134468,,8,92\n" +
376 "1381134469,,9,91\n", {
377 visibility: [true, false, true],
378 dateWindow: [1381134465, 1381134467]
379 });
380
381 g.setSelection(6);
382 assert.equal("1381134466: Series 2: 94", Util.getLegend(graphDiv));
383 });
384
385 // Regression test for issue #485
386 it('testMissingFill', function() {
387 var graphDiv = document.getElementById("graph");
388 var N = null;
389 var g = new Dygraph(
390 graphDiv,
391 [
392 [1, [8, 10, 12]],
393 [2, [3, 5,7] ],
394 [3, N, ],
395 [4, [9, N, 2] ], // Note: nulls in arrays are not technically valid.
396 [5, [N, 2, N] ], // see dygraphs.com/data.html.
397 [6, [2, 3, 6] ]
398 ],
399 {
400 customBars: true,
401 connectSeparatedPoints: false,
402 labels: [ "X", "Series1"]
403 }
404 );
405
406 // Make sure there are no 'NaN' line segments.
407 var htx = g.hidden_ctx_;
408 for (var i = 0; i < htx.calls__.length; i++) {
409 var call = htx.calls__[i];
410 if ((call.name == 'moveTo' || call.name == 'lineTo') && call.args) {
411 for (var j = 0; j < call.args.length; j++) {
412 assert.isFalse(isNaN(call.args[j]));
413 }
414 }
415 }
416 });
417
418 });