2 * @fileoverview Test cases for how axis labels are chosen and formatted.
4 * @author dan@dygraphs.com (Dan Vanderkam)
6 var AxisLabelsTestCase
= TestCase("axis-labels");
8 AxisLabelsTestCase
.prototype.setUp
= function() {
9 document
.body
.innerHTML
= "<div id='graph'></div>";
12 AxisLabelsTestCase
.prototype.tearDown
= function() {
15 function getYLabels() {
16 var y_labels
= document
.getElementsByClassName("dygraph-axis-label-y");
18 for (var i
= 0; i
< y_labels
.length
; i
++) {
19 ary
.push(y_labels
[i
].innerHTML
);
24 function getXLabels() {
25 var x_labels
= document
.getElementsByClassName("dygraph-axis-label-x");
27 for (var i
= 0; i
< x_labels
.length
; i
++) {
28 ary
.push(x_labels
[i
].innerHTML
);
33 function makeNumbers(ary
) {
35 for (var i
= 0; i
< ary
.length
; i
++) {
36 ret
.push(parseFloat(ary
[i
]));
41 function getLegend() {
42 var legend
= document
.getElementsByClassName("dygraph-legend")[0];
43 return legend
.textContent
;
46 AxisLabelsTestCase
.prototype.kCloseFloat
= 1.0e-10;
48 AxisLabelsTestCase
.prototype.testMinusOneToOne
= function() {
60 var graph
= document
.getElementById("graph");
61 var g
= new Dygraph(graph
, data
, opts
);
63 // TODO(danvk): would ['-1.0','-0.5','0.0','0.5','1.0'] be better?
64 assertEquals(['-1','-0.5','0','0.5','1'], getYLabels());
68 g
.updateOptions({file
: data
});
69 assertEquals(['-1','-0.5','0','0.5','1','1.5','2'], getYLabels());
73 g
.updateOptions({file
: data
});
74 assertEquals(['-2','0','2','4','6','8','10'], getYLabels());
78 g
.updateOptions({file
: data
});
79 assertEquals(['0','20','40','60','80','100'], getYLabels());
82 assertEquals('0: Y:-1', getLegend());
85 AxisLabelsTestCase
.prototype.testSmallRangeNearZero
= function() {
97 opts
.valueRange
= [-0.1, 0.1];
99 var graph
= document
.getElementById("graph");
100 var g
= new Dygraph(graph
, data
, opts
);
101 assertEqualsDelta(makeNumbers(["-0.1","-0.08","-0.06","-0.04","-0.02","0","0.02","0.04","0.06","0.08"]),
102 makeNumbers(getYLabels()), this.kCloseFloat
);
104 opts
.valueRange
= [-0.05, 0.05];
105 g
.updateOptions(opts
);
106 // TODO(danvk): why '1.00e-2' and not '0.01'?
107 assertEquals(makeNumbers(["-0.05","-0.04","-0.03","-0.02","-0.01","0","1.00e-2","0.02","0.03","0.04"]),
108 makeNumbers(getYLabels()));
110 opts
.valueRange
= [-0.01, 0.01];
111 g
.updateOptions(opts
);
112 assertEquals(makeNumbers(["-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"]), makeNumbers(getYLabels()));
115 assertEquals('1: Y:0', getLegend());
118 AxisLabelsTestCase
.prototype.testSmallRangeAwayFromZero
= function() {
129 var graph
= document
.getElementById("graph");
131 opts
.valueRange
= [9.9, 10.1];
132 var g
= new Dygraph(graph
, data
, opts
);
133 assertEquals(["9.9","9.92","9.94","9.96","9.98","10","10.02","10.04","10.06","10.08"], getYLabels());
135 opts
.valueRange
= [9.99, 10.01];
136 g
.updateOptions(opts
);
137 // TODO(danvk): this is bad
138 assertEquals(["9.99","9.99","9.99","10","10","10","10","10","10.01","10.01"], getYLabels());
140 opts
.valueRange
= [9.999, 10.001];
141 g
.updateOptions(opts
);
142 // TODO(danvk): this is even worse!
143 assertEquals(["10","10","10","10","10","10","10","10","10","10"], getYLabels());
146 assertEquals('1: Y:0', getLegend());
149 AxisLabelsTestCase
.prototype.testXAxisTimeLabelFormatter
= function() {
154 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]];
155 var graph
= document
.getElementById("graph");
156 var g
= new Dygraph(graph
, data
, opts
);
160 axisLabelFormatter
: function (totalMinutes
) {
161 var hours
= Math
.floor( totalMinutes
/ 60);
162 var minutes
= Math
.floor((totalMinutes
- (hours
* 60)));
163 var seconds
= Math
.round((totalMinutes
* 60) - (hours
* 3600) - (minutes
* 60));
165 if (hours
< 10) hours
= "0" + hours
;
166 if (minutes
< 10) minutes
= "0" + minutes
;
167 if (seconds
< 10) seconds
= "0" + seconds
;
169 return hours
+ ':' + minutes
+ ':' + seconds
;
175 assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], getXLabels());
177 // The legend does not use the axisLabelFormatter:
179 assertEquals('5.1: Y1:1', getLegend());
182 AxisLabelsTestCase
.prototype.testAxisLabelFormatter
= function () {
188 axisLabelFormatter
: function(x
, granularity
, opts
, dg
) {
189 assertEquals('number', typeof(x
));
190 assertEquals('number', typeof(granularity
));
191 assertEquals('function', typeof(opts
));
192 assertEquals('[Dygraph graph]', dg
.toString());
197 axisLabelFormatter
: function(y
, granularity
, opts
, dg
) {
198 assertEquals('number', typeof(y
));
199 assertEquals('number', typeof(granularity
));
200 assertEquals('function', typeof(opts
));
201 assertEquals('[Dygraph graph]', dg
.toString());
209 for (var i
= 0; i
< 10; i
++) {
210 data
.push([i
, 2 * i
]);
212 var graph
= document
.getElementById("graph");
213 var g
= new Dygraph(graph
, data
, opts
);
215 assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
216 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
219 assertEquals("2: y:4", getLegend());
222 AxisLabelsTestCase
.prototype.testDateAxisLabelFormatter
= function () {
228 axisLabelFormatter
: function(x
, granularity
, opts
, dg
) {
229 assertTrue(Dygraph
.isDateLike(x
));
230 assertEquals('number', typeof(granularity
));
231 assertEquals('function', typeof(opts
));
232 assertEquals('[Dygraph graph]', dg
.toString());
233 return 'x' + x
.strftime('%Y/%m/%d');
237 axisLabelFormatter
: function(y
, granularity
, opts
, dg
) {
238 assertEquals('number', typeof(y
));
239 assertEquals('number', typeof(granularity
));
240 assertEquals('function', typeof(opts
));
241 assertEquals('[Dygraph graph]', dg
.toString());
249 for (var i
= 1; i
< 10; i
++) {
250 data
.push([new Date("2011/01/0" + i
), 2 * i
]);
252 var graph
= document
.getElementById("graph");
253 var g
= new Dygraph(graph
, data
, opts
);
255 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"], getXLabels());
256 assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
259 assertEquals("2011/01/01: y:2", getLegend());
262 // This test verifies that when a valueFormatter is set (but not an
263 // axisLabelFormatter), then the valueFormatter is used to format the axis
265 AxisLabelsTestCase
.prototype.testValueFormatter
= function () {
271 valueFormatter
: function(x
, opts
, series_name
, dg
) {
272 assertEquals('number', typeof(x
));
273 assertEquals('function', typeof(opts
));
274 assertEquals('string', typeof(series_name
));
275 assertEquals('[Dygraph graph]', dg
.toString());
280 valueFormatter
: function(y
, opts
, series_name
, dg
) {
281 assertEquals('number', typeof(y
));
282 assertEquals('function', typeof(opts
));
283 assertEquals('string', typeof(series_name
));
284 assertEquals('[Dygraph graph]', dg
.toString());
292 for (var i
= 0; i
< 10; i
++) {
293 data
.push([i
, 2 * i
]);
295 var graph
= document
.getElementById("graph");
296 var g
= new Dygraph(graph
, data
, opts
);
298 // the valueFormatter options do not affect the ticks.
299 assertEquals(['0','2','4','6','8'], getXLabels());
300 assertEquals(['0','2','4','6','8','10','12','14','16','18'],
303 // they do affect the legend, however.
305 assertEquals("x2: y:y4", getLegend());
308 AxisLabelsTestCase
.prototype.testDateValueFormatter
= function () {
314 valueFormatter
: function(x
, opts
, series_name
, dg
) {
315 assertEquals('number', typeof(x
));
316 assertEquals('function', typeof(opts
));
317 assertEquals('string', typeof(series_name
));
318 assertEquals('[Dygraph graph]', dg
.toString());
319 return 'x' + new Date(x
).strftime('%Y/%m/%d');
323 valueFormatter
: function(y
, opts
, series_name
, dg
) {
324 assertEquals('number', typeof(y
));
325 assertEquals('function', typeof(opts
));
326 assertEquals('string', typeof(series_name
));
327 assertEquals('[Dygraph graph]', dg
.toString());
336 for (var i
= 1; i
< 10; i
++) {
337 data
.push([new Date("2011/01/0" + i
), 2 * i
]);
339 var graph
= document
.getElementById("graph");
340 var g
= new Dygraph(graph
, data
, opts
);
342 // valueFormatters do not affect ticks.
343 assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan','09Jan'], getXLabels());
344 assertEquals(['2','4','6','8','10','12','14','16','18'], getYLabels());
346 // the valueFormatter options also affect the legend.
348 assertEquals('x2011/01/03: y:y6', getLegend());
351 // This test verifies that when both a valueFormatter and an axisLabelFormatter
352 // are specified, the axisLabelFormatter takes precedence.
353 AxisLabelsTestCase
.prototype.testAxisLabelFormatterPrecedence
= function () {
359 valueFormatter
: function(x
) {
362 axisLabelFormatter
: function(x
, granularity
) {
367 valueFormatter
: function(y
) {
370 axisLabelFormatter
: function(y
) {
378 for (var i
= 0; i
< 10; i
++) {
379 data
.push([i
, 2 * i
]);
381 var graph
= document
.getElementById("graph");
382 var g
= new Dygraph(graph
, data
, opts
);
384 assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
385 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
388 assertEquals("xvf9: y:yvf18", getLegend());
391 // This is the same as the previous test, except that options are added
393 AxisLabelsTestCase
.prototype.testAxisLabelFormatterIncremental
= function () {
400 for (var i
= 0; i
< 10; i
++) {
401 data
.push([i
, 2 * i
]);
403 var graph
= document
.getElementById("graph");
404 var g
= new Dygraph(graph
, data
, opts
);
408 valueFormatter
: function(x
) {
417 valueFormatter
: function(y
) {
426 axisLabelFormatter
: function(x
, granularity
) {
435 axisLabelFormatter
: function(y
) {
442 assertEquals(["x0","x2","x4","x6","x8"], getXLabels());
443 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
446 assertEquals("xvf9: y:yvf18", getLegend());
449 AxisLabelsTestCase
.prototype.testGlobalFormatters
= function() {
454 valueFormatter
: function(x
) {
457 axisLabelFormatter
: function(x
) {
462 for (var i
= 0; i
< 10; i
++) {
463 data
.push([i
, 2 * i
]);
465 var graph
= document
.getElementById("graph");
466 var g
= new Dygraph(graph
, data
, opts
);
468 assertEquals(['alf0','alf2','alf4','alf6','alf8'], getXLabels());
469 assertEquals(['alf0','alf2','alf4','alf6','alf8','alf10','alf12','alf14','alf16','alf18'], getYLabels());
472 assertEquals("vf9: y:vf18", getLegend());
475 AxisLabelsTestCase
.prototype.testSeriesOrder
= function() {
480 var data
= "x,00,01,10,11\n" +
481 "0,101,201,301,401\n" +
482 "1,102,202,302,402\n" +
483 "2,103,203,303,403\n" +
484 "3,104,204,304,404\n"
487 var graph
= document
.getElementById("graph");
488 var g
= new Dygraph(graph
, data
, opts
);
491 assertEquals('2: 00:103 01:203 10:303 11:403', getLegend());
493 // Sanity checks for indexFromSetName
494 assertEquals(0, g
.indexFromSetName("x"));
495 assertEquals(1, g
.indexFromSetName("00"));
496 assertEquals(null, g
.indexFromSetName("abcde"));
498 // Verify that we get the label list back in the right order
499 assertEquals(["x", "00", "01", "10", "11"], g
.getLabels());