2 * @fileoverview Test cases for toDomCoords/toDataCoords
4 * @author danvk@google.com (Dan Vanderkam)
7 describe("to-dom-coords", function() {
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
));
17 afterEach(function() {
18 Dygraph
.getContext
= origFunc
;
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
)));
35 it('testPlainChart', function() {
55 var graph
= document
.getElementById("graph");
56 var g
= new Dygraph(graph
, [ [0,0], [100,100] ], opts
);
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));
65 // TODO(konigsberg): This doesn't really belong here. Move to its own test.
66 var htx
= g
.hidden_ctx_
;
67 assert
.equal(1, CanvasAssertions
.numLinesDrawn(htx
, '#ff0000'));
70 it('testChartWithAxes', function() {
93 var graph
= document
.getElementById("graph");
94 var g
= new Dygraph(graph
, [ [0,0], [100,100] ], opts
);
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));
104 it('testChartWithAxesAndLabels', function() {
120 valueRange
: [0, 100],
121 dateWindow
: [0, 100],
125 ylabel
: 'This is the y-axis',
126 xlabel
: 'This is the x-axis',
128 title
: 'This is the title of the chart',
132 var graph
= document
.getElementById("graph");
133 var g
= new Dygraph(graph
, [ [0,0], [100,100] ], opts
);
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));
143 it('testYAxisLabelWidth', function() {
145 axes
: { y
: { axisLabelWidth
: 100 } },
148 valueRange
: [0, 100],
149 dateWindow
: [0, 100],
154 var graph
= document
.getElementById("graph");
155 var g
= new Dygraph(graph
, [ [0,0], [100,100] ], opts
);
157 assert
.deepEqual([100, 0], g
.toDomCoords(0, 100));
158 assert
.deepEqual([500, 486], g
.toDomCoords(100, 0));
161 axes
: { y
: { axisLabelWidth
: 50 }},
163 assert
.deepEqual([50, 0], g
.toDomCoords(0, 100));
164 assert
.deepEqual([500, 486], g
.toDomCoords(100, 0));
167 it('testAxisTickSize', function() {
169 axes
: { y
: { axisLabelWidth
: 100 } },
172 valueRange
: [0, 100],
173 dateWindow
: [0, 100],
178 var graph
= document
.getElementById("graph");
179 var g
= new Dygraph(graph
, [ [0,0], [100,100] ], opts
);
181 assert
.deepEqual([100, 0], g
.toDomCoords(0, 100));
182 assert
.deepEqual([500, 486], g
.toDomCoords(100, 0));
184 g
.updateOptions({ axisTickSize
: 50 });
185 assert
.deepEqual([200, 0], g
.toDomCoords(0, 100));
186 assert
.deepEqual([500, 386], g
.toDomCoords(100, 0));
189 it('testChartLogarithmic_YAxis', function() {
210 var graph
= document
.getElementById("graph");
211 var g
= new Dygraph(graph
, [ [1,1], [4,4] ], opts
);
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
);
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));
227 it('testChartLogarithmic_XAxis', function() {
230 valueRange
: [1, 1000],
231 dateWindow
: [1, 1000],
248 var graph
= document
.getElementById("graph");
249 var g
= new Dygraph(graph
, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts
);
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
);
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
);
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
);
268 // Now zoom in and ensure that the methods return reasonable values.
269 g
.updateOptions({dateWindow
: [ 10, 100 ]});
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
);
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
);
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
);