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