Merge pull request #270 from danvk/issue-126
[dygraphs.git] / auto_tests / tests / axis_labels.js
CommitLineData
6d6c60b6
RK
1/**
2 * @fileoverview Test cases for how axis labels are chosen and formatted.
3 *
4 * @author dan@dygraphs.com (Dan Vanderkam)
5 */
6var AxisLabelsTestCase = TestCase("axis-labels");
7
8AxisLabelsTestCase.prototype.setUp = function() {
9 document.body.innerHTML = "<div id='graph'></div>";
10};
11
12AxisLabelsTestCase.prototype.tearDown = function() {
13};
14
d574a45e
RK
15AxisLabelsTestCase.simpleData =
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
6d6c60b6
RK
22AxisLabelsTestCase.prototype.kCloseFloat = 1.0e-10;
23
24AxisLabelsTestCase.prototype.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?
846038aa 40 assertEquals(['-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});
846038aa 45 assertEquals(['-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});
846038aa 50 assertEquals(['-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});
846038aa 55 assertEquals(['0','20','40','60','80','100'], Util.getYLabels());
6d6c60b6
RK
56
57 g.setSelection(0);
79aabc9d 58 assertEquals('0: Y: -1', Util.getLegend());
6d6c60b6
RK
59};
60
61AxisLabelsTestCase.prototype.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);
71a1930b
RK
77 assertEqualsDelta([-0.1, -0.08, -0.06, -0.04, -0.02, 0, 0.02, 0.04, 0.06, 0.08],
78 Util.makeNumbers(Util.getYLabels()), this.kCloseFloat);
6d6c60b6
RK
79
80 opts.valueRange = [-0.05, 0.05];
81 g.updateOptions(opts);
71a1930b
RK
82 assertEquals([-0.05, -0.04, -0.03, -0.02, -0.01, 0, 0.01, 0.02, 0.03, 0.04],
83 Util.makeNumbers(Util.getYLabels()));
6d6c60b6
RK
84
85 opts.valueRange = [-0.01, 0.01];
86 g.updateOptions(opts);
71a1930b
RK
87 assertEquals([-0.01, -8.00e-3, -6.00e-3, -4.00e-3, -2.00e-3, 0, 2.00e-3, 4.00e-3, 6.00e-3, 8.00e-3],
88 Util.makeNumbers(Util.getYLabels()));
6d6c60b6
RK
89
90 g.setSelection(1);
79aabc9d 91 assertEquals('1: Y: 0', Util.getLegend());
6d6c60b6
RK
92};
93
94AxisLabelsTestCase.prototype.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);
846038aa 109 assertEquals(["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
846038aa 114 assertEquals(["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!
846038aa 119 assertEquals(["10","10","10","10","10","10","10","10","10","10"], Util.getYLabels());
6d6c60b6
RK
120
121 g.setSelection(1);
79aabc9d 122 assertEquals('1: Y: 0', Util.getLegend());
6d6c60b6
RK
123};
124
125AxisLabelsTestCase.prototype.testXAxisTimeLabelFormatter = function() {
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
846038aa 151 assertEquals(["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);
79aabc9d 155 assertEquals('5.1: Y1: 1', Util.getLegend());
6d6c60b6
RK
156};
157
158AxisLabelsTestCase.prototype.testAxisLabelFormatter = function () {
159 var opts = {
160 width: 480,
161 height: 320,
162 axes : {
163 x : {
164 axisLabelFormatter : function(x, granularity, opts, dg) {
165 assertEquals('number', typeof(x));
166 assertEquals('number', typeof(granularity));
167 assertEquals('function', typeof(opts));
168 assertEquals('[Dygraph graph]', dg.toString());
169 return 'x' + x;
170 }
171 },
172 y : {
173 axisLabelFormatter : function(y, granularity, opts, dg) {
174 assertEquals('number', typeof(y));
175 assertEquals('number', typeof(granularity));
176 assertEquals('function', typeof(opts));
177 assertEquals('[Dygraph graph]', dg.toString());
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
846038aa
RK
191 assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
192 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
6d6c60b6
RK
193
194 g.setSelection(2);
79aabc9d 195 assertEquals("2: y: 4", Util.getLegend());
6d6c60b6
RK
196};
197
198AxisLabelsTestCase.prototype.testDateAxisLabelFormatter = function () {
199 var opts = {
200 width: 480,
201 height: 320,
202 axes : {
203 x : {
204 axisLabelFormatter : function(x, granularity, opts, dg) {
205 assertTrue(Dygraph.isDateLike(x));
206 assertEquals('number', typeof(granularity));
207 assertEquals('function', typeof(opts));
208 assertEquals('[Dygraph graph]', dg.toString());
209 return 'x' + x.strftime('%Y/%m/%d');
210 }
211 },
212 y : {
213 axisLabelFormatter : function(y, granularity, opts, dg) {
214 assertEquals('number', typeof(y));
215 assertEquals('number', typeof(granularity));
216 assertEquals('function', typeof(opts));
217 assertEquals('[Dygraph graph]', dg.toString());
218 return 'y' + y;
219 }
220 }
221 },
222 labels: ['x', 'y']
223 };
224 var data = [];
225 for (var i = 1; i < 10; i++) {
226 data.push([new Date("2011/01/0" + i), 2 * i]);
227 }
228 var graph = document.getElementById("graph");
229 var g = new Dygraph(graph, data, opts);
230
846038aa
RK
231 assertEquals(["x2011/01/01", "x2011/01/02", "x2011/01/03", "x2011/01/04", "x2011/01/05", "x2011/01/06", "x2011/01/07", "x2011/01/08", "x2011/01/09"], Util.getXLabels());
232 assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
6d6c60b6
RK
233
234 g.setSelection(0);
79aabc9d 235 assertEquals("2011/01/01: y: 2", Util.getLegend());
6d6c60b6
RK
236};
237
238// This test verifies that when a valueFormatter is set (but not an
239// axisLabelFormatter), then the valueFormatter is used to format the axis
240// labels.
241AxisLabelsTestCase.prototype.testValueFormatter = function () {
242 var opts = {
243 width: 480,
244 height: 320,
245 axes : {
246 x : {
247 valueFormatter: function(x, opts, series_name, dg) {
248 assertEquals('number', typeof(x));
249 assertEquals('function', typeof(opts));
250 assertEquals('string', typeof(series_name));
251 assertEquals('[Dygraph graph]', dg.toString());
252 return 'x' + x;
253 }
254 },
255 y : {
256 valueFormatter: function(y, opts, series_name, dg) {
257 assertEquals('number', typeof(y));
258 assertEquals('function', typeof(opts));
259 assertEquals('string', typeof(series_name));
260 assertEquals('[Dygraph graph]', dg.toString());
261 return 'y' + y;
262 }
263 }
264 },
265 labels: ['x', 'y']
266 };
267 var data = [];
268 for (var i = 0; i < 10; i++) {
269 data.push([i, 2 * i]);
270 }
271 var graph = document.getElementById("graph");
272 var g = new Dygraph(graph, data, opts);
273
274 // the valueFormatter options do not affect the ticks.
846038aa 275 assertEquals(['0','2','4','6','8'], Util.getXLabels());
6d6c60b6 276 assertEquals(['0','2','4','6','8','10','12','14','16','18'],
846038aa 277 Util.getYLabels());
6d6c60b6
RK
278
279 // they do affect the legend, however.
280 g.setSelection(2);
79aabc9d 281 assertEquals("x2: y: y4", Util.getLegend());
6d6c60b6
RK
282};
283
284AxisLabelsTestCase.prototype.testDateValueFormatter = function () {
285 var opts = {
286 width: 480,
287 height: 320,
288 axes : {
289 x : {
290 valueFormatter: function(x, opts, series_name, dg) {
291 assertEquals('number', typeof(x));
292 assertEquals('function', typeof(opts));
293 assertEquals('string', typeof(series_name));
294 assertEquals('[Dygraph graph]', dg.toString());
295 return 'x' + new Date(x).strftime('%Y/%m/%d');
296 }
297 },
298 y : {
299 valueFormatter: function(y, opts, series_name, dg) {
300 assertEquals('number', typeof(y));
301 assertEquals('function', typeof(opts));
302 assertEquals('string', typeof(series_name));
303 assertEquals('[Dygraph graph]', dg.toString());
304 return 'y' + y;
305 }
306 }
307 },
308 labels: ['x', 'y']
309 };
310
311 var data = [];
312 for (var i = 1; i < 10; i++) {
313 data.push([new Date("2011/01/0" + i), 2 * i]);
314 }
315 var graph = document.getElementById("graph");
316 var g = new Dygraph(graph, data, opts);
317
318 // valueFormatters do not affect ticks.
846038aa
RK
319 assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan','09Jan'], Util.getXLabels());
320 assertEquals(['2','4','6','8','10','12','14','16','18'], Util.getYLabels());
6d6c60b6
RK
321
322 // the valueFormatter options also affect the legend.
323 g.setSelection(2);
79aabc9d 324 assertEquals('x2011/01/03: y: y6', Util.getLegend());
6d6c60b6
RK
325};
326
327// This test verifies that when both a valueFormatter and an axisLabelFormatter
328// are specified, the axisLabelFormatter takes precedence.
329AxisLabelsTestCase.prototype.testAxisLabelFormatterPrecedence = function () {
330 var opts = {
331 width: 480,
332 height: 320,
333 axes : {
334 x : {
335 valueFormatter: function(x) {
336 return 'xvf' + x;
337 },
338 axisLabelFormatter: function(x, granularity) {
339 return 'x' + x;
340 }
341 },
342 y : {
343 valueFormatter: function(y) {
344 return 'yvf' + y;
345 },
346 axisLabelFormatter: function(y) {
347 return 'y' + y;
348 }
349 }
350 },
351 labels: ['x', 'y']
352 };
353 var data = [];
354 for (var i = 0; i < 10; i++) {
355 data.push([i, 2 * i]);
356 }
357 var graph = document.getElementById("graph");
358 var g = new Dygraph(graph, data, opts);
359
846038aa
RK
360 assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
361 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
6d6c60b6
RK
362
363 g.setSelection(9);
79aabc9d 364 assertEquals("xvf9: y: yvf18", Util.getLegend());
6d6c60b6
RK
365};
366
367// This is the same as the previous test, except that options are added
368// one-by-one.
369AxisLabelsTestCase.prototype.testAxisLabelFormatterIncremental = function () {
370 var opts = {
371 width: 480,
372 height: 320,
373 labels: ['x', 'y']
374 };
375 var data = [];
376 for (var i = 0; i < 10; i++) {
377 data.push([i, 2 * i]);
378 }
379 var graph = document.getElementById("graph");
380 var g = new Dygraph(graph, data, opts);
381 g.updateOptions({
382 axes : {
383 x : {
384 valueFormatter: function(x) {
385 return 'xvf' + x;
386 }
387 }
388 }
389 });
390 g.updateOptions({
391 axes : {
392 y : {
393 valueFormatter: function(y) {
394 return 'yvf' + y;
395 }
396 }
397 }
398 });
399 g.updateOptions({
400 axes : {
401 x : {
402 axisLabelFormatter: function(x, granularity) {
403 return 'x' + x;
404 }
405 }
406 }
407 });
408 g.updateOptions({
409 axes : {
410 y : {
411 axisLabelFormatter: function(y) {
412 return 'y' + y;
413 }
414 }
415 }
416 });
417
846038aa
RK
418 assertEquals(["x0","x2","x4","x6","x8"], Util.getXLabels());
419 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
6d6c60b6
RK
420
421 g.setSelection(9);
79aabc9d 422 assertEquals("xvf9: y: yvf18", Util.getLegend());
6d6c60b6
RK
423};
424
425AxisLabelsTestCase.prototype.testGlobalFormatters = function() {
426 var opts = {
427 width: 480,
428 height: 320,
429 labels: ['x', 'y'],
430 valueFormatter: function(x) {
431 return 'vf' + x;
432 },
433 axisLabelFormatter: function(x) {
434 return 'alf' + x;
435 }
436 };
437 var data = [];
438 for (var i = 0; i < 10; i++) {
439 data.push([i, 2 * i]);
440 }
441 var graph = document.getElementById("graph");
442 var g = new Dygraph(graph, data, opts);
443
846038aa
RK
444 assertEquals(['alf0','alf2','alf4','alf6','alf8'], Util.getXLabels());
445 assertEquals(['alf0','alf2','alf4','alf6','alf8','alf10','alf12','alf14','alf16','alf18'], Util.getYLabels());
6d6c60b6
RK
446
447 g.setSelection(9);
79aabc9d 448 assertEquals("vf9: y: vf18", Util.getLegend());
6d6c60b6
RK
449};
450
451AxisLabelsTestCase.prototype.testSeriesOrder = function() {
452 var opts = {
453 width: 480,
454 height: 320
455 };
456 var data = "x,00,01,10,11\n" +
457 "0,101,201,301,401\n" +
458 "1,102,202,302,402\n" +
459 "2,103,203,303,403\n" +
460 "3,104,204,304,404\n"
461 ;
462
463 var graph = document.getElementById("graph");
464 var g = new Dygraph(graph, data, opts);
465
466 g.setSelection(2);
79aabc9d 467 assertEquals('2: 00: 103 01: 203 10: 303 11: 403', Util.getLegend());
6d6c60b6
RK
468
469 // Sanity checks for indexFromSetName
470 assertEquals(0, g.indexFromSetName("x"));
471 assertEquals(1, g.indexFromSetName("00"));
472 assertEquals(null, g.indexFromSetName("abcde"));
473
474 // Verify that we get the label list back in the right order
475 assertEquals(["x", "00", "01", "10", "11"], g.getLabels());
476};
de624512
RK
477
478AxisLabelsTestCase.prototype.testLabelKMB = function() {
479 var data = [];
480 data.push([0,0]);
481 data.push([1,2000]);
482 data.push([2,1000]);
483
484 var g = new Dygraph(
485 document.getElementById("graph"),
486 data,
487 {
488 labels: [ 'X', 'bar' ],
489 axes : {
490 y: {
491 labelsKMB: true
492 }
493 }
494 }
495 );
496
497 assertEquals(["0", "500", "1K", "1.5K", "2K"], Util.getYLabels());
498};
499
500AxisLabelsTestCase.prototype.testLabelKMG2 = function() {
501 var data = [];
502 data.push([0,0]);
503 data.push([1,2000]);
504 data.push([2,1000]);
505
506 var g = new Dygraph(
507 document.getElementById("graph"),
508 data,
509 {
510 labels: [ 'X', 'bar' ],
511 axes : {
512 y: {
513 labelsKMG2: true
514 }
515 }
516 }
517 );
518
519 assertEquals(
520 ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
521 Util.getYLabels());
522};
b0d3471d 523
a716aff2
RK
524// Same sa testLabelKMG2 but specifies the option at the
525// top of the option dictionary.
526AxisLabelsTestCase.prototype.testLabelKMG2_top = function() {
527 var data = [];
528 data.push([0,0]);
529 data.push([1,2000]);
530 data.push([2,1000]);
531
532 var g = new Dygraph(
533 document.getElementById("graph"),
534 data,
535 {
536 labels: [ 'X', 'bar' ],
537 labelsKMG2: true
538 }
539 );
540
541 assertEquals(
542 ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
543 Util.getYLabels());
544};
545
b0d3471d
RK
546/**
547 * Verify that log scale axis range is properly specified.
548 */
549AxisLabelsTestCase.prototype.testLogScale = function() {
550 var g = new Dygraph("graph", [[0, 5], [1, 1000]], { logscale : true });
551 var nonEmptyLabels = Util.getYLabels().filter(function(x) { return x.length > 0; });
552 assertEquals(["6","10","30","60","100","300","600","1000"], nonEmptyLabels);
553
554 g.updateOptions({ logscale : false });
555 assertEquals(['0','200','400','600','800','1000'], Util.getYLabels());
556}
478b866b
RK
557
558/**
559 * Verify that include zero range is properly specified.
560 */
561AxisLabelsTestCase.prototype.testIncludeZero = function() {
562 var g = new Dygraph("graph", [[0, 500], [1, 1000]], { includeZero : true });
563 assertEquals(['0','200','400','600','800','1000'], Util.getYLabels());
564
565 g.updateOptions({ includeZero : false });
566 assertEquals(['500','600','700','800','900','1000'], Util.getYLabels());
567}
d574a45e 568
48dc3815
RK
569AxisLabelsTestCase.prototype.testAxisLabelFontSize = function() {
570 var graph = document.getElementById("graph");
571 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData, {});
572
573 // Be sure we're dealing with a 14-point default.
574 assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
575
3a84670d
RK
576 var assertFontSize = function(selector, expected) {
577 Util.assertStyleOfChildren(selector, "font-size", expected);
578 }
579
580 assertFontSize($(".dygraph-axis-label-x"), "14px");
581 assertFontSize($(".dygraph-axis-label-y") , "14px");
48dc3815
RK
582
583 g.updateOptions({ axisLabelFontSize : 8});
3a84670d
RK
584 assertFontSize($(".dygraph-axis-label-x"), "8px");
585 assertFontSize($(".dygraph-axis-label-y"), "8px");
48dc3815
RK
586
587 g.updateOptions({
588 axisLabelFontSize : null,
589 axes : {
590 x : { axisLabelFontSize : 5 },
591 }
592 });
593
3a84670d
RK
594 assertFontSize($(".dygraph-axis-label-x"), "5px");
595 assertFontSize($(".dygraph-axis-label-y"), "14px");
48dc3815
RK
596
597 g.updateOptions({
598 axes : {
599 y : { axisLabelFontSize : 20 },
600 }
601 });
602
3a84670d
RK
603 assertFontSize($(".dygraph-axis-label-x"), "5px");
604 assertFontSize($(".dygraph-axis-label-y"), "20px");
48dc3815
RK
605
606 g.updateOptions({
607 series : {
608 Y2 : { axis : "y2" } // copy y2 series to y2 axis.
609 },
610 axes : {
611 y2 : { axisLabelFontSize : 12 },
612 }
613 });
614
3a84670d
RK
615 assertFontSize($(".dygraph-axis-label-x"), "5px");
616 assertFontSize($(".dygraph-axis-label-y1"), "20px");
617 assertFontSize($(".dygraph-axis-label-y2"), "12px");
48dc3815
RK
618}
619
d574a45e
RK
620AxisLabelsTestCase.prototype.testAxisLabelFontSizeNull = function() {
621 var graph = document.getElementById("graph");
622 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData,
623 {
624 axisLabelFontSize: null
625 });
626
3a84670d
RK
627 var assertFontSize = function(selector, expected) {
628 Util.assertStyleOfChildren(selector, "font-size", expected);
5ab63877 629 };
3a84670d
RK
630
631 // Be sure we're dealing with a 14-point default.
632 assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
633
634 assertFontSize($(".dygraph-axis-label-x"), "14px");
635 assertFontSize($(".dygraph-axis-label-y"), "14px");
636}
637
638AxisLabelsTestCase.prototype.testAxisLabelColor = function() {
639 var graph = document.getElementById("graph");
640 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData, {});
641
642 // Be sure we're dealing with a black default.
643 assertEquals("black", Dygraph.DEFAULT_ATTRS.axisLabelColor);
644
645 var assertColor = function(selector, expected) {
646 Util.assertStyleOfChildren(selector, "color", expected);
647 }
648
649 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
650 assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
651
652 g.updateOptions({ axisLabelColor : "red"});
653 assertColor($(".dygraph-axis-label-x"), "rgb(255, 0, 0)");
654 assertColor($(".dygraph-axis-label-y"), "rgb(255, 0, 0)");
655
656 g.updateOptions({
657 axisLabelColor : null,
658 axes : {
659 x : { axisLabelColor : "blue" },
660 }
661 });
662
663 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
664 assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
665
666 g.updateOptions({
667 axes : {
668 y : { axisLabelColor : "green" },
669 }
670 });
671
672 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
673 assertColor($(".dygraph-axis-label-y"), "rgb(0, 128, 0)");
674
675 g.updateOptions({
676 series : {
677 Y2 : { axis : "y2" } // copy y2 series to y2 axis.
678 },
679 axes : {
680 y2 : { axisLabelColor : "yellow" },
681 }
682 });
683
684 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
685 assertColor($(".dygraph-axis-label-y1"), "rgb(0, 128, 0)");
686 assertColor($(".dygraph-axis-label-y2"), "rgb(255, 255, 0)");
687}
688
689AxisLabelsTestCase.prototype.testAxisLabelColorNull = function() {
690 var graph = document.getElementById("graph");
691 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData,
692 {
693 axisLabelColor: null
694 });
695
696 var assertColor = function(selector, expected) {
697 Util.assertStyleOfChildren(selector, "color", expected);
698 }
699
d574a45e
RK
700 // Be sure we're dealing with a 14-point default.
701 assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
702
3a84670d
RK
703 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
704 assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
d574a45e 705}
2fd143d3
DV
706
707/*
708 * This test shows that the label formatter overrides labelsKMB for all values.
709 */
710AxisLabelsTestCase.prototype.testLabelFormatterOverridesLabelsKMB = function() {
711 var g = new Dygraph(
712 document.getElementById("graph"),
713 "X,a,b\n" +
714 "1,0,2000\n" +
715 "2,500,1500\n" +
716 "3,1000,1000\n" +
717 "4,2000,0\n", {
718 labelsKMB: true,
719 axisLabelFormatter: function (v) {
720 return v + ":X";
721 }
722 });
723 assertEquals(["0:X","500:X","1000:X","1500:X","2000:X"], Util.getYLabels());
724 assertEquals(["1:X","1.5:X","2:X","2.5:X","3:X","3.5:X"], Util.getXLabels());
725}
726
727/*
728 * This test shows that you can override labelsKMB on the axis level.
729 */
730AxisLabelsTestCase.prototype.testLabelsKMBIgnoredWhenOverridden = function() {
c6975231 731 var g = new Dygraph(
2fd143d3
DV
732 document.getElementById("graph"),
733 "x,a,b\n" +
734 "1,0,2000\n" +
735 "2,500,1500\n" +
736 "3,1000,1000\n" +
737 "4,2000,0\n", {
738 labelsKMB: true,
739 axes: {
740 y2: {
741 labelsKMB: false
742 }
743 },
744 series: {
745 b: {
746 axis: "y2"
747 },
748 }
749 });
750 assertEquals(["0","500","1K","1.5K","2K"], Util.getYLabels(1));
751 assertEquals(["0","500","1000","1500","2000"], Util.getYLabels(2));
752};
c6975231 753
ace524b5 754/*
c6975231
DV
755// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=147
756// Checks that axis labels stay sane across a DST change.
757AxisLabelsTestCase.prototype.testLabelsCrossDstChange = function() {
758 // (From tests/daylight-savings.html)
759 var g = new Dygraph(
760 document.getElementById("graph"),
761 "Date/Time,Purchases\n" +
762 "2010-11-05 00:00:00,167082\n" +
763 "2010-11-06 00:00:00,168571\n" +
764 "2010-11-07 00:00:00,177796\n" +
765 "2010-11-08 00:00:00,165587\n" +
766 "2010-11-09 00:00:00,164380\n",
767 { width: 1024 }
768 );
769
770 // Dates and "nice" hours: 6AM/PM and noon, not 5AM/11AM/...
771 var okLabels = {
772 '05Nov': true,
773 '06Nov': true,
774 '07Nov': true,
775 '08Nov': true,
776 '09Nov': true,
777 '06:00': true,
778 '12:00': true,
779 '18:00': true
780 };
781
782 var xLabels = Util.getXLabels();
783 for (var i = 0; i < xLabels.length; i++) {
784 assertTrue(okLabels[xLabels[i]]);
785 }
0f9bf369
DV
786
787 // This range had issues of its own on tests/daylight-savings.html.
788 g.updateOptions({
789 dateWindow: [1289109997722.8127, 1289261208937.7659]
790 });
791 xLabels = Util.getXLabels();
792 for (var i = 0; i < xLabels.length; i++) {
793 assertTrue(okLabels[xLabels[i]]);
794 }
795};
796
797
798// Tests data which crosses a "fall back" at a high enough frequency that you
799// can see both 1:00 A.M.s.
800AxisLabelsTestCase.prototype.testLabelsCrossDstChangeHighFreq = function() {
801 // Generate data which crosses the EST/EDT boundary.
802 var dst_data = [];
803 var base_ms = 1383454200000;
804 for (var x = base_ms; x < base_ms + 1000 * 60 * 80; x += 1000) {
805 dst_data.push([new Date(x), x]);
806 }
807
808 var g = new Dygraph(
809 document.getElementById("graph"),
810 dst_data,
811 { width: 1024, labels: ['Date', 'Value'] }
812 );
813
814 assertEquals([
815 '00:50', '00:55',
816 '01:00', '01:05', '01:10', '01:15', '01:20', '01:25',
817 '01:30', '01:35', '01:40', '01:45', '01:50', '01:55',
818 '01:00', '01:05' // 1 AM number two!
819 ], Util.getXLabels());
820
821 // Now zoom past the initial 1 AM. This used to cause trouble.
822 g.updateOptions({
823 dateWindow: [1383454200000 + 15*60*1000, g.xAxisExtremes()[1]]}
824 );
825 assertEquals([
826 '01:05', '01:10', '01:15', '01:20', '01:25',
827 '01:30', '01:35', '01:40', '01:45', '01:50', '01:55',
828 '01:00', '01:05' // 1 AM number two!
829 ], Util.getXLabels());
c6975231 830};
fb0c64b0
DV
831
832
833// Tests data which crosses a "spring forward" at a low frequency.
834// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=433
835AxisLabelsTestCase.prototype.testLabelsCrossSpringForward = function() {
836 var g = new Dygraph(
837 document.getElementById("graph"),
838 "Date/Time,Purchases\n" +
839 "2011-03-11 00:00:00,167082\n" +
840 "2011-03-12 00:00:00,168571\n" +
841 "2011-03-13 00:00:00,177796\n" +
842 "2011-03-14 00:00:00,165587\n" +
843 "2011-03-15 00:00:00,164380\n",
844 {
845 width: 1024,
846 dateWindow: [1299989043119.4365, 1300080693627.4866]
847 });
848
849 var okLabels = {
850 '13Mar': true,
851 // '02:00': true, // not a real time!
852 '04:00': true,
853 '06:00': true,
854 '08:00': true,
855 '10:00': true,
856 '12:00': true,
857 '14:00': true,
858 '16:00': true,
859 '18:00': true,
860 '20:00': true,
861 '22:00': true,
862 '14Mar': true
863 };
864
865 var xLabels = Util.getXLabels();
866 for (var i = 0; i < xLabels.length; i++) {
867 assertTrue(okLabels[xLabels[i]]);
868 }
869};
870
871AxisLabelsTestCase.prototype.testLabelsCrossSpringForwardHighFreq = function() {
872 var base_ms_spring = 1299999000000;
873 var dst_data_spring = [];
874 for (var x = base_ms_spring; x < base_ms_spring + 1000 * 60 * 80; x += 1000) {
875 dst_data_spring.push([new Date(x), x]);
876 }
877
878 var g = new Dygraph(
879 document.getElementById("graph"),
880 dst_data_spring,
881 { width: 1024, labels: ['Date', 'Value'] }
882 );
883
884 assertEquals([
885 '01:50', '01:55',
886 '03:00', '03:05', '03:10', '03:15', '03:20', '03:25',
887 '03:30', '03:35', '03:40', '03:45', '03:50', '03:55',
888 '04:00', '04:05'
889 ], Util.getXLabels());
890};
ace524b5 891*/