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 | */ | |
6d6c60b6 | 7 | var DeprecatedAxisLabelsTestCase = TestCase("axis-labels-deprecated"); |
f3cbe61e | 8 | |
6d6c60b6 | 9 | DeprecatedAxisLabelsTestCase.prototype.setUp = function() { |
f3cbe61e DV |
10 | document.body.innerHTML = "<div id='graph'></div>"; |
11 | }; | |
12 | ||
6d6c60b6 | 13 | DeprecatedAxisLabelsTestCase.prototype.tearDown = function() { |
f3cbe61e DV |
14 | }; |
15 | ||
6d6c60b6 RK |
16 | // TODO(konigsberg): Scope these functions. |
17 | ||
f3cbe61e DV |
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 | ||
97889da4 | 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 | ||
48e614ac DV |
36 | function getLegend() { |
37 | var legend = document.getElementsByClassName("dygraph-legend")[0]; | |
38 | return legend.textContent; | |
39 | } | |
40 | ||
8fcf1b16 | 41 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDeprecatedXAxisTimeLabelFormatter = function() { |
ad69cb8a DV |
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 | }); | |
97889da4 | 62 | |
48e614ac DV |
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 | ||
8fcf1b16 | 70 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatter = function () { |
48e614ac DV |
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 | ||
8fcf1b16 | 104 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateAxisLabelFormatter = function () { |
48e614ac DV |
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. | |
8fcf1b16 | 141 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedValueFormatter = function () { |
48e614ac DV |
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 | ||
8fcf1b16 | 178 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () { |
48e614ac DV |
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. | |
8fcf1b16 | 217 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () { |
48e614ac DV |
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. | |
8fcf1b16 | 251 | DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () { |
48e614ac DV |
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()); | |
ad69cb8a | 286 | |
48e614ac DV |
287 | g.setSelection(9); |
288 | assertEquals("xvf9: y:yvf18", getLegend()); | |
ad69cb8a | 289 | }; |