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