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 | */ | |
89fdcedb | 7 | describe("grid-per-axis", function() { |
4a0567da | 8 | |
89fdcedb | 9 | beforeEach(function() { |
4a0567da | 10 | document.body.innerHTML = "<div id='graph'></div>"; |
89fdcedb | 11 | }); |
4a0567da | 12 | |
319d0361 | 13 | var origFunc = Dygraph.getContext; |
4a0567da | 14 | |
89fdcedb | 15 | beforeEach(function() { |
4a0567da DE |
16 | document.body.innerHTML = "<div id='graph'></div>"; |
17 | Dygraph.getContext = function(canvas) { | |
319d0361 | 18 | return new Proxy(origFunc(canvas)); |
4a0567da | 19 | }; |
89fdcedb | 20 | }); |
4a0567da | 21 | |
89fdcedb | 22 | afterEach(function() { |
319d0361 | 23 | Dygraph.getContext = origFunc; |
89fdcedb | 24 | }); |
4a0567da | 25 | |
89fdcedb | 26 | it('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 | ||
89fdcedb | 53 | var htx = g.hidden_ctx_; |
4a0567da DE |
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); | |
89fdcedb | 75 | assert.equal("Expected label not found.", gridlines[axis][i], labels[i]); |
4a0567da DE |
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 | } | |
89fdcedb | 84 | }); |
4a0567da | 85 | |
89fdcedb | 86 | it('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); | |
89fdcedb | 117 | var htx = g.hidden_ctx_; |
4a0567da DE |
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. | |
89fdcedb | 139 | assert.equal("Unexpected grid color found at pixel: x: " + x + "y: " + y, |
4a0567da DE |
140 | gridColors[axis], Util.samplePixel(g.hidden_, x, y)); |
141 | } | |
142 | } | |
89fdcedb DV |
143 | }); |
144 | it('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); | |
89fdcedb | 177 | var htx = g.hidden_ctx_; |
4a0567da DE |
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 | 200 | // Ignore the alpha value |
37819481 PH |
201 | |
202 | // FIXME(pholden): this test fails with a context pixel ratio of 2. | |
86b5007b DE |
203 | var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2).slice(0, 3); |
204 | var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1).slice(0, 3); | |
205 | var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0, 3); | |
206 | var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1).slice(0, 3); | |
207 | var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2).slice(0, 3); | |
4a0567da DE |
208 | // Check the grid width. |
209 | switch (axis) { | |
210 | case 0: // y with 2 pixels width | |
89fdcedb | 211 | assert.equal("Unexpected y-grid color found at pixel: x: " + x + "y: " |
86b5007b | 212 | + y, emptyColor, drawnPixeldown2); |
89fdcedb | 213 | assert.equal("Unexpected y-grid color found at pixel: x: " + x + "y: " |
86b5007b | 214 | + y, gridColor, drawnPixeldown1); |
89fdcedb | 215 | assert.equal("Unexpected y-grid color found at pixel: x: " + x + "y: " |
86b5007b | 216 | + y, gridColor, drawnPixel); |
89fdcedb | 217 | assert.equal("Unexpected y-grid color found at pixel: x: " + x + "y: " |
86b5007b | 218 | + y, gridColor, drawnPixelup1); |
89fdcedb | 219 | assert.equal("Unexpected y-grid color found at pixel: x: " + x + "y: " |
86b5007b | 220 | + y, emptyColor, drawnPixelup2); |
4a0567da DE |
221 | break; |
222 | case 1: // y2 with 1 pixel width | |
89fdcedb | 223 | assert.equal("Unexpected y2-grid color found at pixel: x: " + x + "y: " |
86b5007b | 224 | + y, emptyColor, drawnPixeldown1); |
89fdcedb | 225 | assert.equal("Unexpected y2-grid color found at pixel: x: " + x + "y: " |
86b5007b | 226 | + y, gridColor, drawnPixel); |
89fdcedb | 227 | assert.equal("Unexpected y2-grid color found at pixel: x: " + x + "y: " |
86b5007b | 228 | + y, emptyColor, drawnPixelup1); |
4a0567da DE |
229 | break; |
230 | } | |
231 | } | |
232 | } | |
233 | ||
234 | // Check the x axis grid | |
235 | y = halfDown(g.plotter_.area.y) + 10; | |
236 | for ( var i = 0; i < xGridlines.length; i++) { | |
237 | x = halfUp(g.toDomXCoord(xGridlines[i])); | |
89fdcedb | 238 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 239 | emptyColor, Util.samplePixel(g.hidden_, x - 4, y).slice(0, 3)); |
89fdcedb | 240 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 241 | gridColor, Util.samplePixel(g.hidden_, x - 3, y).slice(0, 3)); |
89fdcedb | 242 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 243 | gridColor, Util.samplePixel(g.hidden_, x - 2, y).slice(0, 3)); |
89fdcedb | 244 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 245 | gridColor, Util.samplePixel(g.hidden_, x - 1, y).slice(0, 3)); |
89fdcedb | 246 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 247 | gridColor, Util.samplePixel(g.hidden_, x, y).slice(0, 3)); |
89fdcedb | 248 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 249 | gridColor, Util.samplePixel(g.hidden_, x + 1, y).slice(0, 3)); |
89fdcedb | 250 | assert.equal("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, |
86b5007b | 251 | emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3)); |
4a0567da | 252 | } |
89fdcedb | 253 | }); |
7f6a7190 | 254 | |
89fdcedb | 255 | it('testGridLinePattern', function() { |
4a0567da | 256 | var opts = { |
1dc23fac | 257 | width : 120, |
4a0567da DE |
258 | height : 320, |
259 | errorBars : false, | |
4a0567da DE |
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 : { | |
bfb3e0a4 RK |
271 | x : { |
272 | drawGrid: false, | |
273 | drawAxis: false, | |
274 | }, | |
4a0567da | 275 | y : { |
bfb3e0a4 | 276 | drawAxis : false, |
4a0567da | 277 | gridLineColor : "#0000ff", |
2cc8bf0a | 278 | gridLinePattern : [ 10, 10 ] |
4a0567da DE |
279 | } |
280 | } | |
281 | }; | |
282 | var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ], | |
283 | [ 5, 110, 333 ] ]; | |
284 | var graph = document.getElementById("graph"); | |
285 | var g = new Dygraph(graph, data, opts); | |
89fdcedb | 286 | var htx = g.hidden_ctx_; |
4a0567da DE |
287 | |
288 | // The expected gridlines | |
289 | var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ]; | |
290 | ||
291 | function halfUp(x) { | |
292 | return Math.round(x) + 1; | |
293 | } | |
294 | function halfDown(y) { | |
295 | return Math.round(y) - 1; | |
296 | } | |
297 | var x, y; | |
4a0567da | 298 | // Step through all gridlines of the axis |
1dc23fac | 299 | for (var i = 0; i < yGridlines.length; i++) { |
4a0567da DE |
300 | y = halfDown(g.toDomYCoord(yGridlines[i], 0)); |
301 | // Step through the pixels of the line and test the pattern. | |
406b8518 | 302 | for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) { |
2cc8bf0a DE |
303 | // avoid checking the edge pixels since they differ depending on the OS. |
304 | var pixelpos = x % 10; | |
305 | if(pixelpos < 1 || pixelpos > 8) continue; | |
306 | ||
86b5007b DE |
307 | // Ignore alpha |
308 | var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0,3); | |
2cc8bf0a | 309 | var pattern = (Math.floor((x) / 10)) % 2; |
4a0567da DE |
310 | switch (pattern) { |
311 | case 0: // fill | |
89fdcedb | 312 | assert.equal("Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " |
86b5007b | 313 | + y, [ 0, 0, 255 ], drawnPixel); |
4a0567da DE |
314 | break; |
315 | case 1: // no fill | |
89fdcedb | 316 | assert.equal("Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " |
86b5007b | 317 | + y, [ 0, 0, 0 ], drawnPixel); |
4a0567da DE |
318 | break; |
319 | } | |
320 | } | |
321 | } | |
89fdcedb DV |
322 | }); |
323 | ||
324 | }); |