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