Reduce the width of testGridLinePattern from 480px to 120px, making the test run...
[dygraphs.git] / auto_tests / tests / grid_per_axis.js
CommitLineData
4a0567da 1/**
97adf46b
DE
2 * @fileoverview Test cases for the per-axis grid options, including the new
3 * option "gridLinePattern".
4a0567da
DE
4 *
5 * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG)
6 */
97adf46b 7var GridPerAxisTestCase = TestCase("grid-per-axis");
4a0567da 8
97adf46b 9GridPerAxisTestCase.prototype.setUp = function() {
4a0567da
DE
10 document.body.innerHTML = "<div id='graph'></div>";
11};
12
97adf46b 13GridPerAxisTestCase.origFunc = Dygraph.getContext;
4a0567da 14
97adf46b 15GridPerAxisTestCase.prototype.setUp = function() {
4a0567da
DE
16 document.body.innerHTML = "<div id='graph'></div>";
17 Dygraph.getContext = function(canvas) {
97adf46b 18 return new Proxy(GridPerAxisTestCase.origFunc(canvas));
4a0567da
DE
19 };
20};
21
97adf46b
DE
22GridPerAxisTestCase.prototype.tearDown = function() {
23 Dygraph.getContext = GridPerAxisTestCase.origFunc;
4a0567da
DE
24};
25
97adf46b 26GridPerAxisTestCase.prototype.testIndependentGrids = function() {
4a0567da
DE
27 var opts = {
28 width : 480,
29 height : 320,
30 errorBars : false,
31 labels : [ "X", "Left", "Right" ],
32 series : {
33 Left : {
34 axis : "y"
35 },
36 Right : {
37 axis : "y2"
38 }
39 },
40 axes : {
41 y2 : {
42 drawGrid : true,
43 independentTicks : true
44 }
45 }
46 };
47
48 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
49 [ 5, 110, 333 ] ];
50 var graph = document.getElementById("graph");
51 var g = new Dygraph(graph, data, opts);
52
53 htx = g.hidden_ctx_;
54
55 // The expected gridlines
56 var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
57 var y2Gridlines = [ 0, 50, 100, 150, 200, 250, 300, 350 ];
58 var gridlines = [ yGridlines, y2Gridlines ];
59
60 function halfUp(x) {
61 return Math.round(x) + 0.5;
62 }
63 function halfDown(y) {
64 return Math.round(y) - 0.5;
65 }
66
67 var attrs = {}, x, y;
68 x = halfUp(g.plotter_.area.x);
69 // Step through y(0) and y2(1) axis
70 for ( var axis = 0; axis < 2; axis++) {
71 // Step through all gridlines of the axis
72 for ( var i = 0; i < gridlines[axis].length; i++) {
73 // Check the labels:
74 var labels = Util.getYLabels(axis + 1);
75 assertEquals("Expected label not found.", gridlines[axis][i], labels[i]);
76
77 // Check that the grid was drawn.
78 y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
79 var p1 = [ x, y ];
80 var p2 = [ x + g.plotter_.area.w, y ];
81 CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs);
82 }
83 }
84};
85
97adf46b 86GridPerAxisTestCase.prototype.testPerAxisGridColors = function() {
4a0567da
DE
87 var opts = {
88 width : 480,
89 height : 320,
90 errorBars : false,
91 labels : [ "X", "Left", "Right" ],
92 series : {
93 Left : {
94 axis : "y"
95 },
96 Right : {
97 axis : "y2"
98 }
99 },
100 axes : {
101 y : {
102 gridLineColor : "#0000ff",
103 gridLineWidth : 2
104 },
105 y2 : {
106 drawGrid : true,
107 independentTicks : true,
108 gridLineColor : "#ff0000",
109 gridLineWidth : 2,
110 }
111 }
112 };
113 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
114 [ 5, 110, 333 ] ];
115 var graph = document.getElementById("graph");
116 var g = new Dygraph(graph, data, opts);
117 htx = g.hidden_ctx_;
118
119 // The expected gridlines
120 var yGridlines = [ 20, 40, 60, 80, 100, 120 ];
121 var y2Gridlines = [ 50, 100, 150, 200, 250, 300, 350 ];
122 var gridlines = [ yGridlines, y2Gridlines ];
123 var gridColors = [ [ 0, 0, 255, 255 ], [ 255, 0, 0, 255 ] ];
124
125 function halfUp(x) {
126 return Math.round(x) + 1;
127 }
128 function halfDown(y) {
129 return Math.round(y) - 1;
130 }
131 var x, y;
132 x = halfUp(g.plotter_.area.x);
133 // Step through y(0) and y2(1) axis
134 for ( var axis = 0; axis < 2; axis++) {
135 // Step through all gridlines of the axis
136 for ( var i = 0; i < gridlines[axis].length; i++) {
137 y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
138 // Check the grid colors.
139 assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y,
140 gridColors[axis], Util.samplePixel(g.hidden_, x, y));
141 }
142 }
143};
97adf46b 144GridPerAxisTestCase.prototype.testPerAxisGridWidth = function() {
4a0567da
DE
145 var opts = {
146 width : 480,
147 height : 320,
148 errorBars : false,
149 gridLineColor : "#ff0000",
150 labels : [ "X", "Left", "Right" ],
151 series : {
152 Left : {
153 axis : "y"
154 },
155 Right : {
156 axis : "y2"
157 }
158 },
159 axes : {
160 x : {
161 gridLineWidth : 4
162 },
163 y : {
164 gridLineWidth : 2
165 },
166 y2 : {
167 drawGrid : true,
168 independentTicks : true,
169 gridLineWidth : 1
170 }
171 }
172 };
173 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
174 [ 5, 110, 333 ] ];
175 var graph = document.getElementById("graph");
176 var g = new Dygraph(graph, data, opts);
177 htx = g.hidden_ctx_;
178
179 // The expected gridlines
180 var yGridlines = [ 20, 40, 60, 80 ];
181 var y2Gridlines = [ 50, 100, 150, 200, 250, 350 ];
182 var gridlines = [ yGridlines, y2Gridlines ];
183 var xGridlines = [ 2, 3, 4 ];
86b5007b
DE
184 var gridColor = [ 255, 0, 0 ];
185 var emptyColor = [ 0, 0, 0 ];
4a0567da
DE
186
187 function halfUp(x) {
188 return Math.round(x) + 1;
189 }
190 function halfDown(y) {
191 return Math.round(y) - 1;
192 }
193 var x, y;
194 x = halfUp(g.plotter_.area.x + 10);
195 // Step through y(0) and y2(1) axis
196 for ( var axis = 0; axis < 2; axis++) {
197 // Step through all gridlines of the axis
198 for ( var i = 0; i < gridlines[axis].length; i++) {
199 y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
86b5007b
DE
200 // Ignore the alpha value
201 var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2).slice(0, 3);
202 var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1).slice(0, 3);
203 var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0, 3);
204 var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1).slice(0, 3);
205 var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2).slice(0, 3);
4a0567da
DE
206 // Check the grid width.
207 switch (axis) {
208 case 0: // y with 2 pixels width
86b5007b
DE
209 assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
210 + y, emptyColor, drawnPixeldown2);
211 assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
212 + y, gridColor, drawnPixeldown1);
213 assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
214 + y, gridColor, drawnPixel);
215 assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
216 + y, gridColor, drawnPixelup1);
217 assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
218 + y, emptyColor, drawnPixelup2);
4a0567da
DE
219 break;
220 case 1: // y2 with 1 pixel width
86b5007b
DE
221 assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
222 + y, emptyColor, drawnPixeldown1);
223 assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
224 + y, gridColor, drawnPixel);
225 assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
226 + y, emptyColor, drawnPixelup1);
4a0567da
DE
227 break;
228 }
229 }
230 }
231
232 // Check the x axis grid
233 y = halfDown(g.plotter_.area.y) + 10;
234 for ( var i = 0; i < xGridlines.length; i++) {
235 x = halfUp(g.toDomXCoord(xGridlines[i]));
86b5007b
DE
236 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
237 emptyColor, Util.samplePixel(g.hidden_, x - 4, y).slice(0, 3));
238 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
239 gridColor, Util.samplePixel(g.hidden_, x - 3, y).slice(0, 3));
240 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
241 gridColor, Util.samplePixel(g.hidden_, x - 2, y).slice(0, 3));
242 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
243 gridColor, Util.samplePixel(g.hidden_, x - 1, y).slice(0, 3));
244 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
245 gridColor, Util.samplePixel(g.hidden_, x, y).slice(0, 3));
246 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
247 gridColor, Util.samplePixel(g.hidden_, x + 1, y).slice(0, 3));
248 assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
249 emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3));
4a0567da
DE
250 }
251};
97adf46b 252GridPerAxisTestCase.prototype.testGridLinePattern = function() {
4a0567da 253 var opts = {
1dc23fac 254 width : 120,
4a0567da
DE
255 height : 320,
256 errorBars : false,
257 drawXGrid : false,
258 drawXAxis : false,
259 drawYAxis : false,
260 labels : [ "X", "Left", "Right" ],
261 colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
262 series : {
263 Left : {
264 axis : "y"
265 },
266 Right : {
267 axis : "y2"
268 }
269 },
270 axes : {
271 y : {
272 gridLineColor : "#0000ff",
2cc8bf0a 273 gridLinePattern : [ 10, 10 ]
4a0567da
DE
274 }
275 }
276 };
277 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
278 [ 5, 110, 333 ] ];
279 var graph = document.getElementById("graph");
280 var g = new Dygraph(graph, data, opts);
281 htx = g.hidden_ctx_;
282
283 // The expected gridlines
284 var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
285
286 function halfUp(x) {
287 return Math.round(x) + 1;
288 }
289 function halfDown(y) {
290 return Math.round(y) - 1;
291 }
292 var x, y;
4a0567da 293 // Step through all gridlines of the axis
1dc23fac 294 for (var i = 0; i < yGridlines.length; i++) {
4a0567da
DE
295 y = halfDown(g.toDomYCoord(yGridlines[i], 0));
296 // Step through the pixels of the line and test the pattern.
406b8518 297 for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) {
2cc8bf0a
DE
298 // avoid checking the edge pixels since they differ depending on the OS.
299 var pixelpos = x % 10;
300 if(pixelpos < 1 || pixelpos > 8) continue;
301
86b5007b
DE
302 // Ignore alpha
303 var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0,3);
2cc8bf0a 304 var pattern = (Math.floor((x) / 10)) % 2;
4a0567da
DE
305 switch (pattern) {
306 case 0: // fill
1dc23fac 307 assertEquals("Unexpected filled grid-pattern color found at pixel: x: " + x + " y: "
86b5007b 308 + y, [ 0, 0, 255 ], drawnPixel);
4a0567da
DE
309 break;
310 case 1: // no fill
1dc23fac 311 assertEquals("Unexpected empty grid-pattern color found at pixel: x: " + x + " y: "
86b5007b 312 + y, [ 0, 0, 0 ], drawnPixel);
4a0567da
DE
313 break;
314 }
315 }
316 }
317};