Commit | Line | Data |
---|---|---|
cea0fb70 RK |
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 | ||
794280e2 | 21 | /** |
cea0fb70 RK |
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 | ||
89fdcedb | 28 | describe("missing-points", function() { |
cea0fb70 | 29 | |
319d0361 | 30 | var _origFunc = Dygraph.getContext; |
89fdcedb | 31 | beforeEach(function() { |
cea0fb70 RK |
32 | document.body.innerHTML = "<div id='graph'></div>"; |
33 | Dygraph.getContext = function(canvas) { | |
319d0361 | 34 | return new Proxy(_origFunc(canvas)); |
cea0fb70 | 35 | } |
89fdcedb | 36 | }); |
cea0fb70 | 37 | |
89fdcedb | 38 | afterEach(function() { |
319d0361 | 39 | Dygraph.getContext = _origFunc; |
89fdcedb | 40 | }); |
cea0fb70 | 41 | |
89fdcedb | 42 | it('testSeparatedPointsDontDraw', function() { |
cea0fb70 RK |
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 | { colors: ['red', 'blue']}); | |
50 | var htx = g.hidden_ctx_; | |
89fdcedb DV |
51 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
52 | assert.equal(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); | |
53 | }); | |
cea0fb70 | 54 | |
89fdcedb | 55 | it('testSeparatedPointsDontDraw_expanded', function() { |
cea0fb70 RK |
56 | var graph = document.getElementById("graph"); |
57 | var g = new Dygraph( | |
58 | graph, | |
59 | [[0, 10], | |
60 | [1, 11], | |
61 | [2, null], | |
62 | [3, 13], | |
63 | [4, 14]], | |
65129ba8 | 64 | { colors: ['blue'], labels: ['X', 'Y']}); |
cea0fb70 | 65 | var htx = g.hidden_ctx_; |
cea0fb70 | 66 | |
89fdcedb | 67 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); |
cea0fb70 RK |
68 | CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212], |
69 | { strokeStyle: '#0000ff', }); | |
70 | CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25], | |
71 | { strokeStyle: '#0000ff', }); | |
89fdcedb | 72 | }); |
cea0fb70 | 73 | |
89fdcedb | 74 | it('testSeparatedPointsDontDraw_expanded_connected', function() { |
cea0fb70 RK |
75 | var graph = document.getElementById("graph"); |
76 | var g = new Dygraph( | |
77 | graph, | |
78 | [[0, 10], | |
79 | [1, 11], | |
80 | [2, null], | |
81 | [3, 13], | |
82 | [4, 14]], | |
65129ba8 DV |
83 | { |
84 | colors: ['blue'], | |
85 | connectSeparatedPoints: true, | |
86 | labels: ['X', 'Y'] | |
87 | }); | |
cea0fb70 RK |
88 | var htx = g.hidden_ctx_; |
89 | var num_lines = 0; | |
cea0fb70 | 90 | |
89fdcedb | 91 | assert.equal(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); |
794280e2 | 92 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
93 | [[56, 275], [161, 212], [370, 87], [475, 25]], |
94 | { strokeStyle: '#0000ff' }); | |
89fdcedb | 95 | }); |
0b9ce4de RK |
96 | |
97 | /** | |
98 | * At the time of writing this test, the blue series is only points, and not lines. | |
99 | */ | |
89fdcedb | 100 | it('testConnectSeparatedPoints', function() { |
0b9ce4de RK |
101 | var g = new Dygraph( |
102 | document.getElementById("graph"), | |
103 | [ | |
104 | [1, null, 3], | |
105 | [2, 2, null], | |
106 | [3, null, 7], | |
107 | [4, 5, null], | |
108 | [5, null, 5], | |
109 | [6, 3, null] | |
110 | ], | |
111 | { | |
112 | connectSeparatedPoints: true, | |
113 | drawPoints: true, | |
65129ba8 DV |
114 | colors: ['red', 'blue'], |
115 | labels: ['X', 'Y1', 'Y2'] | |
0b9ce4de RK |
116 | } |
117 | ); | |
fb09a25a RK |
118 | |
119 | var htx = g.hidden_ctx_; | |
120 | ||
89fdcedb | 121 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); |
794280e2 | 122 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
123 | [[56, 225], [223, 25], [391, 125]], |
124 | { strokeStyle: '#0000ff' }); | |
125 | ||
89fdcedb | 126 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
794280e2 | 127 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
128 | [[140, 275], [307, 125], [475, 225]], |
129 | { strokeStyle: '#ff0000' }); | |
89fdcedb | 130 | }); |
0b9ce4de RK |
131 | |
132 | /** | |
133 | * At the time of writing this test, the blue series is only points, and not lines. | |
134 | */ | |
89fdcedb | 135 | it('testConnectSeparatedPointsWithNan', function() { |
0b9ce4de RK |
136 | var g = new Dygraph( |
137 | document.getElementById("graph"), | |
138 | "x,A,B \n" + | |
139 | "1,,3 \n" + | |
140 | "2,2, \n" + | |
141 | "3,,5 \n" + | |
142 | "4,4, \n" + | |
143 | "5,,7 \n" + | |
144 | "6,NaN, \n" + | |
145 | "8,8, \n" + | |
146 | "10,10, \n", | |
147 | { | |
148 | connectSeparatedPoints: true, | |
149 | drawPoints: true, | |
150 | colors: ['red', 'blue'] | |
151 | } | |
152 | ); | |
fb09a25a RK |
153 | |
154 | var htx = g.hidden_ctx_; | |
155 | ||
156 | // Red has two disconnected line segments | |
89fdcedb | 157 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
fb09a25a RK |
158 | CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' }); |
159 | CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' }); | |
160 | ||
161 | // Blue's lines are consecutive, however. | |
89fdcedb | 162 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff')); |
794280e2 | 163 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
fb09a25a RK |
164 | [[56, 244], [149, 181], [242, 118]], |
165 | { strokeStyle: '#0000ff' }); | |
89fdcedb | 166 | }); |
fb09a25a | 167 | |
794280e2 | 168 | /* These lines contain awesome powa! |
fb09a25a RK |
169 | var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"}); |
170 | for (var idx = 0; idx < lines.length; idx++) { | |
171 | var line = lines[idx]; | |
172 | console.log(line[0].args, line[1].args, line[0].properties.strokeStyle); | |
173 | } | |
4707563c | 174 | */ |
d8c77f39 | 175 | |
89fdcedb | 176 | it('testErrorBarsWithMissingPoints', function() { |
d8c77f39 DE |
177 | var data = [ |
178 | [1, [2,1]], | |
179 | [2, [3,1]], | |
180 | [3, null], | |
181 | [4, [5,1]], | |
182 | [5, [4,1]], | |
183 | [6, [null,null]], | |
184 | ]; | |
185 | var g = new Dygraph( | |
186 | document.getElementById("graph"), | |
187 | data, | |
188 | { | |
189 | errorBars: true, | |
65129ba8 DV |
190 | colors: ['red'], |
191 | labels: ['X', 'Y'] | |
d8c77f39 DE |
192 | } |
193 | ); | |
194 | ||
195 | var htx = g.hidden_ctx_; | |
196 | ||
89fdcedb | 197 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
198 | |
199 | var p0 = g.toDomCoords(data[0][0], data[0][1][0]); | |
200 | var p1 = g.toDomCoords(data[1][0], data[1][1][0]); | |
201 | var p2 = g.toDomCoords(data[3][0], data[3][1][0]); | |
202 | var p3 = g.toDomCoords(data[4][0], data[4][1][0]); | |
794280e2 | 203 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 | 204 | [p0, p1], { strokeStyle: '#ff0000' }); |
794280e2 | 205 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 | 206 | [p2, p3], { strokeStyle: '#ff0000' }); |
89fdcedb | 207 | }); |
d8c77f39 | 208 | |
89fdcedb | 209 | it('testErrorBarsWithMissingPointsConnected', function() { |
d8c77f39 DE |
210 | var data = [ |
211 | [1, [null,1]], | |
212 | [2, [2,1]], | |
213 | [3, null], | |
214 | [4, [5,1]], | |
215 | [5, [null,null]], | |
216 | [6, [3,1]] | |
217 | ]; | |
218 | var g = new Dygraph( | |
219 | document.getElementById("graph"), | |
220 | data, | |
221 | { | |
222 | connectSeparatedPoints: true, | |
223 | drawPoints: true, | |
224 | errorBars: true, | |
65129ba8 DV |
225 | colors: ['red'], |
226 | labels: ['X', 'Y'] | |
d8c77f39 DE |
227 | } |
228 | ); | |
229 | ||
230 | var htx = g.hidden_ctx_; | |
794280e2 | 231 | |
89fdcedb | 232 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
233 | |
234 | var p1 = g.toDomCoords(data[1][0], data[1][1][0]); | |
235 | var p2 = g.toDomCoords(data[3][0], data[3][1][0]); | |
236 | var p3 = g.toDomCoords(data[5][0], data[5][1][0]); | |
794280e2 | 237 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 DE |
238 | [p1, p2, p3], |
239 | { strokeStyle: '#ff0000' }); | |
89fdcedb DV |
240 | }); |
241 | it('testCustomBarsWithMissingPoints', function() { | |
d8c77f39 DE |
242 | var data = [ |
243 | [1, [1,2,3]], | |
244 | [2, [2,3,4]], | |
245 | [3, null], | |
246 | [4, [4,5,6]], | |
247 | [5, [3,4,5]], | |
248 | [6, [null,null,null]], | |
6d25b0cd DE |
249 | [7, [2,3,4]], |
250 | [8, [1,2,3]], | |
251 | [9, NaN], | |
252 | [10, [2,3,4]], | |
253 | [11, [3,4,5]], | |
254 | [12, [NaN,NaN,NaN]] | |
d8c77f39 DE |
255 | ]; |
256 | var g = new Dygraph( | |
257 | document.getElementById("graph"), | |
258 | data, | |
259 | { | |
260 | customBars: true, | |
65129ba8 DV |
261 | colors: ['red'], |
262 | labels: ['X', 'Y'] | |
d8c77f39 DE |
263 | } |
264 | ); | |
265 | ||
266 | var htx = g.hidden_ctx_; | |
267 | ||
89fdcedb | 268 | assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
269 | |
270 | var p0 = g.toDomCoords(data[0][0], data[0][1][1]); | |
271 | var p1 = g.toDomCoords(data[1][0], data[1][1][1]); | |
6d25b0cd | 272 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' }); |
794280e2 | 273 | |
6d25b0cd DE |
274 | p0 = g.toDomCoords(data[3][0], data[3][1][1]); |
275 | p1 = g.toDomCoords(data[4][0], data[4][1][1]); | |
276 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' }); | |
277 | ||
278 | p0 = g.toDomCoords(data[6][0], data[6][1][1]); | |
279 | p1 = g.toDomCoords(data[7][0], data[7][1][1]); | |
280 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });; | |
281 | ||
282 | p0 = g.toDomCoords(data[9][0], data[9][1][1]); | |
283 | p1 = g.toDomCoords(data[10][0], data[10][1][1]); | |
284 | CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' }); | |
89fdcedb | 285 | }); |
d8c77f39 | 286 | |
89fdcedb | 287 | it('testCustomBarsWithMissingPointsConnected', function() { |
d8c77f39 DE |
288 | var data = [ |
289 | [1, [1,null,1]], | |
290 | [2, [1,2,3]], | |
291 | [3, null], | |
292 | [4, [4,5,6]], | |
293 | [5, [null,null,null]], | |
294 | [6, [2,3,4]] | |
295 | ]; | |
296 | var g = new Dygraph( | |
297 | document.getElementById("graph"), | |
298 | data, | |
299 | { | |
300 | connectSeparatedPoints: true, | |
301 | drawPoints: true, | |
302 | customBars: true, | |
65129ba8 DV |
303 | colors: ['red'], |
304 | labels: ['X', 'Y'] | |
d8c77f39 DE |
305 | } |
306 | ); | |
307 | ||
308 | var htx = g.hidden_ctx_; | |
794280e2 | 309 | |
89fdcedb | 310 | assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
d8c77f39 DE |
311 | |
312 | var p1 = g.toDomCoords(data[1][0], data[1][1][1]); | |
313 | var p2 = g.toDomCoords(data[3][0], data[3][1][1]); | |
314 | var p3 = g.toDomCoords(data[5][0], data[5][1][1]); | |
794280e2 | 315 | CanvasAssertions.assertConsecutiveLinesDrawn(htx, |
d8c77f39 DE |
316 | [p1, p2, p3], |
317 | { strokeStyle: '#ff0000' }); | |
89fdcedb | 318 | }); |
794280e2 | 319 | |
89fdcedb | 320 | it('testLeftBoundaryWithMisingPoints', function() { |
9bda5a1d | 321 | var data = [ |
322 | [1, null, 3], | |
323 | [2, 1, null], | |
324 | [3, 0, 5], | |
325 | [4, 2, 1], | |
326 | [5, 4, null], | |
327 | [6, 3, 2] | |
328 | ]; | |
329 | var g = new Dygraph( | |
330 | document.getElementById("graph"), | |
331 | data, | |
332 | { | |
333 | connectSeparatedPoints: true, | |
334 | drawPoints: true, | |
65129ba8 DV |
335 | colors: ['red','blue'], |
336 | labels: ['X', 'Y1', 'Y2'] | |
9bda5a1d | 337 | } |
338 | ); | |
339 | g.updateOptions({ dateWindow : [ 2.5, 4.5 ] }); | |
89fdcedb DV |
340 | assert.equal(1, g.getLeftBoundary_(0)); |
341 | assert.equal(0, g.getLeftBoundary_(1)); | |
9bda5a1d | 342 | |
343 | var domX = g.toDomXCoord(1.9); | |
344 | var closestRow = g.findClosestRow(domX); | |
89fdcedb | 345 | assert.equal(1, closestRow); |
9bda5a1d | 346 | |
347 | g.setSelection(closestRow); | |
89fdcedb DV |
348 | assert.equal(1, g.selPoints_.length); |
349 | assert.equal(1, g.selPoints_[0].yval); | |
9bda5a1d | 350 | |
351 | g.setSelection(3); | |
89fdcedb DV |
352 | assert.equal(2, g.selPoints_.length); |
353 | assert.equal(g.selPoints_[0].xval, g.selPoints_[1].xval); | |
354 | assert.equal(2, g.selPoints_[0].yval); | |
355 | assert.equal(1, g.selPoints_[1].yval); | |
356 | }); | |
794280e2 DV |
357 | |
358 | // Regression test for issue #411 | |
89fdcedb | 359 | it('testEmptySeries', function() { |
794280e2 DV |
360 | var graphDiv = document.getElementById("graph"); |
361 | var g = new Dygraph( | |
362 | graphDiv, | |
363 | "Time,Empty Series,Series 1,Series 2\n" + | |
364 | "1381134460,,0,100\n" + | |
365 | "1381134461,,1,99\n" + | |
366 | "1381134462,,2,98\n" + | |
367 | "1381134463,,3,97\n" + | |
368 | "1381134464,,4,96\n" + | |
369 | "1381134465,,5,95\n" + | |
370 | "1381134466,,6,94\n" + | |
371 | "1381134467,,7,93\n" + | |
372 | "1381134468,,8,92\n" + | |
373 | "1381134469,,9,91\n", { | |
374 | visibility: [true, false, true], | |
375 | dateWindow: [1381134465, 1381134467] | |
376 | }); | |
377 | ||
378 | g.setSelection(6); | |
89fdcedb DV |
379 | assert.equal("1381134466: Series 2: 94", Util.getLegend(graphDiv)); |
380 | }); | |
87c5a64c DV |
381 | |
382 | // Regression test for issue #485 | |
89fdcedb | 383 | it('testMissingFill', function() { |
87c5a64c DV |
384 | var graphDiv = document.getElementById("graph"); |
385 | var N = null; | |
386 | var g = new Dygraph( | |
387 | graphDiv, | |
388 | [ | |
389 | [1, [8, 10, 12]], | |
390 | [2, [3, 5,7] ], | |
391 | [3, N, ], | |
392 | [4, [9, N, 2] ], // Note: nulls in arrays are not technically valid. | |
393 | [5, [N, 2, N] ], // see dygraphs.com/data.html. | |
394 | [6, [2, 3, 6] ] | |
395 | ], | |
396 | { | |
397 | customBars: true, | |
398 | connectSeparatedPoints: false, | |
399 | labels: [ "X", "Series1"] | |
400 | } | |
401 | ); | |
402 | ||
403 | // Make sure there are no 'NaN' line segments. | |
404 | var htx = g.hidden_ctx_; | |
405 | for (var i = 0; i < htx.calls__.length; i++) { | |
406 | var call = htx.calls__[i]; | |
407 | if ((call.name == 'moveTo' || call.name == 'lineTo') && call.args) { | |
408 | for (var j = 0; j < call.args.length; j++) { | |
89fdcedb | 409 | assert.isFalse(isNaN(call.args[j])); |
87c5a64c DV |
410 | } |
411 | } | |
412 | } | |
89fdcedb DV |
413 | }); |
414 | ||
415 | }); |