34f37a5990b356cd470afcfe45a3cf58b9d720ee
[dygraphs.git] / auto_tests / tests / axis_labels-deprecated.js
1 /**
2 * @fileoverview Test cases for how axis labels are chosen and formatted,
3 * specializing on the deprecated xLabelFormatter, etc.
4 *
5 * @author dan@dygraphs.com (Dan Vanderkam)
6 */
7 var DeprecatedAxisLabelsTestCase = TestCase("axis-labels-deprecated");
8
9 DeprecatedAxisLabelsTestCase.prototype.setUp = function() {
10 document.body.innerHTML = "<div id='graph'></div>";
11 };
12
13 DeprecatedAxisLabelsTestCase.prototype.tearDown = function() {
14 };
15
16 // TODO(konigsberg): Scope these functions.
17
18 function getYLabels() {
19 var y_labels = document.getElementsByClassName("dygraph-axis-label-y");
20 var ary = [];
21 for (var i = 0; i < y_labels.length; i++) {
22 ary.push(y_labels[i].innerHTML);
23 }
24 return ary;
25 }
26
27 function getXLabels() {
28 var x_labels = document.getElementsByClassName("dygraph-axis-label-x");
29 var ary = [];
30 for (var i = 0; i < x_labels.length; i++) {
31 ary.push(x_labels[i].innerHTML);
32 }
33 return ary;
34 }
35
36 function getLegend() {
37 var legend = document.getElementsByClassName("dygraph-legend")[0];
38 return legend.textContent;
39 }
40
41 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDeprecatedXAxisTimeLabelFormatter = function() {
42 var opts = {
43 width: 480,
44 height: 320
45 };
46 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]];
47 var graph = document.getElementById("graph");
48 var g = new Dygraph(graph, data, opts);
49 g.updateOptions({
50 xAxisLabelFormatter: function (totalMinutes) {
51 var hours = Math.floor( totalMinutes / 60);
52 var minutes = Math.floor((totalMinutes - (hours * 60)));
53 var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
54
55 if (hours < 10) hours = "0" + hours;
56 if (minutes < 10) minutes = "0" + minutes;
57 if (seconds < 10) seconds = "0" + seconds;
58
59 return hours + ':' + minutes + ':' + seconds;
60 }
61 });
62
63 assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], getXLabels());
64
65 // The legend does not use the xAxisLabelFormatter:
66 g.setSelection(1);
67 assertEquals('5.1: Y1:1', getLegend());
68 };
69
70 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatter = function () {
71 var opts = {
72 width: 480,
73 height: 320,
74 xAxisLabelFormatter: function(x, granularity, opts, dg) {
75 assertEquals('number', typeof(x));
76 assertEquals('number', typeof(granularity));
77 assertEquals('function', typeof(opts));
78 assertEquals('[Dygraph graph]', dg.toString());
79 return 'x' + x;
80 },
81 yAxisLabelFormatter: function(y, granularity, opts, dg) {
82 assertEquals('number', typeof(y));
83 assertEquals('number', typeof(granularity));
84 assertEquals('function', typeof(opts));
85 assertEquals('[Dygraph graph]', dg.toString());
86 return 'y' + y;
87 },
88 labels: ['x', 'y']
89 };
90 var data = [];
91 for (var i = 0; i < 10; i++) {
92 data.push([i, 2 * i]);
93 }
94 var graph = document.getElementById("graph");
95 var g = new Dygraph(graph, data, opts);
96
97 assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
98 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
99
100 g.setSelection(2);
101 assertEquals("2: y:4", getLegend());
102 };
103
104 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateAxisLabelFormatter = function () {
105 var opts = {
106 width: 480,
107 height: 320,
108 xAxisLabelFormatter: function(x, granularity, opts, dg) {
109 assertTrue(Dygraph.isDateLike(x));
110 assertEquals('number', typeof(granularity));
111 assertEquals('function', typeof(opts));
112 assertEquals('[Dygraph graph]', dg.toString());
113 return 'x' + x.strftime('%Y/%m/%d');
114 },
115 yAxisLabelFormatter: function(y, granularity, opts, dg) {
116 assertEquals('number', typeof(y));
117 assertEquals('number', typeof(granularity));
118 assertEquals('function', typeof(opts));
119 assertEquals('[Dygraph graph]', dg.toString());
120 return 'y' + y;
121 },
122 labels: ['x', 'y']
123 };
124 var data = [];
125 for (var i = 1; i < 10; i++) {
126 data.push([new Date("2011/01/0" + i), 2 * i]);
127 }
128 var graph = document.getElementById("graph");
129 var g = new Dygraph(graph, data, opts);
130
131 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());
132 assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
133
134 g.setSelection(0);
135 assertEquals("2011/01/01: y:2", getLegend());
136 };
137
138 // This test verifies that when a valueFormatter is set (but not an
139 // axisLabelFormatter), then the valueFormatter is used to format the axis
140 // labels.
141 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedValueFormatter = function () {
142 var opts = {
143 width: 480,
144 height: 320,
145 xValueFormatter: function(x, opts, series_name, dg) {
146 assertEquals('number', typeof(x));
147 assertEquals('function', typeof(opts));
148 assertEquals('string', typeof(series_name));
149 assertEquals('[Dygraph graph]', dg.toString());
150 return 'x' + x;
151 },
152 yValueFormatter: function(y, opts, series_name, dg) {
153 assertEquals('number', typeof(y));
154 assertEquals('function', typeof(opts));
155 assertEquals('string', typeof(series_name));
156 assertEquals('[Dygraph graph]', dg.toString());
157 return 'y' + y;
158 },
159 labels: ['x', 'y']
160 };
161 var data = [];
162 for (var i = 0; i < 10; i++) {
163 data.push([i, 2 * i]);
164 }
165 var graph = document.getElementById("graph");
166 var g = new Dygraph(graph, data, opts);
167
168 // the valueFormatter options do not affect the ticks.
169 assertEquals(['0','2','4','6','8'], getXLabels());
170 assertEquals(['0','2','4','6','8','10','12','14','16','18'],
171 getYLabels());
172
173 // they do affect the legend, however.
174 g.setSelection(2);
175 assertEquals("x2: y:y4", getLegend());
176 };
177
178 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () {
179 var opts = {
180 width: 480,
181 height: 320,
182 xValueFormatter: function(x, opts, series_name, dg) {
183 assertEquals('number', typeof(x));
184 assertEquals('function', typeof(opts));
185 assertEquals('string', typeof(series_name));
186 assertEquals('[Dygraph graph]', dg.toString());
187 return 'x' + new Date(x).strftime('%Y/%m/%d');
188 },
189 yValueFormatter: function(y, opts, series_name, dg) {
190 assertEquals('number', typeof(y));
191 assertEquals('function', typeof(opts));
192 assertEquals('string', typeof(series_name));
193 assertEquals('[Dygraph graph]', dg.toString());
194 return 'y' + y;
195 },
196 labels: ['x', 'y']
197 };
198
199 var data = [];
200 for (var i = 1; i < 10; i++) {
201 data.push([new Date("2011/01/0" + i), 2 * i]);
202 }
203 var graph = document.getElementById("graph");
204 var g = new Dygraph(graph, data, opts);
205
206 // valueFormatters do not affect ticks.
207 assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan','09Jan'], getXLabels());
208 assertEquals(['2','4','6','8','10','12','14','16','18'], getYLabels());
209
210 // the valueFormatter options also affect the legend.
211 g.setSelection(2);
212 assertEquals('x2011/01/03: y:y6', getLegend());
213 };
214
215 // This test verifies that when both a valueFormatter and an axisLabelFormatter
216 // are specified, the axisLabelFormatter takes precedence.
217 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () {
218 var opts = {
219 width: 480,
220 height: 320,
221 xValueFormatter: function(x) {
222 return 'xvf' + x;
223 },
224 yValueFormatter: function(y) {
225 return 'yvf' + y;
226 },
227 xAxisLabelFormatter: function(x, granularity) {
228 return 'x' + x;
229 },
230 yAxisLabelFormatter: function(y) {
231 return 'y' + y;
232 },
233 labels: ['x', 'y']
234 };
235 var data = [];
236 for (var i = 0; i < 10; i++) {
237 data.push([i, 2 * i]);
238 }
239 var graph = document.getElementById("graph");
240 var g = new Dygraph(graph, data, opts);
241
242 assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
243 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
244
245 g.setSelection(9);
246 assertEquals("xvf9: y:yvf18", getLegend());
247 };
248
249 // This is the same as the previous test, except that options are added
250 // one-by-one.
251 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () {
252 var opts = {
253 width: 480,
254 height: 320,
255 labels: ['x', 'y']
256 };
257 var data = [];
258 for (var i = 0; i < 10; i++) {
259 data.push([i, 2 * i]);
260 }
261 var graph = document.getElementById("graph");
262 var g = new Dygraph(graph, data, opts);
263 g.updateOptions({
264 xValueFormatter: function(x) {
265 return 'xvf' + x;
266 }
267 });
268 g.updateOptions({
269 yValueFormatter: function(y) {
270 return 'yvf' + y;
271 }
272 });
273 g.updateOptions({
274 xAxisLabelFormatter: function(x, granularity) {
275 return 'x' + x;
276 }
277 });
278 g.updateOptions({
279 yAxisLabelFormatter: function(y) {
280 return 'y' + y;
281 }
282 });
283
284 assertEquals(["x0","x2","x4","x6","x8"], getXLabels());
285 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
286
287 g.setSelection(9);
288 assertEquals("xvf9: y:yvf18", getLegend());
289 };