Commit | Line | Data |
---|---|---|
063e83ba DV |
1 | /** |
2 | * @fileoverview Test cases for toDomCoords/toDataCoords | |
3 | * | |
4 | * @author danvk@google.com (Dan Vanderkam) | |
5 | */ | |
6 | ||
89fdcedb | 7 | describe("to-dom-coords", function() { |
063e83ba | 8 | |
319d0361 | 9 | var origFunc = Dygraph.getContext; |
89fdcedb | 10 | beforeEach(function() { |
063e83ba DV |
11 | document.body.innerHTML = "<div id='graph'></div>"; |
12 | Dygraph.getContext = function(canvas) { | |
319d0361 | 13 | return new Proxy(origFunc(canvas)); |
063e83ba | 14 | } |
89fdcedb | 15 | }); |
063e83ba | 16 | |
89fdcedb | 17 | afterEach(function() { |
319d0361 | 18 | Dygraph.getContext = origFunc; |
89fdcedb | 19 | }); |
063e83ba DV |
20 | |
21 | // Checks that toDomCoords and toDataCoords are inverses of one another. | |
319d0361 | 22 | var checkForInverses = function(g) { |
063e83ba DV |
23 | var x_range = g.xAxisRange(); |
24 | var y_range = g.yAxisRange(); | |
25 | for (var i = 0; i <= 10; i++) { | |
26 | var x = x_range[0] + i / 10.0 * (x_range[1] - x_range[0]); | |
27 | for (var j = 0; j <= 10; j++) { | |
28 | var y = y_range[0] + j / 10.0 * (y_range[1] - y_range[0]); | |
89fdcedb DV |
29 | assert.equal(x, g.toDataXCoord(g.toDomXCoord(x))); |
30 | assert.equal(y, g.toDataYCoord(g.toDomYCoord(y))); | |
063e83ba DV |
31 | } |
32 | } | |
319d0361 | 33 | }; |
063e83ba | 34 | |
89fdcedb | 35 | it('testPlainChart', function() { |
063e83ba | 36 | var opts = { |
7f6a7190 RK |
37 | axes : { |
38 | x : { | |
39 | drawAxis : false, | |
40 | drawGrid : false, | |
41 | }, | |
42 | y : { | |
43 | drawAxis : false, | |
44 | drawGrid : false, | |
45 | } | |
46 | }, | |
063e83ba DV |
47 | rightGap: 0, |
48 | valueRange: [0, 100], | |
49 | dateWindow: [0, 100], | |
50 | width: 400, | |
51 | height: 400, | |
52 | colors: ['#ff0000'] | |
53 | } | |
54 | ||
55 | var graph = document.getElementById("graph"); | |
89fdcedb | 56 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
063e83ba | 57 | |
89fdcedb DV |
58 | assert.deepEqual([0, 100], g.toDataCoords(0, 0)); |
59 | assert.deepEqual([0, 0], g.toDataCoords(0, 400)); | |
60 | assert.deepEqual([100, 100], g.toDataCoords(400, 0)); | |
61 | assert.deepEqual([100, 0], g.toDataCoords(400, 400)); | |
063e83ba | 62 | |
319d0361 | 63 | checkForInverses(g); |
063e83ba | 64 | |
796ccbc0 | 65 | // TODO(konigsberg): This doesn't really belong here. Move to its own test. |
063e83ba | 66 | var htx = g.hidden_ctx_; |
89fdcedb DV |
67 | assert.equal(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000')); |
68 | }); | |
063e83ba | 69 | |
89fdcedb | 70 | it('testChartWithAxes', function() { |
063e83ba | 71 | var opts = { |
bfb3e0a4 RK |
72 | axes : { |
73 | x : { | |
74 | drawGrid: false, | |
75 | drawAxis: true, | |
76 | }, | |
77 | y : { | |
78 | drawGrid: false, | |
79 | drawAxis: true, | |
80 | axisLabelWidth: 100 | |
81 | } | |
82 | }, | |
063e83ba | 83 | xAxisHeight: 50, |
063e83ba | 84 | axisTickSize: 0, |
063e83ba DV |
85 | rightGap: 0, |
86 | valueRange: [0, 100], | |
87 | dateWindow: [0, 100], | |
88 | width: 500, | |
89 | height: 450, | |
90 | colors: ['#ff0000'] | |
91 | } | |
92 | ||
93 | var graph = document.getElementById("graph"); | |
89fdcedb | 94 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
063e83ba | 95 | |
89fdcedb DV |
96 | assert.deepEqual([0, 100], g.toDataCoords(100, 0)); |
97 | assert.deepEqual([0, 0], g.toDataCoords(100, 400)); | |
98 | assert.deepEqual([100, 100], g.toDataCoords(500, 0)); | |
99 | assert.deepEqual([100, 0], g.toDataCoords(500, 400)); | |
063e83ba | 100 | |
319d0361 | 101 | checkForInverses(g); |
89fdcedb | 102 | }); |
063e83ba | 103 | |
89fdcedb | 104 | it('testChartWithAxesAndLabels', function() { |
063e83ba | 105 | var opts = { |
bfb3e0a4 RK |
106 | axes : { |
107 | x : { | |
108 | drawGrid: false, | |
109 | drawAxis: true, | |
110 | }, | |
111 | y : { | |
112 | drawGrid: false, | |
113 | drawAxis: true, | |
114 | axisLabelWidth: 100 | |
115 | } | |
116 | }, | |
063e83ba | 117 | xAxisHeight: 50, |
063e83ba | 118 | axisTickSize: 0, |
063e83ba DV |
119 | rightGap: 0, |
120 | valueRange: [0, 100], | |
121 | dateWindow: [0, 100], | |
122 | width: 500, | |
123 | height: 500, | |
124 | colors: ['#ff0000'], | |
125 | ylabel: 'This is the y-axis', | |
126 | xlabel: 'This is the x-axis', | |
127 | xLabelHeight: 25, | |
128 | title: 'This is the title of the chart', | |
129 | titleHeight: 25 | |
130 | } | |
131 | ||
132 | var graph = document.getElementById("graph"); | |
89fdcedb | 133 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
063e83ba | 134 | |
89fdcedb DV |
135 | assert.deepEqual([0, 100], g.toDataCoords(100, 25)); |
136 | assert.deepEqual([0, 0], g.toDataCoords(100, 425)); | |
137 | assert.deepEqual([100, 100], g.toDataCoords(500, 25)); | |
138 | assert.deepEqual([100, 0], g.toDataCoords(500, 425)); | |
063e83ba | 139 | |
319d0361 | 140 | checkForInverses(g); |
89fdcedb | 141 | }); |
efd5b117 | 142 | |
89fdcedb | 143 | it('testYAxisLabelWidth', function() { |
efd5b117 | 144 | var opts = { |
bfb3e0a4 | 145 | axes: { y: { axisLabelWidth: 100 } }, |
efd5b117 RK |
146 | axisTickSize: 0, |
147 | rightGap: 0, | |
148 | valueRange: [0, 100], | |
149 | dateWindow: [0, 100], | |
150 | width: 500, | |
268e525d | 151 | height: 500 |
efd5b117 RK |
152 | } |
153 | ||
154 | var graph = document.getElementById("graph"); | |
89fdcedb | 155 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
efd5b117 | 156 | |
89fdcedb DV |
157 | assert.deepEqual([100, 0], g.toDomCoords(0, 100)); |
158 | assert.deepEqual([500, 486], g.toDomCoords(100, 0)); | |
efd5b117 | 159 | |
bfb3e0a4 RK |
160 | g.updateOptions({ |
161 | axes: { y: { axisLabelWidth: 50 }}, | |
162 | }); | |
89fdcedb DV |
163 | assert.deepEqual([50, 0], g.toDomCoords(0, 100)); |
164 | assert.deepEqual([500, 486], g.toDomCoords(100, 0)); | |
165 | }); | |
268e525d | 166 | |
89fdcedb | 167 | it('testAxisTickSize', function() { |
268e525d | 168 | var opts = { |
bfb3e0a4 | 169 | axes: { y: { axisLabelWidth: 100 } }, |
268e525d RK |
170 | axisTickSize: 0, |
171 | rightGap: 0, | |
172 | valueRange: [0, 100], | |
173 | dateWindow: [0, 100], | |
174 | width: 500, | |
175 | height: 500 | |
176 | } | |
177 | ||
178 | var graph = document.getElementById("graph"); | |
89fdcedb | 179 | var g = new Dygraph(graph, [ [0,0], [100,100] ], opts); |
268e525d | 180 | |
89fdcedb DV |
181 | assert.deepEqual([100, 0], g.toDomCoords(0, 100)); |
182 | assert.deepEqual([500, 486], g.toDomCoords(100, 0)); | |
268e525d RK |
183 | |
184 | g.updateOptions({ axisTickSize : 50 }); | |
89fdcedb DV |
185 | assert.deepEqual([200, 0], g.toDomCoords(0, 100)); |
186 | assert.deepEqual([500, 386], g.toDomCoords(100, 0)); | |
187 | }); | |
1f8c95d8 | 188 | |
89fdcedb | 189 | it('testChartLogarithmic_YAxis', function() { |
1f8c95d8 | 190 | var opts = { |
1f8c95d8 | 191 | rightGap: 0, |
c8e01863 DV |
192 | valueRange: [1, 4], |
193 | dateWindow: [0, 10], | |
1f8c95d8 | 194 | width: 400, |
195 | height: 400, | |
5b9b2142 RK |
196 | colors: ['#ff0000'], |
197 | axes: { | |
198 | x: { | |
199 | drawGrid: false, | |
200 | drawAxis: false | |
201 | }, | |
202 | y: { | |
203 | drawGrid: false, | |
204 | drawAxis: false, | |
205 | logscale: true | |
206 | } | |
207 | } | |
1f8c95d8 | 208 | } |
209 | ||
210 | var graph = document.getElementById("graph"); | |
89fdcedb | 211 | var g = new Dygraph(graph, [ [1,1], [4,4] ], opts); |
c8e01863 DV |
212 | |
213 | var epsilon = 1e-8; | |
dc910fce DV |
214 | assertDeepCloseTo([0, 4], g.toDataCoords(0, 0), epsilon); |
215 | assertDeepCloseTo([0, 1], g.toDataCoords(0, 400), epsilon); | |
216 | assertDeepCloseTo([10, 4], g.toDataCoords(400, 0), epsilon); | |
217 | assertDeepCloseTo([10, 1], g.toDataCoords(400, 400), epsilon); | |
218 | assertDeepCloseTo([10, 2], g.toDataCoords(400, 200), epsilon); | |
1f8c95d8 | 219 | |
89fdcedb DV |
220 | assert.deepEqual([0, 0], g.toDomCoords(0, 4)); |
221 | assert.deepEqual([0, 400], g.toDomCoords(0, 1)); | |
222 | assert.deepEqual([400, 0], g.toDomCoords(10, 4)); | |
223 | assert.deepEqual([400, 400], g.toDomCoords(10, 1)); | |
224 | assert.deepEqual([400, 200], g.toDomCoords(10, 2)); | |
225 | }); | |
226 | ||
227 | it('testChartLogarithmic_XAxis', function() { | |
5b9b2142 RK |
228 | var opts = { |
229 | rightGap: 0, | |
230 | valueRange: [1, 1000], | |
231 | dateWindow: [1, 1000], | |
232 | width: 400, | |
233 | height: 400, | |
234 | colors: ['#ff0000'], | |
235 | axes: { | |
236 | x: { | |
237 | drawGrid: false, | |
238 | drawAxis: false, | |
239 | logscale: true | |
240 | }, | |
241 | y: { | |
242 | drawGrid: false, | |
243 | drawAxis: false | |
244 | } | |
245 | } | |
246 | } | |
247 | ||
248 | var graph = document.getElementById("graph"); | |
89fdcedb | 249 | var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts); |
5b9b2142 RK |
250 | |
251 | var epsilon = 1e-8; | |
dc910fce DV |
252 | assert.closeTo(1, g.toDataXCoord(0), epsilon); |
253 | assert.closeTo(5.623413251903489, g.toDataXCoord(100), epsilon); | |
254 | assert.closeTo(31.62277660168378, g.toDataXCoord(200), epsilon); | |
255 | assert.closeTo(177.8279410038921, g.toDataXCoord(300), epsilon); | |
256 | assert.closeTo(1000, g.toDataXCoord(400), epsilon); | |
257 | ||
258 | assert.closeTo(0, g.toDomXCoord(1), epsilon); | |
259 | assert.closeTo(3.6036036036036037, g.toDomXCoord(10), epsilon); | |
260 | assert.closeTo(39.63963963963964, g.toDomXCoord(100), epsilon); | |
261 | assert.closeTo(400, g.toDomXCoord(1000), epsilon); | |
262 | ||
263 | assert.closeTo(0, g.toPercentXCoord(1), epsilon); | |
264 | assert.closeTo(0.3333333333, g.toPercentXCoord(10), epsilon); | |
265 | assert.closeTo(0.6666666666, g.toPercentXCoord(100), epsilon); | |
266 | assert.closeTo(1, g.toPercentXCoord(1000), epsilon); | |
5b9b2142 RK |
267 | |
268 | // Now zoom in and ensure that the methods return reasonable values. | |
269 | g.updateOptions({dateWindow: [ 10, 100 ]}); | |
270 | ||
dc910fce DV |
271 | assert.closeTo(10, g.toDataXCoord(0), epsilon); |
272 | assert.closeTo(17.78279410038923, g.toDataXCoord(100), epsilon); | |
273 | assert.closeTo(31.62277660168379, g.toDataXCoord(200), epsilon); | |
274 | assert.closeTo(56.23413251903491, g.toDataXCoord(300), epsilon); | |
275 | assert.closeTo(100, g.toDataXCoord(400), epsilon); | |
276 | ||
277 | assert.closeTo(-40, g.toDomXCoord(1), epsilon); | |
278 | assert.closeTo(0, g.toDomXCoord(10), epsilon); | |
279 | assert.closeTo(400, g.toDomXCoord(100), epsilon); | |
280 | assert.closeTo(4400, g.toDomXCoord(1000), epsilon); | |
281 | ||
282 | assert.closeTo(-1, g.toPercentXCoord(1), epsilon); | |
283 | assert.closeTo(0, g.toPercentXCoord(10), epsilon); | |
284 | assert.closeTo(1, g.toPercentXCoord(100), epsilon); | |
285 | assert.closeTo(2, g.toPercentXCoord(1000), epsilon); | |
89fdcedb DV |
286 | }); |
287 | ||
288 | }); |