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