Commit | Line | Data |
---|---|---|
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 | 7 | var GridPerAxisTestCase = TestCase("grid-per-axis"); |
4a0567da | 8 | |
97adf46b | 9 | GridPerAxisTestCase.prototype.setUp = function() { |
4a0567da DE |
10 | document.body.innerHTML = "<div id='graph'></div>"; |
11 | }; | |
12 | ||
97adf46b | 13 | GridPerAxisTestCase.origFunc = Dygraph.getContext; |
4a0567da | 14 | |
97adf46b | 15 | GridPerAxisTestCase.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 |
22 | GridPerAxisTestCase.prototype.tearDown = function() { |
23 | Dygraph.getContext = GridPerAxisTestCase.origFunc; | |
4a0567da DE |
24 | }; |
25 | ||
97adf46b | 26 | GridPerAxisTestCase.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 | 86 | GridPerAxisTestCase.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 | 144 | GridPerAxisTestCase.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 ]; | |
184 | ||
185 | function halfUp(x) { | |
186 | return Math.round(x) + 1; | |
187 | } | |
188 | function halfDown(y) { | |
189 | return Math.round(y) - 1; | |
190 | } | |
191 | var x, y; | |
192 | x = halfUp(g.plotter_.area.x + 10); | |
193 | // Step through y(0) and y2(1) axis | |
194 | for ( var axis = 0; axis < 2; axis++) { | |
195 | // Step through all gridlines of the axis | |
196 | for ( var i = 0; i < gridlines[axis].length; i++) { | |
197 | y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); | |
198 | var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2); | |
199 | var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1); | |
200 | var drawnPixel = Util.samplePixel(g.hidden_, x, y); | |
201 | var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1); | |
202 | var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2); | |
203 | // Check the grid width. | |
204 | switch (axis) { | |
205 | case 0: // y with 2 pixels width | |
206 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
207 | + y, [ 0, 0, 0, 0 ], drawnPixeldown2); | |
208 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
209 | + y, [ 255, 0, 0, 127 ], drawnPixeldown1); | |
210 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
211 | + y, [ 255, 0, 0, 255 ], drawnPixel); | |
212 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
213 | + y, [ 255, 0, 0, 128 ], drawnPixelup1); | |
214 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
215 | + y, [ 0, 0, 0, 0 ], drawnPixelup2); | |
216 | break; | |
217 | case 1: // y2 with 1 pixel width | |
218 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
219 | + y, [ 0, 0, 0, 0 ], drawnPixeldown1); | |
220 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
221 | + y, [ 255, 0, 0, 255 ], drawnPixel); | |
222 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
223 | + y, [ 0, 0, 0, 0 ], drawnPixelup1); | |
224 | break; | |
225 | } | |
226 | } | |
227 | } | |
228 | ||
229 | // Check the x axis grid | |
230 | y = halfDown(g.plotter_.area.y) + 10; | |
231 | for ( var i = 0; i < xGridlines.length; i++) { | |
232 | x = halfUp(g.toDomXCoord(xGridlines[i])); | |
233 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
234 | 0, 0, 0, 0 ], Util.samplePixel(g.hidden_, x - 4, y)); | |
235 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
236 | 255, 0, 0, 128 ], Util.samplePixel(g.hidden_, x - 3, y)); | |
237 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
238 | 255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x - 2, y)); | |
239 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
240 | 255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x - 1, y)); | |
241 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
242 | 255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x, y)); | |
243 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
244 | 255, 0, 0, 128 ], Util.samplePixel(g.hidden_, x + 1, y)); | |
245 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ | |
246 | 0, 0, 0, 0 ], Util.samplePixel(g.hidden_, x + 2, y)); | |
247 | } | |
248 | }; | |
97adf46b | 249 | GridPerAxisTestCase.prototype.testGridLinePattern = function() { |
4a0567da DE |
250 | var opts = { |
251 | width : 480, | |
252 | height : 320, | |
253 | errorBars : false, | |
254 | drawXGrid : false, | |
255 | drawXAxis : false, | |
256 | drawYAxis : false, | |
257 | labels : [ "X", "Left", "Right" ], | |
258 | colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ], | |
259 | series : { | |
260 | Left : { | |
261 | axis : "y" | |
262 | }, | |
263 | Right : { | |
264 | axis : "y2" | |
265 | } | |
266 | }, | |
267 | axes : { | |
268 | y : { | |
269 | gridLineColor : "#0000ff", | |
270 | gridLinePattern : [ 4, 4 ] | |
271 | } | |
272 | } | |
273 | }; | |
274 | var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ], | |
275 | [ 5, 110, 333 ] ]; | |
276 | var graph = document.getElementById("graph"); | |
277 | var g = new Dygraph(graph, data, opts); | |
278 | htx = g.hidden_ctx_; | |
279 | ||
280 | // The expected gridlines | |
281 | var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ]; | |
282 | ||
283 | function halfUp(x) { | |
284 | return Math.round(x) + 1; | |
285 | } | |
286 | function halfDown(y) { | |
287 | return Math.round(y) - 1; | |
288 | } | |
289 | var x, y; | |
290 | x = halfUp(g.plotter_.area.x); | |
291 | // Step through all gridlines of the axis | |
292 | for ( var i = 0; i < yGridlines.length; i++) { | |
293 | y = halfDown(g.toDomYCoord(yGridlines[i], 0)); | |
294 | // Step through the pixels of the line and test the pattern. | |
295 | for (x; x < g.plotter_.area.w; x++) { | |
296 | var drawnPixel = Util.samplePixel(g.hidden_, x, y); | |
297 | var pattern = (Math.floor((x) / 4)) % 2; | |
298 | switch (pattern) { | |
299 | case 0: // fill | |
300 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
301 | + y, [ 0, 0, 255, 77 ], drawnPixel); | |
302 | break; | |
303 | case 1: // no fill | |
304 | assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " | |
305 | + y, [ 0, 0, 0, 0 ], drawnPixel); | |
306 | break; | |
307 | } | |
308 | } | |
309 | } | |
310 | }; |