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, | |
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({ | |
bfb3e0a4 RK |
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)); | |
ad69cb8a | 31 | |
bfb3e0a4 RK |
32 | if (hours < 10) hours = "0" + hours; |
33 | if (minutes < 10) minutes = "0" + minutes; | |
34 | if (seconds < 10) seconds = "0" + seconds; | |
ad69cb8a | 35 | |
bfb3e0a4 RK |
36 | return hours + ':' + minutes + ':' + seconds; |
37 | } | |
38 | } | |
ad69cb8a DV |
39 | } |
40 | }); | |
97889da4 | 41 | |
89fdcedb | 42 | assert.deepEqual(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], Util.getXLabels()); |
48e614ac DV |
43 | |
44 | // The legend does not use the xAxisLabelFormatter: | |
45 | g.setSelection(1); | |
89fdcedb DV |
46 | assert.equal('5.1: Y1: 1', Util.getLegend()); |
47 | }); | |
48e614ac | 48 | |
89fdcedb | 49 | it('testDeprecatedAxisLabelFormatter', function() { |
48e614ac DV |
50 | var opts = { |
51 | width: 480, | |
52 | height: 320, | |
bfb3e0a4 RK |
53 | axes : { |
54 | x : { | |
55 | axisLabelFormatter: function(x, granularity, opts, dg) { | |
89fdcedb DV |
56 | assert.equal('number', typeof(x)); |
57 | assert.equal('number', typeof(granularity)); | |
58 | assert.equal('function', typeof(opts)); | |
59 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
60 | return 'x' + x; |
61 | } | |
62 | }, | |
63 | y : { | |
64 | axisLabelFormatter: function(y, granularity, opts, dg) { | |
89fdcedb DV |
65 | assert.equal('number', typeof(y)); |
66 | assert.equal('number', typeof(granularity)); | |
67 | assert.equal('function', typeof(opts)); | |
68 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
69 | return 'y' + y; |
70 | } | |
71 | } | |
48e614ac DV |
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 | ||
89fdcedb DV |
82 | assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels()); |
83 | assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels()); | |
48e614ac DV |
84 | |
85 | g.setSelection(2); | |
89fdcedb DV |
86 | assert.equal("2: y: 4", Util.getLegend()); |
87 | }); | |
48e614ac | 88 | |
89fdcedb | 89 | it('testDeprecatedDateAxisLabelFormatter', function() { |
48e614ac DV |
90 | var opts = { |
91 | width: 480, | |
92 | height: 320, | |
bfb3e0a4 RK |
93 | axes : { |
94 | x : { | |
95 | axisLabelFormatter: function(x, granularity, opts, dg) { | |
89fdcedb DV |
96 | assert.isTrue(Dygraph.isDateLike(x)); |
97 | assert.equal('number', typeof(granularity)); | |
98 | assert.equal('function', typeof(opts)); | |
99 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
100 | return 'x' + Util.formatDate(x); |
101 | }, | |
102 | pixelsPerLabel: 60 | |
103 | }, | |
104 | y : { | |
105 | axisLabelFormatter: function(y, granularity, opts, dg) { | |
89fdcedb DV |
106 | assert.equal('number', typeof(y)); |
107 | assert.equal('number', typeof(granularity)); | |
108 | assert.equal('function', typeof(opts)); | |
109 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
110 | return 'y' + y; |
111 | } | |
112 | } | |
e0269a3d | 113 | }, |
48e614ac DV |
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 | ||
89fdcedb DV |
123 | assert.deepEqual(["x2011/01/02","x2011/01/04","x2011/01/06","x2011/01/08"], Util.getXLabels()); |
124 | assert.deepEqual(["y5","y10","y15"], Util.getYLabels()); | |
48e614ac DV |
125 | |
126 | g.setSelection(0); | |
89fdcedb DV |
127 | assert.equal("2011/01/01: y: 2", Util.getLegend()); |
128 | }); | |
48e614ac DV |
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. | |
89fdcedb | 133 | it('testDeprecatedValueFormatter', function() { |
48e614ac DV |
134 | var opts = { |
135 | width: 480, | |
136 | height: 320, | |
bfb3e0a4 RK |
137 | axes : { |
138 | x : { | |
139 | valueFormatter: function(x, opts, series_name, dg) { | |
89fdcedb DV |
140 | assert.equal('number', typeof(x)); |
141 | assert.equal('function', typeof(opts)); | |
142 | assert.equal('string', typeof(series_name)); | |
143 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
144 | return 'x' + x; |
145 | } | |
146 | }, | |
147 | y : { | |
148 | valueFormatter: function(y, opts, series_name, dg) { | |
89fdcedb DV |
149 | assert.equal('number', typeof(y)); |
150 | assert.equal('function', typeof(opts)); | |
151 | assert.equal('string', typeof(series_name)); | |
152 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
153 | return 'y' + y; |
154 | } | |
155 | } | |
48e614ac DV |
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. | |
89fdcedb DV |
167 | assert.deepEqual(['0','2','4','6','8'], Util.getXLabels()); |
168 | assert.deepEqual(["0","5","10","15"], Util.getYLabels()); | |
48e614ac DV |
169 | |
170 | // they do affect the legend, however. | |
171 | g.setSelection(2); | |
89fdcedb DV |
172 | assert.equal("x2: y: y4", Util.getLegend()); |
173 | }); | |
48e614ac | 174 | |
89fdcedb | 175 | it('testDeprecatedDateValueFormatter', function() { |
48e614ac DV |
176 | var opts = { |
177 | width: 480, | |
178 | height: 320, | |
bfb3e0a4 RK |
179 | axes : { |
180 | x : { | |
181 | valueFormatter: function(x, opts, series_name, dg) { | |
89fdcedb DV |
182 | assert.equal('number', typeof(x)); |
183 | assert.equal('function', typeof(opts)); | |
184 | assert.equal('string', typeof(series_name)); | |
185 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
186 | return 'x' + Util.formatDate(x); |
187 | }, | |
188 | pixelsPerLabel: 60 | |
189 | }, | |
190 | y : { | |
191 | valueFormatter: function(y, opts, series_name, dg) { | |
89fdcedb DV |
192 | assert.equal('number', typeof(y)); |
193 | assert.equal('function', typeof(opts)); | |
194 | assert.equal('string', typeof(series_name)); | |
195 | assert.equal('[Dygraph graph]', dg.toString()); | |
bfb3e0a4 RK |
196 | return 'y' + y; |
197 | } | |
198 | } | |
48e614ac | 199 | }, |
48e614ac DV |
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. | |
89fdcedb DV |
211 | assert.deepEqual(["02 Jan","04 Jan","06 Jan","08 Jan"], Util.getXLabels()); |
212 | assert.deepEqual(["5","10","15"], Util.getYLabels()); | |
48e614ac DV |
213 | |
214 | // the valueFormatter options also affect the legend. | |
215 | g.setSelection(2); | |
89fdcedb DV |
216 | assert.equal('x2011/01/03: y: y6', Util.getLegend()); |
217 | }); | |
48e614ac DV |
218 | |
219 | // This test verifies that when both a valueFormatter and an axisLabelFormatter | |
220 | // are specified, the axisLabelFormatter takes precedence. | |
89fdcedb | 221 | it('testDeprecatedAxisLabelFormatterPrecedence', function() { |
48e614ac DV |
222 | var opts = { |
223 | width: 480, | |
224 | height: 320, | |
bfb3e0a4 RK |
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 | } | |
48e614ac DV |
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 | ||
89fdcedb DV |
252 | assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels()); |
253 | assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels()); | |
48e614ac DV |
254 | |
255 | g.setSelection(9); | |
89fdcedb DV |
256 | assert.equal("xvf9: y: yvf18", Util.getLegend()); |
257 | }); | |
48e614ac DV |
258 | |
259 | // This is the same as the previous test, except that options are added | |
260 | // one-by-one. | |
89fdcedb | 261 | it('testDeprecatedAxisLabelFormatterIncremental', function() { |
48e614ac DV |
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({ | |
bfb3e0a4 RK |
274 | axes : { |
275 | x : { | |
276 | valueFormatter: function(x) { | |
277 | return 'xvf' + x; | |
278 | } | |
279 | } | |
48e614ac DV |
280 | } |
281 | }); | |
282 | g.updateOptions({ | |
bfb3e0a4 RK |
283 | axes : { |
284 | y : { | |
285 | valueFormatter: function(y) { | |
286 | return 'yvf' + y; | |
287 | } | |
288 | } | |
48e614ac DV |
289 | } |
290 | }); | |
291 | g.updateOptions({ | |
bfb3e0a4 RK |
292 | axes : { |
293 | x : { | |
294 | axisLabelFormatter: function(x) { | |
295 | return 'x' + x; | |
296 | } | |
297 | } | |
48e614ac DV |
298 | } |
299 | }); | |
300 | g.updateOptions({ | |
bfb3e0a4 RK |
301 | axes : { |
302 | y : { | |
303 | axisLabelFormatter: function(y) { | |
304 | return 'y' + y; | |
305 | } | |
306 | } | |
48e614ac DV |
307 | } |
308 | }); | |
309 | ||
89fdcedb DV |
310 | assert.deepEqual(["x0","x2","x4","x6","x8"], Util.getXLabels()); |
311 | assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels()); | |
ad69cb8a | 312 | |
48e614ac | 313 | g.setSelection(9); |
89fdcedb DV |
314 | assert.equal("xvf9: y: yvf18", Util.getLegend()); |
315 | }); | |
316 | ||
317 | }); |