Commit | Line | Data |
---|---|---|
6d6c60b6 RK |
1 | /** |
2 | * @fileoverview Test cases for how axis labels are chosen and formatted. | |
3 | * | |
4 | * @author dan@dygraphs.com (Dan Vanderkam) | |
5 | */ | |
89fdcedb | 6 | describe("axis-labels", function() { |
6d6c60b6 | 7 | |
89fdcedb | 8 | beforeEach(function() { |
6d6c60b6 | 9 | document.body.innerHTML = "<div id='graph'></div>"; |
89fdcedb | 10 | }); |
6d6c60b6 | 11 | |
89fdcedb DV |
12 | afterEach(function() { |
13 | }); | |
6d6c60b6 | 14 | |
319d0361 | 15 | var simpleData = |
d574a45e | 16 | "X,Y,Y2\n" + |
cb136039 RK |
17 | "0,-1,.5\n" + |
18 | "1,0,.7\n" + | |
19 | "2,1,.4\n" + | |
20 | "3,0,.98\n"; | |
6d6c60b6 | 21 | |
319d0361 | 22 | var kCloseFloat = 1.0e-10; |
6d6c60b6 | 23 | |
89fdcedb | 24 | it('testMinusOneToOne', function() { |
6d6c60b6 RK |
25 | var opts = { |
26 | width: 480, | |
27 | height: 320 | |
28 | }; | |
29 | var data = "X,Y\n" + | |
30 | "0,-1\n" + | |
31 | "1,0\n" + | |
32 | "2,1\n" + | |
33 | "3,0\n" | |
34 | ; | |
35 | ||
36 | var graph = document.getElementById("graph"); | |
37 | var g = new Dygraph(graph, data, opts); | |
38 | ||
39 | // TODO(danvk): would ['-1.0','-0.5','0.0','0.5','1.0'] be better? | |
89fdcedb | 40 | assert.deepEqual(['-1','-0.5','0','0.5','1'], Util.getYLabels()); |
6d6c60b6 RK |
41 | |
42 | // Go up to 2 | |
43 | data += "4,2\n"; | |
44 | g.updateOptions({file: data}); | |
89fdcedb | 45 | assert.deepEqual(['-1','-0.5','0','0.5','1','1.5','2'], Util.getYLabels()); |
6d6c60b6 RK |
46 | |
47 | // Now 10 | |
48 | data += "5,10\n"; | |
49 | g.updateOptions({file: data}); | |
89fdcedb | 50 | assert.deepEqual(['-2','0','2','4','6','8','10'], Util.getYLabels()); |
6d6c60b6 RK |
51 | |
52 | // Now 100 | |
53 | data += "6,100\n"; | |
54 | g.updateOptions({file: data}); | |
89fdcedb | 55 | assert.deepEqual(['0','20','40','60','80','100'], Util.getYLabels()); |
6d6c60b6 RK |
56 | |
57 | g.setSelection(0); | |
89fdcedb DV |
58 | assert.equal('0: Y: -1', Util.getLegend()); |
59 | }); | |
6d6c60b6 | 60 | |
89fdcedb | 61 | it('testSmallRangeNearZero', function() { |
6d6c60b6 RK |
62 | var opts = { |
63 | drawAxesAtZero: true, | |
64 | width: 480, | |
65 | height: 320 | |
66 | }; | |
67 | var data = "X,Y\n" + | |
68 | "0,-1\n" + | |
69 | "1,0\n" + | |
70 | "2,1\n" + | |
71 | "3,0\n" | |
72 | ; | |
73 | opts.valueRange = [-0.1, 0.1]; | |
74 | ||
75 | var graph = document.getElementById("graph"); | |
76 | var g = new Dygraph(graph, data, opts); | |
dc910fce | 77 | assertDeepCloseTo([-0.1,-0.05,0,0.05], |
319d0361 | 78 | Util.makeNumbers(Util.getYLabels()), kCloseFloat); |
6d6c60b6 RK |
79 | |
80 | opts.valueRange = [-0.05, 0.05]; | |
81 | g.updateOptions(opts); | |
89fdcedb | 82 | assert.deepEqual([-0.04,-0.02,0,0.02,0.04], |
dc910fce | 83 | Util.makeNumbers(Util.getYLabels())); |
6d6c60b6 RK |
84 | |
85 | opts.valueRange = [-0.01, 0.01]; | |
86 | g.updateOptions(opts); | |
89fdcedb | 87 | assert.deepEqual([-0.01,-0.005,0,0.005], |
dc910fce | 88 | Util.makeNumbers(Util.getYLabels())); |
6d6c60b6 RK |
89 | |
90 | g.setSelection(1); | |
89fdcedb DV |
91 | assert.equal('1: Y: 0', Util.getLegend()); |
92 | }); | |
6d6c60b6 | 93 | |
89fdcedb | 94 | it('testSmallRangeAwayFromZero', function() { |
6d6c60b6 RK |
95 | var opts = { |
96 | width: 480, | |
97 | height: 320 | |
98 | }; | |
99 | var data = "X,Y\n" + | |
100 | "0,-1\n" + | |
101 | "1,0\n" + | |
102 | "2,1\n" + | |
103 | "3,0\n" | |
104 | ; | |
105 | var graph = document.getElementById("graph"); | |
106 | ||
107 | opts.valueRange = [9.9, 10.1]; | |
108 | var g = new Dygraph(graph, data, opts); | |
89fdcedb | 109 | assert.deepEqual(["9.9","9.92","9.94","9.96","9.98","10","10.02","10.04","10.06","10.08"], Util.getYLabels()); |
6d6c60b6 RK |
110 | |
111 | opts.valueRange = [9.99, 10.01]; | |
112 | g.updateOptions(opts); | |
113 | // TODO(danvk): this is bad | |
89fdcedb | 114 | assert.deepEqual(["9.99","9.99","9.99","10","10","10","10","10","10.01","10.01"], Util.getYLabels()); |
6d6c60b6 RK |
115 | |
116 | opts.valueRange = [9.999, 10.001]; | |
117 | g.updateOptions(opts); | |
118 | // TODO(danvk): this is even worse! | |
89fdcedb | 119 | assert.deepEqual(["10","10","10","10"], Util.getYLabels()); |
6d6c60b6 RK |
120 | |
121 | g.setSelection(1); | |
89fdcedb DV |
122 | assert.equal('1: Y: 0', Util.getLegend()); |
123 | }); | |
6d6c60b6 | 124 | |
89fdcedb | 125 | it('testXAxisTimeLabelFormatter', function() { |
6d6c60b6 RK |
126 | var opts = { |
127 | width: 480, | |
128 | height: 320 | |
129 | }; | |
130 | var data = [[5.0,0],[5.1,1],[5.2,2],[5.3,3],[5.4,4],[5.5,5],[5.6,6],[5.7,7],[5.8,8],[5.9,9]]; | |
131 | var graph = document.getElementById("graph"); | |
132 | var g = new Dygraph(graph, data, opts); | |
133 | g.updateOptions({ | |
134 | axes : { | |
135 | x : { | |
136 | axisLabelFormatter : function (totalMinutes) { | |
137 | var hours = Math.floor( totalMinutes / 60); | |
138 | var minutes = Math.floor((totalMinutes - (hours * 60))); | |
139 | var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60)); | |
140 | ||
141 | if (hours < 10) hours = "0" + hours; | |
142 | if (minutes < 10) minutes = "0" + minutes; | |
143 | if (seconds < 10) seconds = "0" + seconds; | |
144 | ||
145 | return hours + ':' + minutes + ':' + seconds; | |
146 | } | |
147 | } | |
148 | } | |
149 | }); | |
150 | ||
89fdcedb | 151 | assert.deepEqual(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], Util.getXLabels()); |
6d6c60b6 RK |
152 | |
153 | // The legend does not use the axisLabelFormatter: | |
154 | g.setSelection(1); | |
89fdcedb DV |
155 | assert.equal('5.1: Y1: 1', Util.getLegend()); |
156 | }); | |
6d6c60b6 | 157 | |
89fdcedb | 158 | it('testAxisLabelFormatter', function() { |
6d6c60b6 RK |
159 | var opts = { |
160 | width: 480, | |
161 | height: 320, | |
162 | axes : { | |
163 | x : { | |
164 | axisLabelFormatter : function(x, granularity, opts, dg) { | |
89fdcedb DV |
165 | assert.equal('number', typeof(x)); |
166 | assert.equal('number', typeof(granularity)); | |
167 | assert.equal('function', typeof(opts)); | |
168 | assert.equal('[Dygraph graph]', dg.toString()); | |
6d6c60b6 RK |
169 | return 'x' + x; |
170 | } | |
171 | }, | |
172 | y : { | |
173 | axisLabelFormatter : function(y, granularity, opts, dg) { | |
89fdcedb DV |
174 | assert.equal('number', typeof(y)); |
175 | assert.equal('number', typeof(granularity)); | |
176 | assert.equal('function', typeof(opts)); | |
177 | assert.equal('[Dygraph graph]', dg.toString()); | |
6d6c60b6 RK |
178 | return 'y' + y; |
179 | } | |
180 | } | |
181 | }, | |
182 | labels: ['x', 'y'] | |
183 | }; | |
184 | var data = []; | |
185 | for (var i = 0; i < 10; i++) { | |
186 | data.push([i, 2 * i]); | |
187 | } | |
188 | var graph = document.getElementById("graph"); | |
189 | var g = new Dygraph(graph, data, opts); | |
190 | ||
89fdcedb DV |
191 | assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels()); |
192 | assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels()); | |
6d6c60b6 RK |
193 | |
194 | g.setSelection(2); | |
89fdcedb DV |
195 | assert.equal("2: y: 4", Util.getLegend()); |
196 | }); | |
6d6c60b6 | 197 | |
89fdcedb | 198 | it('testDateAxisLabelFormatter', function() { |
6d6c60b6 RK |
199 | var opts = { |
200 | width: 480, | |
201 | height: 320, | |
202 | axes : { | |
203 | x : { | |
e0269a3d | 204 | pixelsPerLabel: 60, |
6d6c60b6 | 205 | axisLabelFormatter : function(x, granularity, opts, dg) { |
89fdcedb DV |
206 | assert.isTrue(Dygraph.isDateLike(x)); |
207 | assert.equal('number', typeof(granularity)); | |
208 | assert.equal('function', typeof(opts)); | |
209 | assert.equal('[Dygraph graph]', dg.toString()); | |
464b5f50 | 210 | return 'x' + Util.formatDate(x); |
6d6c60b6 RK |
211 | } |
212 | }, | |
213 | y : { | |
214 | axisLabelFormatter : function(y, granularity, opts, dg) { | |
89fdcedb DV |
215 | assert.equal('number', typeof(y)); |
216 | assert.equal('number', typeof(granularity)); | |
217 | assert.equal('function', typeof(opts)); | |
218 | assert.equal('[Dygraph graph]', dg.toString()); | |
6d6c60b6 RK |
219 | return 'y' + y; |
220 | } | |
221 | } | |
222 | }, | |
223 | labels: ['x', 'y'] | |
224 | }; | |
225 | var data = []; | |
226 | for (var i = 1; i < 10; i++) { | |
227 | data.push([new Date("2011/01/0" + i), 2 * i]); | |
228 | } | |
229 | var graph = document.getElementById("graph"); | |
230 | var g = new Dygraph(graph, data, opts); | |
231 | ||
89fdcedb DV |
232 | assert.deepEqual(["x2011/01/02","x2011/01/04","x2011/01/06","x2011/01/08"], Util.getXLabels()); |
233 | assert.deepEqual(["y5","y10","y15"], Util.getYLabels()); | |
6d6c60b6 RK |
234 | |
235 | g.setSelection(0); | |
89fdcedb DV |
236 | assert.equal("2011/01/01: y: 2", Util.getLegend()); |
237 | }); | |
6d6c60b6 RK |
238 | |
239 | // This test verifies that when a valueFormatter is set (but not an | |
240 | // axisLabelFormatter), then the valueFormatter is used to format the axis | |
241 | // labels. | |
89fdcedb | 242 | it('testValueFormatter', function() { |
6d6c60b6 RK |
243 | var opts = { |
244 | width: 480, | |
245 | height: 320, | |
6addd5b7 DV |
246 | axes: { |
247 | x: { | |
be7543ac | 248 | valueFormatter: function(x, opts, series_name, dg, row, col) { |
89fdcedb DV |
249 | assert.equal('number', typeof(x)); |
250 | assert.equal('function', typeof(opts)); | |
251 | assert.equal('string', typeof(series_name)); | |
252 | assert.equal('[Dygraph graph]', dg.toString()); | |
253 | assert.equal('number', typeof(row)); | |
254 | assert.equal('number', typeof(col)); | |
255 | assert.equal(dg, this); | |
6d6c60b6 RK |
256 | return 'x' + x; |
257 | } | |
258 | }, | |
6addd5b7 | 259 | y: { |
be7543ac | 260 | valueFormatter: function(y, opts, series_name, dg, row, col) { |
89fdcedb DV |
261 | assert.equal('number', typeof(y)); |
262 | assert.equal('function', typeof(opts)); | |
263 | assert.equal('string', typeof(series_name)); | |
264 | assert.equal('[Dygraph graph]', dg.toString()); | |
265 | assert.equal('number', typeof(row)); | |
266 | assert.equal('number', typeof(col)); | |
267 | assert.equal(dg, this); | |
6d6c60b6 RK |
268 | return 'y' + y; |
269 | } | |
270 | } | |
271 | }, | |
272 | labels: ['x', 'y'] | |
273 | }; | |
274 | var data = []; | |
275 | for (var i = 0; i < 10; i++) { | |
276 | data.push([i, 2 * i]); | |
277 | } | |
278 | var graph = document.getElementById("graph"); | |
279 | var g = new Dygraph(graph, data, opts); | |
280 | ||
281 | // the valueFormatter options do not affect the ticks. | |
89fdcedb DV |
282 | assert.deepEqual(['0','2','4','6','8'], Util.getXLabels()); |
283 | assert.deepEqual(["0","5","10","15"], | |
846038aa | 284 | Util.getYLabels()); |
6d6c60b6 RK |
285 | |
286 | // they do affect the legend, however. | |
287 | g.setSelection(2); | |
89fdcedb DV |
288 | assert.equal("x2: y: y4", Util.getLegend()); |
289 | }); | |
6d6c60b6 | 290 | |
89fdcedb | 291 | it('testDateValueFormatter', function() { |
6d6c60b6 RK |
292 | var opts = { |
293 | width: 480, | |
294 | height: 320, | |
295 | axes : { | |
296 | x : { | |
e0269a3d | 297 | pixelsPerLabel: 60, |
be7543ac | 298 | valueFormatter: function(x, opts, series_name, dg, row, col) { |
89fdcedb DV |
299 | assert.equal('number', typeof(x)); |
300 | assert.equal('function', typeof(opts)); | |
301 | assert.equal('string', typeof(series_name)); | |
302 | assert.equal('[Dygraph graph]', dg.toString()); | |
303 | assert.equal('number', typeof(row)); | |
304 | assert.equal('number', typeof(col)); | |
305 | assert.equal(dg, this); | |
464b5f50 | 306 | return 'x' + Util.formatDate(x); |
6d6c60b6 RK |
307 | } |
308 | }, | |
309 | y : { | |
be7543ac | 310 | valueFormatter: function(y, opts, series_name, dg, row, col) { |
89fdcedb DV |
311 | assert.equal('number', typeof(y)); |
312 | assert.equal('function', typeof(opts)); | |
313 | assert.equal('string', typeof(series_name)); | |
314 | assert.equal('[Dygraph graph]', dg.toString()); | |
315 | assert.equal('number', typeof(row)); | |
316 | assert.equal('number', typeof(col)); | |
317 | assert.equal(dg, this); | |
6d6c60b6 RK |
318 | return 'y' + y; |
319 | } | |
320 | } | |
321 | }, | |
322 | labels: ['x', 'y'] | |
323 | }; | |
324 | ||
325 | var data = []; | |
326 | for (var i = 1; i < 10; i++) { | |
327 | data.push([new Date("2011/01/0" + i), 2 * i]); | |
328 | } | |
329 | var graph = document.getElementById("graph"); | |
330 | var g = new Dygraph(graph, data, opts); | |
331 | ||
332 | // valueFormatters do not affect ticks. | |
89fdcedb DV |
333 | assert.deepEqual(["02 Jan","04 Jan","06 Jan","08 Jan"], Util.getXLabels()); |
334 | assert.deepEqual(["5","10","15"], Util.getYLabels()); | |
6d6c60b6 RK |
335 | |
336 | // the valueFormatter options also affect the legend. | |
337 | g.setSelection(2); | |
89fdcedb DV |
338 | assert.equal('x2011/01/03: y: y6', Util.getLegend()); |
339 | }); | |
6d6c60b6 RK |
340 | |
341 | // This test verifies that when both a valueFormatter and an axisLabelFormatter | |
342 | // are specified, the axisLabelFormatter takes precedence. | |
89fdcedb | 343 | it('testAxisLabelFormatterPrecedence', function() { |
6d6c60b6 RK |
344 | var opts = { |
345 | width: 480, | |
346 | height: 320, | |
347 | axes : { | |
348 | x : { | |
349 | valueFormatter: function(x) { | |
89fdcedb | 350 | assert.equal('[Dygraph graph]', this.toString()); |
6d6c60b6 RK |
351 | return 'xvf' + x; |
352 | }, | |
353 | axisLabelFormatter: function(x, granularity) { | |
89fdcedb | 354 | assert.equal('[Dygraph graph]', this.toString()); |
6d6c60b6 RK |
355 | return 'x' + x; |
356 | } | |
357 | }, | |
358 | y : { | |
359 | valueFormatter: function(y) { | |
89fdcedb | 360 | assert.equal('[Dygraph graph]', this.toString()); |
6d6c60b6 RK |
361 | return 'yvf' + y; |
362 | }, | |
363 | axisLabelFormatter: function(y) { | |
89fdcedb | 364 | assert.equal('[Dygraph graph]', this.toString()); |
6d6c60b6 RK |
365 | return 'y' + y; |
366 | } | |
367 | } | |
368 | }, | |
369 | labels: ['x', 'y'] | |
370 | }; | |
371 | var data = []; | |
372 | for (var i = 0; i < 10; i++) { | |
373 | data.push([i, 2 * i]); | |
374 | } | |
375 | var graph = document.getElementById("graph"); | |
376 | var g = new Dygraph(graph, data, opts); | |
377 | ||
89fdcedb DV |
378 | assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels()); |
379 | assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels()); | |
6d6c60b6 RK |
380 | |
381 | g.setSelection(9); | |
89fdcedb DV |
382 | assert.equal("xvf9: y: yvf18", Util.getLegend()); |
383 | }); | |
6d6c60b6 RK |
384 | |
385 | // This is the same as the previous test, except that options are added | |
386 | // one-by-one. | |
89fdcedb | 387 | it('testAxisLabelFormatterIncremental', function() { |
6d6c60b6 RK |
388 | var opts = { |
389 | width: 480, | |
390 | height: 320, | |
391 | labels: ['x', 'y'] | |
392 | }; | |
393 | var data = []; | |
394 | for (var i = 0; i < 10; i++) { | |
395 | data.push([i, 2 * i]); | |
396 | } | |
397 | var graph = document.getElementById("graph"); | |
398 | var g = new Dygraph(graph, data, opts); | |
399 | g.updateOptions({ | |
400 | axes : { | |
401 | x : { | |
402 | valueFormatter: function(x) { | |
403 | return 'xvf' + x; | |
404 | } | |
405 | } | |
406 | } | |
407 | }); | |
408 | g.updateOptions({ | |
409 | axes : { | |
410 | y : { | |
411 | valueFormatter: function(y) { | |
412 | return 'yvf' + y; | |
413 | } | |
414 | } | |
415 | } | |
416 | }); | |
417 | g.updateOptions({ | |
418 | axes : { | |
419 | x : { | |
420 | axisLabelFormatter: function(x, granularity) { | |
421 | return 'x' + x; | |
422 | } | |
423 | } | |
424 | } | |
425 | }); | |
426 | g.updateOptions({ | |
427 | axes : { | |
428 | y : { | |
429 | axisLabelFormatter: function(y) { | |
430 | return 'y' + y; | |
431 | } | |
432 | } | |
433 | } | |
434 | }); | |
435 | ||
89fdcedb DV |
436 | assert.deepEqual(["x0","x2","x4","x6","x8"], Util.getXLabels()); |
437 | assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels()); | |
6d6c60b6 RK |
438 | |
439 | g.setSelection(9); | |
89fdcedb DV |
440 | assert.equal("xvf9: y: yvf18", Util.getLegend()); |
441 | }); | |
6d6c60b6 | 442 | |
89fdcedb | 443 | it('testGlobalFormatters', function() { |
6d6c60b6 RK |
444 | var opts = { |
445 | width: 480, | |
446 | height: 320, | |
447 | labels: ['x', 'y'], | |
448 | valueFormatter: function(x) { | |
89fdcedb | 449 | assert.equal('[Dygraph graph]', this); |
6d6c60b6 RK |
450 | return 'vf' + x; |
451 | }, | |
452 | axisLabelFormatter: function(x) { | |
89fdcedb | 453 | assert.equal('[Dygraph graph]', this); |
6d6c60b6 RK |
454 | return 'alf' + x; |
455 | } | |
456 | }; | |
457 | var data = []; | |
458 | for (var i = 0; i < 10; i++) { | |
459 | data.push([i, 2 * i]); | |
460 | } | |
461 | var graph = document.getElementById("graph"); | |
462 | var g = new Dygraph(graph, data, opts); | |
463 | ||
89fdcedb DV |
464 | assert.deepEqual(['alf0','alf2','alf4','alf6','alf8'], Util.getXLabels()); |
465 | assert.deepEqual(["alf0","alf5","alf10","alf15"], Util.getYLabels()); | |
6d6c60b6 RK |
466 | |
467 | g.setSelection(9); | |
89fdcedb DV |
468 | assert.equal("vf9: y: vf18", Util.getLegend()); |
469 | }); | |
6d6c60b6 | 470 | |
89fdcedb | 471 | it('testValueFormatterParameters', function() { |
be7543ac DV |
472 | var calls = []; |
473 | // change any functions in list to 'fn' -- functions can't be asserted. | |
474 | var killFunctions = function(list) { | |
475 | var out = []; | |
476 | for (var i = 0; i < list.length; i++) { | |
477 | if (typeof(list[i]) == 'function') { | |
478 | out[i] = 'fn'; | |
479 | } else { | |
480 | out[i] = list[i]; | |
481 | } | |
482 | } | |
483 | return out; | |
484 | }; | |
485 | var taggedRecorder = function(tag) { | |
486 | return function() { | |
6addd5b7 | 487 | calls.push([tag].concat([this], killFunctions(arguments))); |
be7543ac DV |
488 | return ''; |
489 | } | |
490 | }; | |
491 | var opts = { | |
492 | axes: { | |
493 | x: { valueFormatter: taggedRecorder('x') }, | |
494 | y: { valueFormatter: taggedRecorder('y') }, | |
495 | y2: { valueFormatter: taggedRecorder('y2') } | |
496 | }, | |
497 | series: { | |
498 | 'y1': { axis: 'y1'}, | |
499 | 'y2': { axis: 'y2'} | |
500 | }, | |
501 | labels: ['x', 'y1', 'y2'] | |
502 | }; | |
503 | var data = [ | |
504 | [0, 1, 2], | |
505 | [1, 3, 4] | |
506 | ]; | |
507 | var graph = document.getElementById('graph'); | |
508 | var g = new Dygraph(graph, data, opts); | |
509 | ||
89fdcedb | 510 | assert.deepEqual([], calls); |
be7543ac | 511 | g.setSelection(0); |
89fdcedb | 512 | assert.deepEqual([ |
be7543ac | 513 | // num or millis, opts, series, dygraph, row, col |
6addd5b7 DV |
514 | [ 'x', g, 0, 'fn', 'x', g, 0, 0], |
515 | [ 'y', g, 1, 'fn', 'y1', g, 0, 1], | |
516 | ['y2', g, 2, 'fn', 'y2', g, 0, 2] | |
54f4c379 DV |
517 | ], calls); |
518 | ||
519 | calls = []; | |
520 | g.setSelection(1); | |
89fdcedb | 521 | assert.deepEqual([ |
6addd5b7 DV |
522 | [ 'x', g, 1, 'fn', 'x', g, 1, 0], |
523 | [ 'y', g, 3, 'fn', 'y1', g, 1, 1], | |
524 | ['y2', g, 4, 'fn', 'y2', g, 1, 2] | |
be7543ac | 525 | ], calls); |
89fdcedb | 526 | }); |
be7543ac | 527 | |
89fdcedb | 528 | it('testSeriesOrder', function() { |
6d6c60b6 RK |
529 | var opts = { |
530 | width: 480, | |
531 | height: 320 | |
532 | }; | |
533 | var data = "x,00,01,10,11\n" + | |
534 | "0,101,201,301,401\n" + | |
535 | "1,102,202,302,402\n" + | |
536 | "2,103,203,303,403\n" + | |
537 | "3,104,204,304,404\n" | |
538 | ; | |
539 | ||
540 | var graph = document.getElementById("graph"); | |
541 | var g = new Dygraph(graph, data, opts); | |
542 | ||
543 | g.setSelection(2); | |
89fdcedb | 544 | assert.equal('2: 00: 103 01: 203 10: 303 11: 403', Util.getLegend()); |
6d6c60b6 RK |
545 | |
546 | // Sanity checks for indexFromSetName | |
89fdcedb DV |
547 | assert.equal(0, g.indexFromSetName("x")); |
548 | assert.equal(1, g.indexFromSetName("00")); | |
549 | assert.equal(null, g.indexFromSetName("abcde")); | |
6d6c60b6 RK |
550 | |
551 | // Verify that we get the label list back in the right order | |
89fdcedb DV |
552 | assert.deepEqual(["x", "00", "01", "10", "11"], g.getLabels()); |
553 | }); | |
de624512 | 554 | |
89fdcedb | 555 | it('testLabelKMB', function() { |
de624512 RK |
556 | var data = []; |
557 | data.push([0,0]); | |
558 | data.push([1,2000]); | |
559 | data.push([2,1000]); | |
560 | ||
561 | var g = new Dygraph( | |
562 | document.getElementById("graph"), | |
563 | data, | |
564 | { | |
565 | labels: [ 'X', 'bar' ], | |
566 | axes : { | |
567 | y: { | |
568 | labelsKMB: true | |
569 | } | |
570 | } | |
571 | } | |
572 | ); | |
573 | ||
89fdcedb DV |
574 | assert.deepEqual(["0", "500", "1K", "1.5K", "2K"], Util.getYLabels()); |
575 | }); | |
de624512 | 576 | |
89fdcedb | 577 | it('testLabelKMG2', function() { |
de624512 RK |
578 | var data = []; |
579 | data.push([0,0]); | |
580 | data.push([1,2000]); | |
581 | data.push([2,1000]); | |
582 | ||
583 | var g = new Dygraph( | |
584 | document.getElementById("graph"), | |
585 | data, | |
586 | { | |
587 | labels: [ 'X', 'bar' ], | |
588 | axes : { | |
589 | y: { | |
590 | labelsKMG2: true | |
591 | } | |
592 | } | |
593 | } | |
594 | ); | |
595 | ||
dc910fce DV |
596 | assert.deepEqual(["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"], |
597 | Util.getYLabels()); | |
89fdcedb | 598 | }); |
b0d3471d | 599 | |
94647da2 | 600 | // Same as testLabelKMG2 but specifies the option at the |
a716aff2 | 601 | // top of the option dictionary. |
89fdcedb | 602 | it('testLabelKMG2_top', function() { |
a716aff2 RK |
603 | var data = []; |
604 | data.push([0,0]); | |
605 | data.push([1,2000]); | |
606 | data.push([2,1000]); | |
607 | ||
608 | var g = new Dygraph( | |
609 | document.getElementById("graph"), | |
610 | data, | |
611 | { | |
612 | labels: [ 'X', 'bar' ], | |
613 | labelsKMG2: true | |
614 | } | |
615 | ); | |
616 | ||
dc910fce | 617 | assert.deepEqual( |
a716aff2 RK |
618 | ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"], |
619 | Util.getYLabels()); | |
89fdcedb | 620 | }); |
a716aff2 | 621 | |
a681c4cb DV |
622 | it('testSmallLabelKMB', function() { |
623 | var data = []; | |
624 | data.push([0, 0]); | |
625 | data.push([1, 1e-6]); | |
626 | data.push([2, 2e-6]); | |
627 | ||
628 | var g = new Dygraph( | |
629 | document.getElementById("graph"), | |
630 | data, | |
631 | { | |
632 | labels: [ 'X', 'bar' ], | |
633 | axes : { | |
634 | y: { | |
635 | labelsKMB: true | |
636 | } | |
637 | } | |
638 | } | |
639 | ); | |
640 | ||
641 | // TODO(danvk): use prefixes here (e.g. m, µ, n) | |
642 | assert.deepEqual(['0', '5.00e-7', '1.00e-6', '1.50e-6', '2.00e-6'], | |
643 | Util.getYLabels()); | |
644 | }); | |
645 | ||
646 | it('testSmallLabelKMG2', function() { | |
647 | var data = []; | |
648 | data.push([0, 0]); | |
649 | data.push([1, 1e-6]); | |
650 | data.push([2, 2e-6]); | |
651 | ||
652 | var g = new Dygraph( | |
653 | document.getElementById("graph"), | |
654 | data, | |
655 | { | |
656 | labels: [ 'X', 'bar' ], | |
657 | axes : { | |
658 | y: { | |
659 | labelsKMG2: true | |
660 | } | |
661 | } | |
662 | } | |
663 | ); | |
664 | ||
665 | // TODO(danvk): this is strange--the values aren't on powers of two, and are | |
666 | // these units really used for powers of two in <1? | |
667 | assert.deepEqual(['0', '0.48u', '0.95u', '1.43u', '1.91u'], | |
668 | Util.getYLabels()); | |
669 | }); | |
670 | ||
b0d3471d RK |
671 | /** |
672 | * Verify that log scale axis range is properly specified. | |
673 | */ | |
89fdcedb | 674 | it('testLogScale', function() { |
b0d3471d RK |
675 | var g = new Dygraph("graph", [[0, 5], [1, 1000]], { logscale : true }); |
676 | var nonEmptyLabels = Util.getYLabels().filter(function(x) { return x.length > 0; }); | |
89fdcedb | 677 | assert.deepEqual(["5","10","20","50","100","200","500","1000"], nonEmptyLabels); |
b0d3471d RK |
678 | |
679 | g.updateOptions({ logscale : false }); | |
89fdcedb DV |
680 | assert.deepEqual(['0','200','400','600','800','1000'], Util.getYLabels()); |
681 | }); | |
478b866b RK |
682 | |
683 | /** | |
684 | * Verify that include zero range is properly specified. | |
685 | */ | |
89fdcedb | 686 | it('testIncludeZero', function() { |
478b866b | 687 | var g = new Dygraph("graph", [[0, 500], [1, 1000]], { includeZero : true }); |
89fdcedb | 688 | assert.deepEqual(['0','200','400','600','800','1000'], Util.getYLabels()); |
478b866b RK |
689 | |
690 | g.updateOptions({ includeZero : false }); | |
89fdcedb DV |
691 | assert.deepEqual(['500','600','700','800','900','1000'], Util.getYLabels()); |
692 | }); | |
d574a45e | 693 | |
89fdcedb | 694 | it('testAxisLabelFontSize', function() { |
48dc3815 | 695 | var graph = document.getElementById("graph"); |
319d0361 | 696 | var g = new Dygraph(graph, simpleData, {}); |
48dc3815 RK |
697 | |
698 | // Be sure we're dealing with a 14-point default. | |
89fdcedb | 699 | assert.equal(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize); |
48dc3815 | 700 | |
3a84670d RK |
701 | var assertFontSize = function(selector, expected) { |
702 | Util.assertStyleOfChildren(selector, "font-size", expected); | |
703 | } | |
704 | ||
dc910fce DV |
705 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "14px"); |
706 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y") , "14px"); | |
48dc3815 RK |
707 | |
708 | g.updateOptions({ axisLabelFontSize : 8}); | |
dc910fce DV |
709 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "8px"); |
710 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "8px"); | |
48dc3815 RK |
711 | |
712 | g.updateOptions({ | |
713 | axisLabelFontSize : null, | |
714 | axes : { | |
715 | x : { axisLabelFontSize : 5 }, | |
716 | } | |
717 | }); | |
718 | ||
dc910fce DV |
719 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "5px"); |
720 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "14px"); | |
48dc3815 RK |
721 | |
722 | g.updateOptions({ | |
723 | axes : { | |
724 | y : { axisLabelFontSize : 20 }, | |
725 | } | |
726 | }); | |
727 | ||
dc910fce DV |
728 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "5px"); |
729 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "20px"); | |
48dc3815 RK |
730 | |
731 | g.updateOptions({ | |
732 | series : { | |
733 | Y2 : { axis : "y2" } // copy y2 series to y2 axis. | |
734 | }, | |
735 | axes : { | |
736 | y2 : { axisLabelFontSize : 12 }, | |
737 | } | |
738 | }); | |
739 | ||
dc910fce DV |
740 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "5px"); |
741 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y1"), "20px"); | |
742 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y2"), "12px"); | |
89fdcedb | 743 | }); |
48dc3815 | 744 | |
89fdcedb | 745 | it('testAxisLabelFontSizeNull', function() { |
d574a45e | 746 | var graph = document.getElementById("graph"); |
319d0361 | 747 | var g = new Dygraph(graph, simpleData, |
d574a45e RK |
748 | { |
749 | axisLabelFontSize: null | |
750 | }); | |
751 | ||
3a84670d RK |
752 | var assertFontSize = function(selector, expected) { |
753 | Util.assertStyleOfChildren(selector, "font-size", expected); | |
5ab63877 | 754 | }; |
3a84670d RK |
755 | |
756 | // Be sure we're dealing with a 14-point default. | |
89fdcedb | 757 | assert.equal(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize); |
3a84670d | 758 | |
dc910fce DV |
759 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "14px"); |
760 | assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "14px"); | |
89fdcedb | 761 | }); |
3a84670d | 762 | |
89fdcedb | 763 | it('testAxisLabelColor', function() { |
3a84670d | 764 | var graph = document.getElementById("graph"); |
319d0361 | 765 | var g = new Dygraph(graph, simpleData, {}); |
3a84670d RK |
766 | |
767 | // Be sure we're dealing with a black default. | |
89fdcedb | 768 | assert.equal("black", Dygraph.DEFAULT_ATTRS.axisLabelColor); |
3a84670d RK |
769 | |
770 | var assertColor = function(selector, expected) { | |
771 | Util.assertStyleOfChildren(selector, "color", expected); | |
772 | } | |
773 | ||
dc910fce DV |
774 | assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 0)"); |
775 | assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)"); | |
3a84670d RK |
776 | |
777 | g.updateOptions({ axisLabelColor : "red"}); | |
dc910fce DV |
778 | assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(255, 0, 0)"); |
779 | assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(255, 0, 0)"); | |
3a84670d RK |
780 | |
781 | g.updateOptions({ | |
782 | axisLabelColor : null, | |
783 | axes : { | |
784 | x : { axisLabelColor : "blue" }, | |
785 | } | |
786 | }); | |
787 | ||
dc910fce DV |
788 | assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)"); |
789 | assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)"); | |
3a84670d RK |
790 | |
791 | g.updateOptions({ | |
792 | axes : { | |
793 | y : { axisLabelColor : "green" }, | |
794 | } | |
795 | }); | |
796 | ||
dc910fce DV |
797 | assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)"); |
798 | assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 128, 0)"); | |
3a84670d RK |
799 | |
800 | g.updateOptions({ | |
801 | series : { | |
802 | Y2 : { axis : "y2" } // copy y2 series to y2 axis. | |
803 | }, | |
804 | axes : { | |
805 | y2 : { axisLabelColor : "yellow" }, | |
806 | } | |
807 | }); | |
808 | ||
dc910fce DV |
809 | assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)"); |
810 | assertColor(document.querySelectorAll(".dygraph-axis-label-y1"), "rgb(0, 128, 0)"); | |
811 | assertColor(document.querySelectorAll(".dygraph-axis-label-y2"), "rgb(255, 255, 0)"); | |
89fdcedb | 812 | }); |
3a84670d | 813 | |
89fdcedb | 814 | it('testAxisLabelColorNull', function() { |
3a84670d | 815 | var graph = document.getElementById("graph"); |
319d0361 | 816 | var g = new Dygraph(graph, simpleData, |
3a84670d RK |
817 | { |
818 | axisLabelColor: null | |
819 | }); | |
820 | ||
821 | var assertColor = function(selector, expected) { | |
822 | Util.assertStyleOfChildren(selector, "color", expected); | |
823 | } | |
824 | ||
d574a45e | 825 | // Be sure we're dealing with a 14-point default. |
89fdcedb | 826 | assert.equal(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize); |
d574a45e | 827 | |
dc910fce DV |
828 | assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 0)"); |
829 | assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)"); | |
89fdcedb | 830 | }); |
2fd143d3 DV |
831 | |
832 | /* | |
833 | * This test shows that the label formatter overrides labelsKMB for all values. | |
834 | */ | |
89fdcedb | 835 | it('testLabelFormatterOverridesLabelsKMB', function() { |
2fd143d3 DV |
836 | var g = new Dygraph( |
837 | document.getElementById("graph"), | |
838 | "X,a,b\n" + | |
839 | "1,0,2000\n" + | |
840 | "2,500,1500\n" + | |
841 | "3,1000,1000\n" + | |
842 | "4,2000,0\n", { | |
843 | labelsKMB: true, | |
844 | axisLabelFormatter: function (v) { | |
845 | return v + ":X"; | |
846 | } | |
847 | }); | |
89fdcedb DV |
848 | assert.deepEqual(["0:X","500:X","1000:X","1500:X","2000:X"], Util.getYLabels()); |
849 | assert.deepEqual(["1:X","2:X","3:X"], Util.getXLabels()); | |
850 | }); | |
2fd143d3 DV |
851 | |
852 | /* | |
853 | * This test shows that you can override labelsKMB on the axis level. | |
854 | */ | |
89fdcedb | 855 | it('testLabelsKMBPerAxis', function() { |
c6975231 | 856 | var g = new Dygraph( |
2fd143d3 DV |
857 | document.getElementById("graph"), |
858 | "x,a,b\n" + | |
94647da2 RK |
859 | "1000,0,2000\n" + |
860 | "2000,500,1500\n" + | |
861 | "3000,1000,1000\n" + | |
862 | "4000,2000,0\n", { | |
863 | labelsKMB: false, | |
2fd143d3 | 864 | axes: { |
94647da2 RK |
865 | y2: { labelsKMB: true }, |
866 | x: { labelsKMB: true } | |
2fd143d3 DV |
867 | }, |
868 | series: { | |
d4cddcca | 869 | b: { axis: "y2" } |
2fd143d3 DV |
870 | } |
871 | }); | |
94647da2 RK |
872 | |
873 | // labelsKMB doesn't apply to the x axis. This value should be different. | |
bc262c40 | 874 | // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488 |
89fdcedb | 875 | assert.deepEqual(["1000","2000","3000"], Util.getXLabels()); |
dc910fce | 876 | assert.deepEqual(["0","500","1000","1500","2000"], Util.getYLabels(1)); |
89fdcedb DV |
877 | assert.deepEqual(["0","500","1K","1.5K","2K"], Util.getYLabels(2)); |
878 | }); | |
c6975231 | 879 | |
ace524b5 | 880 | /* |
94647da2 RK |
881 | * This test shows that you can override labelsKMG2 on the axis level. |
882 | */ | |
89fdcedb | 883 | it('testLabelsKMBG2IPerAxis', function() { |
94647da2 RK |
884 | var g = new Dygraph( |
885 | document.getElementById("graph"), | |
886 | "x,a,b\n" + | |
887 | "1000,0,2000\n" + | |
888 | "2000,500,1500\n" + | |
889 | "3000,1000,1000\n" + | |
890 | "4000,2000,0\n", { | |
891 | labelsKMG2: false, | |
892 | axes: { | |
893 | y2: { labelsKMG2: true }, | |
e0269a3d | 894 | x: { labelsKMG2: true, pixelsPerLabel: 60 } |
94647da2 RK |
895 | }, |
896 | series: { | |
d4cddcca | 897 | b: { axis: "y2" } |
94647da2 RK |
898 | } |
899 | }); | |
900 | ||
901 | // It is weird that labelsKMG2 does something on the x axis but KMB does not. | |
902 | // Plus I can't be sure they're doing the same thing as they're done in different | |
903 | // bits of code. | |
bc262c40 | 904 | // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488 |
89fdcedb | 905 | assert.deepEqual(["1024","2048","3072"], Util.getXLabels()); |
dc910fce | 906 | assert.deepEqual(["0","500","1000","1500","2000"], Util.getYLabels(1)); |
89fdcedb DV |
907 | assert.deepEqual(["0","500","1000","1.46k","1.95k"], Util.getYLabels(2)); |
908 | }); | |
94647da2 RK |
909 | |
910 | /** | |
911 | * This test shows you can override sigFigs on the axis level. | |
912 | */ | |
89fdcedb | 913 | it('testSigFigsPerAxis', function() { |
94647da2 RK |
914 | var g = new Dygraph( |
915 | document.getElementById("graph"), | |
916 | "x,a,b\n" + | |
917 | "1000,0,2000\n" + | |
918 | "2000,500,1500\n" + | |
919 | "3000,1000,1000\n" + | |
920 | "4000,2000,0\n", { | |
921 | sigFigs: 2, | |
922 | axes: { | |
923 | y2: { sigFigs: 6 }, | |
924 | x: { sigFigs: 8 } | |
925 | }, | |
926 | series: { | |
d4cddcca | 927 | b: { axis: "y2" } |
94647da2 RK |
928 | } |
929 | ||
930 | }); | |
931 | // sigFigs doesn't apply to the x axis. This value should be different. | |
bc262c40 | 932 | // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488 |
89fdcedb DV |
933 | assert.deepEqual(["1000","2000","3000"], Util.getXLabels()); |
934 | assert.deepEqual(["0.0","5.0e+2","1.0e+3","1.5e+3","2.0e+3"], Util.getYLabels(1)); | |
935 | assert.deepEqual(["0.00000","500.000","1000.00","1500.00","2000.00"], Util.getYLabels(2)); | |
936 | }); | |
94647da2 RK |
937 | |
938 | /** | |
939 | * This test shows you can override digitsAfterDecimal on the axis level. | |
940 | */ | |
89fdcedb | 941 | it('testDigitsAfterDecimalPerAxis', function() { |
94647da2 RK |
942 | var g = new Dygraph( |
943 | document.getElementById("graph"), | |
944 | "x,a,b\n" + | |
945 | "0.006,0.001,0.008\n" + | |
946 | "0.007,0.002,0.007\n" + | |
947 | "0.008,0.003,0.006\n" + | |
948 | "0.009,0.004,0.005\n", { | |
949 | digitsAfterDecimal: 1, | |
950 | series: { | |
d4cddcca | 951 | b: { axis: "y2" } |
94647da2 RK |
952 | } |
953 | ||
954 | }); | |
955 | ||
956 | g.updateOptions({ axes: { y: { digitsAfterDecimal: 3 }}}); | |
89fdcedb | 957 | assert.deepEqual(["0.001","0.002","0.002","0.003","0.003","0.004","0.004"], Util.getYLabels(1)); |
94647da2 | 958 | g.updateOptions({ axes: { y: { digitsAfterDecimal: 4 }}}); |
89fdcedb | 959 | assert.deepEqual(["0.001","0.0015","0.002","0.0025","0.003","0.0035","0.004"], Util.getYLabels(1)); |
94647da2 | 960 | g.updateOptions({ axes: { y: { digitsAfterDecimal: 5 }}}); |
89fdcedb | 961 | assert.deepEqual(["0.001","0.0015","0.002","0.0025","0.003","0.0035","0.004"], Util.getYLabels(1)); |
94647da2 | 962 | g.updateOptions({ axes: { y: { digitsAfterDecimal: null }}}); |
89fdcedb | 963 | assert.deepEqual(["1e-3","2e-3","2e-3","3e-3","3e-3","4e-3","4e-3"], Util.getYLabels(1)); |
94647da2 RK |
964 | |
965 | g.updateOptions({ axes: { y2: { digitsAfterDecimal: 3 }}}); | |
89fdcedb | 966 | assert.deepEqual(["0.005","0.006","0.006","0.007","0.007","0.008","0.008"], Util.getYLabels(2)); |
94647da2 | 967 | g.updateOptions({ axes: { y2: { digitsAfterDecimal: 4 }}}); |
89fdcedb | 968 | assert.deepEqual(["0.005","0.0055","0.006","0.0065","0.007","0.0075","0.008"], Util.getYLabels(2)); |
94647da2 | 969 | g.updateOptions({ axes: { y2: { digitsAfterDecimal: 5 }}}); |
89fdcedb | 970 | assert.deepEqual(["0.005","0.0055","0.006","0.0065","0.007","0.0075","0.008"], Util.getYLabels(2)); |
94647da2 | 971 | g.updateOptions({ axes: { y2: { digitsAfterDecimal: null }}}); |
89fdcedb | 972 | assert.deepEqual(["5e-3","6e-3","6e-3","7e-3","7e-3","7e-3","8e-3"], Util.getYLabels(2)); |
94647da2 RK |
973 | |
974 | ||
975 | // digitsAfterDecimal is ignored for the x-axis. | |
bc262c40 | 976 | // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488 |
94647da2 | 977 | g.updateOptions({ axes: { x: { digitsAfterDecimal: 3 }}}); |
89fdcedb | 978 | assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels()); |
94647da2 | 979 | g.updateOptions({ axes: { x: { digitsAfterDecimal: 4 }}}); |
89fdcedb | 980 | assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels()); |
94647da2 | 981 | g.updateOptions({ axes: { x: { digitsAfterDecimal: 5 }}}); |
89fdcedb | 982 | assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels()); |
94647da2 | 983 | g.updateOptions({ axes: { x: { digitsAfterDecimal: null }}}); |
89fdcedb DV |
984 | assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels()); |
985 | }); | |
94647da2 RK |
986 | |
987 | /** | |
988 | * This test shows you can override digitsAfterDecimal on the axis level. | |
989 | */ | |
89fdcedb | 990 | it('testMaxNumberWidthPerAxis', function() { |
94647da2 RK |
991 | var g = new Dygraph( |
992 | document.getElementById("graph"), | |
993 | "x,a,b\n" + | |
994 | "12401,12601,12804\n" + | |
995 | "12402,12602,12803\n" + | |
996 | "12403,12603,12802\n" + | |
997 | "12404,12604,12801\n", { | |
998 | maxNumberWidth: 1, | |
999 | series: { | |
d4cddcca | 1000 | b: { axis: "y2" } |
94647da2 RK |
1001 | } |
1002 | }); | |
d4cddcca | 1003 | |
94647da2 | 1004 | g.updateOptions({ axes: { y: { maxNumberWidth: 4 }}}); |
89fdcedb | 1005 | assert.deepEqual(["1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4"] , Util.getYLabels(1)); |
94647da2 | 1006 | g.updateOptions({ axes: { y: { maxNumberWidth: 5 }}}); |
89fdcedb | 1007 | assert.deepEqual(["12601","12601.5","12602","12602.5","12603","12603.5","12604"] , Util.getYLabels(1)); |
94647da2 | 1008 | g.updateOptions({ axes: { y: { maxNumberWidth: null }}}); |
89fdcedb | 1009 | assert.deepEqual(["1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4"] , Util.getYLabels(1)); |
94647da2 RK |
1010 | |
1011 | g.updateOptions({ axes: { y2: { maxNumberWidth: 4 }}}); | |
89fdcedb | 1012 | assert.deepEqual(["1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4"], Util.getYLabels(2)); |
94647da2 | 1013 | g.updateOptions({ axes: { y2: { maxNumberWidth: 5 }}}); |
89fdcedb | 1014 | assert.deepEqual(["12801","12801.5","12802","12802.5","12803","12803.5","12804"], Util.getYLabels(2)); |
94647da2 | 1015 | g.updateOptions({ axes: { y2: { maxNumberWidth: null }}}); |
89fdcedb | 1016 | assert.deepEqual(["1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4"], Util.getYLabels(2)); |
94647da2 RK |
1017 | |
1018 | // maxNumberWidth is ignored for the x-axis. | |
bc262c40 | 1019 | // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488 |
94647da2 | 1020 | g.updateOptions({ axes: { x: { maxNumberWidth: 4 }}}); |
89fdcedb | 1021 | assert.deepEqual(["12401","12402","12403"], Util.getXLabels()); |
94647da2 | 1022 | g.updateOptions({ axes: { x: { maxNumberWidth: 5 }}}); |
89fdcedb | 1023 | assert.deepEqual(["12401","12402","12403"], Util.getXLabels()); |
94647da2 | 1024 | g.updateOptions({ axes: { x: { maxNumberWidth: null }}}); |
89fdcedb DV |
1025 | assert.deepEqual(["12401","12402","12403"], Util.getXLabels()); |
1026 | }); | |
94647da2 RK |
1027 | |
1028 | /* | |
c6975231 DV |
1029 | // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=147 |
1030 | // Checks that axis labels stay sane across a DST change. | |
89fdcedb | 1031 | it('testLabelsCrossDstChange', function() { |
c6975231 DV |
1032 | // (From tests/daylight-savings.html) |
1033 | var g = new Dygraph( | |
1034 | document.getElementById("graph"), | |
1035 | "Date/Time,Purchases\n" + | |
1036 | "2010-11-05 00:00:00,167082\n" + | |
1037 | "2010-11-06 00:00:00,168571\n" + | |
1038 | "2010-11-07 00:00:00,177796\n" + | |
1039 | "2010-11-08 00:00:00,165587\n" + | |
1040 | "2010-11-09 00:00:00,164380\n", | |
1041 | { width: 1024 } | |
1042 | ); | |
1043 | ||
1044 | // Dates and "nice" hours: 6AM/PM and noon, not 5AM/11AM/... | |
1045 | var okLabels = { | |
1046 | '05Nov': true, | |
1047 | '06Nov': true, | |
1048 | '07Nov': true, | |
1049 | '08Nov': true, | |
1050 | '09Nov': true, | |
1051 | '06:00': true, | |
1052 | '12:00': true, | |
1053 | '18:00': true | |
1054 | }; | |
1055 | ||
1056 | var xLabels = Util.getXLabels(); | |
1057 | for (var i = 0; i < xLabels.length; i++) { | |
89fdcedb | 1058 | assert.isTrue(okLabels[xLabels[i]]); |
c6975231 | 1059 | } |
0f9bf369 DV |
1060 | |
1061 | // This range had issues of its own on tests/daylight-savings.html. | |
1062 | g.updateOptions({ | |
1063 | dateWindow: [1289109997722.8127, 1289261208937.7659] | |
1064 | }); | |
1065 | xLabels = Util.getXLabels(); | |
1066 | for (var i = 0; i < xLabels.length; i++) { | |
89fdcedb | 1067 | assert.isTrue(okLabels[xLabels[i]]); |
0f9bf369 | 1068 | } |
89fdcedb | 1069 | }); |
0f9bf369 DV |
1070 | |
1071 | ||
1072 | // Tests data which crosses a "fall back" at a high enough frequency that you | |
1073 | // can see both 1:00 A.M.s. | |
89fdcedb | 1074 | it('testLabelsCrossDstChangeHighFreq', function() { |
0f9bf369 DV |
1075 | // Generate data which crosses the EST/EDT boundary. |
1076 | var dst_data = []; | |
1077 | var base_ms = 1383454200000; | |
1078 | for (var x = base_ms; x < base_ms + 1000 * 60 * 80; x += 1000) { | |
1079 | dst_data.push([new Date(x), x]); | |
1080 | } | |
1081 | ||
1082 | var g = new Dygraph( | |
1083 | document.getElementById("graph"), | |
1084 | dst_data, | |
1085 | { width: 1024, labels: ['Date', 'Value'] } | |
1086 | ); | |
1087 | ||
89fdcedb | 1088 | assert.deepEqual([ |
0f9bf369 DV |
1089 | '00:50', '00:55', |
1090 | '01:00', '01:05', '01:10', '01:15', '01:20', '01:25', | |
1091 | '01:30', '01:35', '01:40', '01:45', '01:50', '01:55', | |
1092 | '01:00', '01:05' // 1 AM number two! | |
1093 | ], Util.getXLabels()); | |
1094 | ||
1095 | // Now zoom past the initial 1 AM. This used to cause trouble. | |
1096 | g.updateOptions({ | |
1097 | dateWindow: [1383454200000 + 15*60*1000, g.xAxisExtremes()[1]]} | |
1098 | ); | |
89fdcedb | 1099 | assert.deepEqual([ |
0f9bf369 DV |
1100 | '01:05', '01:10', '01:15', '01:20', '01:25', |
1101 | '01:30', '01:35', '01:40', '01:45', '01:50', '01:55', | |
1102 | '01:00', '01:05' // 1 AM number two! | |
1103 | ], Util.getXLabels()); | |
89fdcedb | 1104 | }); |
fb0c64b0 DV |
1105 | |
1106 | ||
1107 | // Tests data which crosses a "spring forward" at a low frequency. | |
1108 | // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=433 | |
89fdcedb | 1109 | it('testLabelsCrossSpringForward', function() { |
fb0c64b0 DV |
1110 | var g = new Dygraph( |
1111 | document.getElementById("graph"), | |
1112 | "Date/Time,Purchases\n" + | |
1113 | "2011-03-11 00:00:00,167082\n" + | |
1114 | "2011-03-12 00:00:00,168571\n" + | |
1115 | "2011-03-13 00:00:00,177796\n" + | |
1116 | "2011-03-14 00:00:00,165587\n" + | |
1117 | "2011-03-15 00:00:00,164380\n", | |
1118 | { | |
1119 | width: 1024, | |
1120 | dateWindow: [1299989043119.4365, 1300080693627.4866] | |
1121 | }); | |
1122 | ||
1123 | var okLabels = { | |
1124 | '13Mar': true, | |
1125 | // '02:00': true, // not a real time! | |
1126 | '04:00': true, | |
1127 | '06:00': true, | |
1128 | '08:00': true, | |
1129 | '10:00': true, | |
1130 | '12:00': true, | |
1131 | '14:00': true, | |
1132 | '16:00': true, | |
1133 | '18:00': true, | |
1134 | '20:00': true, | |
1135 | '22:00': true, | |
1136 | '14Mar': true | |
1137 | }; | |
1138 | ||
1139 | var xLabels = Util.getXLabels(); | |
1140 | for (var i = 0; i < xLabels.length; i++) { | |
89fdcedb | 1141 | assert.isTrue(okLabels[xLabels[i]]); |
fb0c64b0 | 1142 | } |
89fdcedb | 1143 | }); |
fb0c64b0 | 1144 | |
89fdcedb | 1145 | it('testLabelsCrossSpringForwardHighFreq', function() { |
fb0c64b0 DV |
1146 | var base_ms_spring = 1299999000000; |
1147 | var dst_data_spring = []; | |
1148 | for (var x = base_ms_spring; x < base_ms_spring + 1000 * 60 * 80; x += 1000) { | |
1149 | dst_data_spring.push([new Date(x), x]); | |
1150 | } | |
1151 | ||
1152 | var g = new Dygraph( | |
1153 | document.getElementById("graph"), | |
1154 | dst_data_spring, | |
1155 | { width: 1024, labels: ['Date', 'Value'] } | |
1156 | ); | |
1157 | ||
89fdcedb | 1158 | assert.deepEqual([ |
fb0c64b0 DV |
1159 | '01:50', '01:55', |
1160 | '03:00', '03:05', '03:10', '03:15', '03:20', '03:25', | |
1161 | '03:30', '03:35', '03:40', '03:45', '03:50', '03:55', | |
1162 | '04:00', '04:05' | |
1163 | ], Util.getXLabels()); | |
89fdcedb | 1164 | }); |
ace524b5 | 1165 | */ |
89fdcedb DV |
1166 | |
1167 | }); |