Merge pull request #266 from hulkholden/fix_hidpi
[dygraphs.git] / auto_tests / tests / missing_points.js
CommitLineData
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
21/**
22 * @fileoverview Test cases for drawing lines with missing points.
23 *
24 * @author konigsberg@google.com (Robert Konigsberg)
25 */
26var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]];
27
28var MissingPointsTestCase = TestCase("missing-points");
29
4707563c 30MissingPointsTestCase._origFunc = Dygraph.getContext;
cea0fb70
RK
31MissingPointsTestCase.prototype.setUp = function() {
32 document.body.innerHTML = "<div id='graph'></div>";
33 Dygraph.getContext = function(canvas) {
4707563c 34 return new Proxy(MissingPointsTestCase._origFunc(canvas));
cea0fb70
RK
35 }
36};
37
38MissingPointsTestCase.prototype.tearDown = function() {
4707563c 39 Dygraph.getContext = MissingPointsTestCase._origFunc;
cea0fb70
RK
40};
41
42MissingPointsTestCase.prototype.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 { colors: ['red', 'blue']});
50 var htx = g.hidden_ctx_;
51 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
52 assertEquals(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
d8c77f39 53};
cea0fb70
RK
54
55MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded = function() {
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]],
64 { colors: ['blue']});
65 var htx = g.hidden_ctx_;
cea0fb70
RK
66
67 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
68 CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212],
69 { strokeStyle: '#0000ff', });
70 CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25],
71 { strokeStyle: '#0000ff', });
d8c77f39 72};
cea0fb70
RK
73
74MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded_connected = function() {
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]],
83 { colors: ['blue'], connectSeparatedPoints: true});
84 var htx = g.hidden_ctx_;
85 var num_lines = 0;
cea0fb70
RK
86
87 assertEquals(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
fb09a25a
RK
88 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
89 [[56, 275], [161, 212], [370, 87], [475, 25]],
90 { strokeStyle: '#0000ff' });
d8c77f39 91};
0b9ce4de
RK
92
93/**
94 * At the time of writing this test, the blue series is only points, and not lines.
95 */
96MissingPointsTestCase.prototype.testConnectSeparatedPoints = function() {
97 var g = new Dygraph(
98 document.getElementById("graph"),
99 [
100 [1, null, 3],
101 [2, 2, null],
102 [3, null, 7],
103 [4, 5, null],
104 [5, null, 5],
105 [6, 3, null]
106 ],
107 {
108 connectSeparatedPoints: true,
109 drawPoints: true,
110 colors: ['red', 'blue']
111 }
112 );
fb09a25a
RK
113
114 var htx = g.hidden_ctx_;
115
116 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
117 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
118 [[56, 225], [223, 25], [391, 125]],
119 { strokeStyle: '#0000ff' });
120
121 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
122 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
123 [[140, 275], [307, 125], [475, 225]],
124 { strokeStyle: '#ff0000' });
d8c77f39 125};
0b9ce4de
RK
126
127/**
128 * At the time of writing this test, the blue series is only points, and not lines.
129 */
130MissingPointsTestCase.prototype.testConnectSeparatedPointsWithNan = function() {
131 var g = new Dygraph(
132 document.getElementById("graph"),
133 "x,A,B \n" +
134 "1,,3 \n" +
135 "2,2, \n" +
136 "3,,5 \n" +
137 "4,4, \n" +
138 "5,,7 \n" +
139 "6,NaN, \n" +
140 "8,8, \n" +
141 "10,10, \n",
142 {
143 connectSeparatedPoints: true,
144 drawPoints: true,
145 colors: ['red', 'blue']
146 }
147 );
fb09a25a
RK
148
149 var htx = g.hidden_ctx_;
150
151 // Red has two disconnected line segments
152 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
153 CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' });
154 CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' });
155
156 // Blue's lines are consecutive, however.
157 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
158 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
159 [[56, 244], [149, 181], [242, 118]],
160 { strokeStyle: '#0000ff' });
d8c77f39 161};
fb09a25a
RK
162
163/* These lines contain awesome powa!
164 var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"});
165 for (var idx = 0; idx < lines.length; idx++) {
166 var line = lines[idx];
167 console.log(line[0].args, line[1].args, line[0].properties.strokeStyle);
168 }
4707563c 169*/
d8c77f39
DE
170
171MissingPointsTestCase.prototype.testErrorBarsWithMissingPoints = function() {
172 var data = [
173 [1, [2,1]],
174 [2, [3,1]],
175 [3, null],
176 [4, [5,1]],
177 [5, [4,1]],
178 [6, [null,null]],
179 ];
180 var g = new Dygraph(
181 document.getElementById("graph"),
182 data,
183 {
184 errorBars: true,
185 colors: ['red']
186 }
187 );
188
189 var htx = g.hidden_ctx_;
190
30a5cfc6 191 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
d8c77f39
DE
192
193 var p0 = g.toDomCoords(data[0][0], data[0][1][0]);
194 var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
195 var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
196 var p3 = g.toDomCoords(data[4][0], data[4][1][0]);
197 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
198 [p0, p1], { strokeStyle: '#ff0000' });
199 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
200 [p2, p3], { strokeStyle: '#ff0000' });
201};
202
203MissingPointsTestCase.prototype.testErrorBarsWithMissingPointsConnected = function() {
204 var data = [
205 [1, [null,1]],
206 [2, [2,1]],
207 [3, null],
208 [4, [5,1]],
209 [5, [null,null]],
210 [6, [3,1]]
211 ];
212 var g = new Dygraph(
213 document.getElementById("graph"),
214 data,
215 {
216 connectSeparatedPoints: true,
217 drawPoints: true,
218 errorBars: true,
219 colors: ['red']
220 }
221 );
222
223 var htx = g.hidden_ctx_;
224
30a5cfc6 225 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
d8c77f39
DE
226
227 var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
228 var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
229 var p3 = g.toDomCoords(data[5][0], data[5][1][0]);
230 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
231 [p1, p2, p3],
232 { strokeStyle: '#ff0000' });
233};
234MissingPointsTestCase.prototype.testCustomBarsWithMissingPoints = function() {
235 var data = [
236 [1, [1,2,3]],
237 [2, [2,3,4]],
238 [3, null],
239 [4, [4,5,6]],
240 [5, [3,4,5]],
241 [6, [null,null,null]],
6d25b0cd
DE
242 [7, [2,3,4]],
243 [8, [1,2,3]],
244 [9, NaN],
245 [10, [2,3,4]],
246 [11, [3,4,5]],
247 [12, [NaN,NaN,NaN]]
d8c77f39
DE
248 ];
249 var g = new Dygraph(
250 document.getElementById("graph"),
251 data,
252 {
253 customBars: true,
254 colors: ['red']
255 }
256 );
257
258 var htx = g.hidden_ctx_;
259
30a5cfc6 260 assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
d8c77f39
DE
261
262 var p0 = g.toDomCoords(data[0][0], data[0][1][1]);
263 var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
6d25b0cd
DE
264 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
265
266 p0 = g.toDomCoords(data[3][0], data[3][1][1]);
267 p1 = g.toDomCoords(data[4][0], data[4][1][1]);
268 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
269
270 p0 = g.toDomCoords(data[6][0], data[6][1][1]);
271 p1 = g.toDomCoords(data[7][0], data[7][1][1]);
272 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });;
273
274 p0 = g.toDomCoords(data[9][0], data[9][1][1]);
275 p1 = g.toDomCoords(data[10][0], data[10][1][1]);
276 CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
d8c77f39
DE
277};
278
279MissingPointsTestCase.prototype.testCustomBarsWithMissingPointsConnected = function() {
280 var data = [
281 [1, [1,null,1]],
282 [2, [1,2,3]],
283 [3, null],
284 [4, [4,5,6]],
285 [5, [null,null,null]],
286 [6, [2,3,4]]
287 ];
288 var g = new Dygraph(
289 document.getElementById("graph"),
290 data,
291 {
292 connectSeparatedPoints: true,
293 drawPoints: true,
294 customBars: true,
295 colors: ['red']
296 }
297 );
298
299 var htx = g.hidden_ctx_;
300
30a5cfc6 301 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
d8c77f39
DE
302
303 var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
304 var p2 = g.toDomCoords(data[3][0], data[3][1][1]);
305 var p3 = g.toDomCoords(data[5][0], data[5][1][1]);
306 CanvasAssertions.assertConsecutiveLinesDrawn(htx,
307 [p1, p2, p3],
308 { strokeStyle: '#ff0000' });
309};
9bda5a1d 310MissingPointsTestCase.prototype.testLeftBoundaryWithMisingPoints = function() {
311 var data = [
312 [1, null, 3],
313 [2, 1, null],
314 [3, 0, 5],
315 [4, 2, 1],
316 [5, 4, null],
317 [6, 3, 2]
318 ];
319 var g = new Dygraph(
320 document.getElementById("graph"),
321 data,
322 {
323 connectSeparatedPoints: true,
324 drawPoints: true,
325 colors: ['red','blue']
326 }
327 );
328 g.updateOptions({ dateWindow : [ 2.5, 4.5 ] });
329 assertEquals(1, g.getLeftBoundary_(0));
330 assertEquals(0, g.getLeftBoundary_(1));
331
332 var domX = g.toDomXCoord(1.9);
333 var closestRow = g.findClosestRow(domX);
334 assertEquals(1, closestRow);
335
336 g.setSelection(closestRow);
337 assertEquals(1, g.selPoints_.length);
338 assertEquals(1, g.selPoints_[0].yval);
339
340
341 g.setSelection(3);
342 assertEquals(2, g.selPoints_.length);
343 assertEquals(g.selPoints_[0].xval, g.selPoints_[1].xval);
344 assertEquals(2, g.selPoints_[0].yval);
345 assertEquals(1, g.selPoints_[1].yval);
346};