Merge pull request #574 from danvk/test-warnings
[dygraphs.git] / auto_tests / tests / to_dom_coords.js
CommitLineData
063e83ba
DV
1/**
2 * @fileoverview Test cases for toDomCoords/toDataCoords
3 *
4 * @author danvk@google.com (Dan Vanderkam)
5 */
6
89fdcedb 7describe("to-dom-coords", function() {
063e83ba 8
319d0361 9var origFunc = Dygraph.getContext;
89fdcedb 10beforeEach(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 17afterEach(function() {
319d0361 18 Dygraph.getContext = origFunc;
89fdcedb 19});
063e83ba
DV
20
21// Checks that toDomCoords and toDataCoords are inverses of one another.
319d0361 22var 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 35it('testPlainChart', function() {
063e83ba 36 var opts = {
1b7afc93
DV
37 axes: {
38 x: {
7f6a7190 39 drawAxis : false,
1b7afc93 40 drawGrid : false
7f6a7190 41 },
1b7afc93 42 y: {
7f6a7190 43 drawAxis : false,
1b7afc93 44 drawGrid : false
7f6a7190
RK
45 }
46 },
063e83ba
DV
47 rightGap: 0,
48 valueRange: [0, 100],
49 dateWindow: [0, 100],
50 width: 400,
51 height: 400,
1b7afc93
DV
52 colors: ['#ff0000'],
53 labels: ['X', 'Y']
063e83ba
DV
54 }
55
56 var graph = document.getElementById("graph");
89fdcedb 57 var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
063e83ba 58
89fdcedb
DV
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));
063e83ba 63
319d0361 64 checkForInverses(g);
063e83ba 65
796ccbc0 66 // TODO(konigsberg): This doesn't really belong here. Move to its own test.
063e83ba 67 var htx = g.hidden_ctx_;
89fdcedb
DV
68 assert.equal(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
69});
063e83ba 70
89fdcedb 71it('testChartWithAxes', function() {
063e83ba 72 var opts = {
1b7afc93
DV
73 axes: {
74 x: {
bfb3e0a4
RK
75 drawGrid: false,
76 drawAxis: true,
77 },
1b7afc93 78 y: {
bfb3e0a4
RK
79 drawGrid: false,
80 drawAxis: true,
81 axisLabelWidth: 100
82 }
83 },
063e83ba 84 xAxisHeight: 50,
063e83ba 85 axisTickSize: 0,
063e83ba
DV
86 rightGap: 0,
87 valueRange: [0, 100],
88 dateWindow: [0, 100],
89 width: 500,
90 height: 450,
1b7afc93
DV
91 colors: ['#ff0000'],
92 labels: ['X', 'Y']
063e83ba
DV
93 }
94
95 var graph = document.getElementById("graph");
89fdcedb 96 var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
063e83ba 97
89fdcedb
DV
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));
063e83ba 102
319d0361 103 checkForInverses(g);
89fdcedb 104});
063e83ba 105
89fdcedb 106it('testChartWithAxesAndLabels', function() {
063e83ba 107 var opts = {
1b7afc93
DV
108 axes: {
109 x: {
bfb3e0a4
RK
110 drawGrid: false,
111 drawAxis: true,
112 },
1b7afc93 113 y: {
bfb3e0a4
RK
114 drawGrid: false,
115 drawAxis: true,
116 axisLabelWidth: 100
1b7afc93 117 },
bfb3e0a4 118 },
063e83ba 119 xAxisHeight: 50,
063e83ba 120 axisTickSize: 0,
063e83ba
DV
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',
1b7afc93
DV
131 titleHeight: 25,
132 labels: ['X', 'Y']
063e83ba
DV
133 }
134
135 var graph = document.getElementById("graph");
89fdcedb 136 var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
063e83ba 137
89fdcedb
DV
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));
063e83ba 142
319d0361 143 checkForInverses(g);
89fdcedb 144});
efd5b117 145
89fdcedb 146it('testYAxisLabelWidth', function() {
efd5b117 147 var opts = {
bfb3e0a4 148 axes: { y: { axisLabelWidth: 100 } },
efd5b117
RK
149 axisTickSize: 0,
150 rightGap: 0,
151 valueRange: [0, 100],
152 dateWindow: [0, 100],
153 width: 500,
1b7afc93
DV
154 height: 500,
155 labels: ['X', 'Y']
efd5b117
RK
156 }
157
158 var graph = document.getElementById("graph");
89fdcedb 159 var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
efd5b117 160
89fdcedb
DV
161 assert.deepEqual([100, 0], g.toDomCoords(0, 100));
162 assert.deepEqual([500, 486], g.toDomCoords(100, 0));
efd5b117 163
bfb3e0a4
RK
164 g.updateOptions({
165 axes: { y: { axisLabelWidth: 50 }},
166 });
89fdcedb
DV
167 assert.deepEqual([50, 0], g.toDomCoords(0, 100));
168 assert.deepEqual([500, 486], g.toDomCoords(100, 0));
169});
268e525d 170
89fdcedb 171it('testAxisTickSize', function() {
268e525d 172 var opts = {
bfb3e0a4 173 axes: { y: { axisLabelWidth: 100 } },
268e525d
RK
174 axisTickSize: 0,
175 rightGap: 0,
176 valueRange: [0, 100],
177 dateWindow: [0, 100],
178 width: 500,
1b7afc93
DV
179 height: 500,
180 labels: ['X', 'Y']
268e525d
RK
181 }
182
183 var graph = document.getElementById("graph");
89fdcedb 184 var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
268e525d 185
89fdcedb
DV
186 assert.deepEqual([100, 0], g.toDomCoords(0, 100));
187 assert.deepEqual([500, 486], g.toDomCoords(100, 0));
268e525d
RK
188
189 g.updateOptions({ axisTickSize : 50 });
89fdcedb
DV
190 assert.deepEqual([200, 0], g.toDomCoords(0, 100));
191 assert.deepEqual([500, 386], g.toDomCoords(100, 0));
192});
1f8c95d8 193
89fdcedb 194it('testChartLogarithmic_YAxis', function() {
1f8c95d8 195 var opts = {
1f8c95d8 196 rightGap: 0,
c8e01863
DV
197 valueRange: [1, 4],
198 dateWindow: [0, 10],
1f8c95d8 199 width: 400,
200 height: 400,
5b9b2142
RK
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 }
1b7afc93
DV
212 },
213 labels: ['X', 'Y']
1f8c95d8 214 }
215
216 var graph = document.getElementById("graph");
89fdcedb 217 var g = new Dygraph(graph, [ [1,1], [4,4] ], opts);
c8e01863
DV
218
219 var epsilon = 1e-8;
dc910fce
DV
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);
1f8c95d8 225
89fdcedb
DV
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
233it('testChartLogarithmic_XAxis', function() {
5b9b2142
RK
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 }
1b7afc93
DV
251 },
252 labels: ['X', 'Y']
5b9b2142
RK
253 }
254
255 var graph = document.getElementById("graph");
89fdcedb 256 var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);
5b9b2142
RK
257
258 var epsilon = 1e-8;
dc910fce
DV
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);
5b9b2142
RK
274
275 // Now zoom in and ensure that the methods return reasonable values.
276 g.updateOptions({dateWindow: [ 10, 100 ]});
277
dc910fce
DV
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);
89fdcedb
DV
293});
294
295});