Remove legacy options:
[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 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDeprecatedXAxisTimeLabelFormatter = function() {
17 var opts = {
18 width: 480,
19 height: 320
20 };
21 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]];
22 var graph = document.getElementById("graph");
23 var g = new Dygraph(graph, data, opts);
24 g.updateOptions({
25 axes : {
26 x : {
27 axisLabelFormatter: function (totalMinutes) {
28 var hours = Math.floor( totalMinutes / 60);
29 var minutes = Math.floor((totalMinutes - (hours * 60)));
30 var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
31
32 if (hours < 10) hours = "0" + hours;
33 if (minutes < 10) minutes = "0" + minutes;
34 if (seconds < 10) seconds = "0" + seconds;
35
36 return hours + ':' + minutes + ':' + seconds;
37 }
38 }
39 }
40 });
41
42 assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], Util.getXLabels());
43
44 // The legend does not use the xAxisLabelFormatter:
45 g.setSelection(1);
46 assertEquals('5.1: Y1: 1', Util.getLegend());
47 };
48
49 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatter = function () {
50 var opts = {
51 width: 480,
52 height: 320,
53 axes : {
54 x : {
55 axisLabelFormatter: function(x, granularity, opts, dg) {
56 assertEquals('number', typeof(x));
57 assertEquals('number', typeof(granularity));
58 assertEquals('function', typeof(opts));
59 assertEquals('[Dygraph graph]', dg.toString());
60 return 'x' + x;
61 }
62 },
63 y : {
64 axisLabelFormatter: function(y, granularity, opts, dg) {
65 assertEquals('number', typeof(y));
66 assertEquals('number', typeof(granularity));
67 assertEquals('function', typeof(opts));
68 assertEquals('[Dygraph graph]', dg.toString());
69 return 'y' + y;
70 }
71 }
72 },
73 labels: ['x', 'y']
74 };
75 var data = [];
76 for (var i = 0; i < 10; i++) {
77 data.push([i, 2 * i]);
78 }
79 var graph = document.getElementById("graph");
80 var g = new Dygraph(graph, data, opts);
81
82 assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
83 assertEquals(["y0","y5","y10","y15"], Util.getYLabels());
84
85 g.setSelection(2);
86 assertEquals("2: y: 4", Util.getLegend());
87 };
88
89 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateAxisLabelFormatter = function () {
90 var opts = {
91 width: 480,
92 height: 320,
93 axes : {
94 x : {
95 axisLabelFormatter: function(x, granularity, opts, dg) {
96 assertTrue(Dygraph.isDateLike(x));
97 assertEquals('number', typeof(granularity));
98 assertEquals('function', typeof(opts));
99 assertEquals('[Dygraph graph]', dg.toString());
100 return 'x' + Util.formatDate(x);
101 },
102 pixelsPerLabel: 60
103 },
104 y : {
105 axisLabelFormatter: function(y, granularity, opts, dg) {
106 assertEquals('number', typeof(y));
107 assertEquals('number', typeof(granularity));
108 assertEquals('function', typeof(opts));
109 assertEquals('[Dygraph graph]', dg.toString());
110 return 'y' + y;
111 }
112 }
113 },
114 labels: ['x', 'y']
115 };
116 var data = [];
117 for (var i = 1; i < 10; i++) {
118 data.push([new Date("2011/01/0" + i), 2 * i]);
119 }
120 var graph = document.getElementById("graph");
121 var g = new Dygraph(graph, data, opts);
122
123 assertEquals(["x2011/01/02","x2011/01/04","x2011/01/06","x2011/01/08"], Util.getXLabels());
124 assertEquals(["y5","y10","y15"], Util.getYLabels());
125
126 g.setSelection(0);
127 assertEquals("2011/01/01: y: 2", Util.getLegend());
128 };
129
130 // This test verifies that when a valueFormatter is set (but not an
131 // axisLabelFormatter), then the valueFormatter is used to format the axis
132 // labels.
133 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedValueFormatter = function () {
134 var opts = {
135 width: 480,
136 height: 320,
137 axes : {
138 x : {
139 valueFormatter: function(x, opts, series_name, dg) {
140 assertEquals('number', typeof(x));
141 assertEquals('function', typeof(opts));
142 assertEquals('string', typeof(series_name));
143 assertEquals('[Dygraph graph]', dg.toString());
144 return 'x' + x;
145 }
146 },
147 y : {
148 valueFormatter: function(y, opts, series_name, dg) {
149 assertEquals('number', typeof(y));
150 assertEquals('function', typeof(opts));
151 assertEquals('string', typeof(series_name));
152 assertEquals('[Dygraph graph]', dg.toString());
153 return 'y' + y;
154 }
155 }
156 },
157 labels: ['x', 'y']
158 };
159 var data = [];
160 for (var i = 0; i < 10; i++) {
161 data.push([i, 2 * i]);
162 }
163 var graph = document.getElementById("graph");
164 var g = new Dygraph(graph, data, opts);
165
166 // the valueFormatter options do not affect the ticks.
167 assertEquals(['0','2','4','6','8'], Util.getXLabels());
168 assertEquals(["0","5","10","15"], Util.getYLabels());
169
170 // they do affect the legend, however.
171 g.setSelection(2);
172 assertEquals("x2: y: y4", Util.getLegend());
173 };
174
175 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () {
176 var opts = {
177 width: 480,
178 height: 320,
179 axes : {
180 x : {
181 valueFormatter: function(x, opts, series_name, dg) {
182 assertEquals('number', typeof(x));
183 assertEquals('function', typeof(opts));
184 assertEquals('string', typeof(series_name));
185 assertEquals('[Dygraph graph]', dg.toString());
186 return 'x' + Util.formatDate(x);
187 },
188 pixelsPerLabel: 60
189 },
190 y : {
191 valueFormatter: function(y, opts, series_name, dg) {
192 assertEquals('number', typeof(y));
193 assertEquals('function', typeof(opts));
194 assertEquals('string', typeof(series_name));
195 assertEquals('[Dygraph graph]', dg.toString());
196 return 'y' + y;
197 }
198 }
199 },
200 labels: ['x', 'y']
201 };
202
203 var data = [];
204 for (var i = 1; i < 10; i++) {
205 data.push([new Date("2011/01/0" + i), 2 * i]);
206 }
207 var graph = document.getElementById("graph");
208 var g = new Dygraph(graph, data, opts);
209
210 // valueFormatters do not affect ticks.
211 assertEquals(["02 Jan","04 Jan","06 Jan","08 Jan"], Util.getXLabels());
212 assertEquals(["5","10","15"], Util.getYLabels());
213
214 // the valueFormatter options also affect the legend.
215 g.setSelection(2);
216 assertEquals('x2011/01/03: y: y6', Util.getLegend());
217 };
218
219 // This test verifies that when both a valueFormatter and an axisLabelFormatter
220 // are specified, the axisLabelFormatter takes precedence.
221 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () {
222 var opts = {
223 width: 480,
224 height: 320,
225 axes : {
226 x : {
227 valueFormatter: function(x) {
228 return 'xvf' + x;
229 },
230 axisLabelFormatter: function(x, granularity) {
231 return 'x' + x;
232 },
233 },
234 y : {
235 valueFormatter: function(y) {
236 return 'yvf' + y;
237 },
238 axisLabelFormatter: function(y) {
239 return 'y' + y;
240 },
241 }
242 },
243 labels: ['x', 'y']
244 };
245 var data = [];
246 for (var i = 0; i < 10; i++) {
247 data.push([i, 2 * i]);
248 }
249 var graph = document.getElementById("graph");
250 var g = new Dygraph(graph, data, opts);
251
252 assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
253 assertEquals(["y0","y5","y10","y15"], Util.getYLabels());
254
255 g.setSelection(9);
256 assertEquals("xvf9: y: yvf18", Util.getLegend());
257 };
258
259 // This is the same as the previous test, except that options are added
260 // one-by-one.
261 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () {
262 var opts = {
263 width: 480,
264 height: 320,
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 g.updateOptions({
274 axes : {
275 x : {
276 valueFormatter: function(x) {
277 return 'xvf' + x;
278 }
279 }
280 }
281 });
282 g.updateOptions({
283 axes : {
284 y : {
285 valueFormatter: function(y) {
286 return 'yvf' + y;
287 }
288 }
289 }
290 });
291 g.updateOptions({
292 axes : {
293 x : {
294 axisLabelFormatter: function(x) {
295 return 'x' + x;
296 }
297 }
298 }
299 });
300 g.updateOptions({
301 axes : {
302 y : {
303 axisLabelFormatter: function(y) {
304 return 'y' + y;
305 }
306 }
307 }
308 });
309
310 assertEquals(["x0","x2","x4","x6","x8"], Util.getXLabels());
311 assertEquals(["y0","y5","y10","y15"], Util.getYLabels());
312
313 g.setSelection(9);
314 assertEquals("xvf9: y: yvf18", Util.getLegend());
315 };