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