Merge branch 'PR723'
[dygraphs.git] / auto_tests / tests / grid_per_axis.js
1 /**
2 * @fileoverview Test cases for the per-axis grid options, including the new
3 * option "gridLinePattern".
4 *
5 * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG)
6 */
7
8 import Dygraph from '../../src/dygraph';
9 import * as utils from '../../src/dygraph-utils';
10
11 import Proxy from './Proxy';
12 import CanvasAssertions from './CanvasAssertions';
13 import Util from './Util';
14 import PixelSampler from './PixelSampler';
15
16 describe("grid-per-axis", function() {
17
18 cleanupAfterEach();
19 useProxyCanvas(utils, Proxy);
20
21 it('testIndependentGrids', function() {
22 var opts = {
23 width : 480,
24 height : 320,
25 errorBars : false,
26 labels : [ "X", "Left", "Right" ],
27 series : {
28 Left : {
29 axis : "y"
30 },
31 Right : {
32 axis : "y2"
33 }
34 },
35 axes : {
36 y2 : {
37 drawGrid : true,
38 independentTicks : true
39 }
40 }
41 };
42
43 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
44 [ 5, 110, 333 ] ];
45 var graph = document.getElementById("graph");
46 var g = new Dygraph(graph, data, opts);
47
48 var htx = g.hidden_ctx_;
49
50 // The expected gridlines
51 var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
52 var y2Gridlines = [ 0, 50, 100, 150, 200, 250, 300, 350 ];
53 var gridlines = [ yGridlines, y2Gridlines ];
54
55 function halfUp(x) {
56 return Math.round(x) + 0.5;
57 }
58 function halfDown(y) {
59 return Math.round(y) - 0.5;
60 }
61
62 var attrs = {}, x, y;
63 x = halfUp(g.plotter_.area.x);
64 // Step through y(0) and y2(1) axis
65 for ( var axis = 0; axis < 2; axis++) {
66 // Step through all gridlines of the axis
67 for ( var i = 0; i < gridlines[axis].length; i++) {
68 // Check the labels:
69 var labels = Util.getYLabels(axis + 1);
70 assert.equal(gridlines[axis][i], labels[i], "Expected label not found.");
71
72 // Check that the grid was drawn.
73 y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
74 var p1 = [ x, y ];
75 var p2 = [ x + g.plotter_.area.w, y ];
76 CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs);
77 }
78 }
79 });
80
81 it('testPerAxisGridColors', function() {
82 var opts = {
83 width : 480,
84 height : 320,
85 errorBars : false,
86 labels : [ "X", "Left", "Right" ],
87 series : {
88 Left : {
89 axis : "y"
90 },
91 Right : {
92 axis : "y2"
93 }
94 },
95 axes : {
96 y : {
97 gridLineColor : "#0000ff",
98 gridLineWidth : 2
99 },
100 y2 : {
101 drawGrid : true,
102 independentTicks : true,
103 gridLineColor : "#ff0000",
104 gridLineWidth : 2,
105 }
106 }
107 };
108 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
109 [ 5, 110, 333 ] ];
110 var graph = document.getElementById("graph");
111 var g = new Dygraph(graph, data, opts);
112 var htx = g.hidden_ctx_;
113
114 // The expected gridlines
115 var yGridlines = [ 20, 40, 60, 80, 100, 120 ];
116 var y2Gridlines = [ 50, 100, 150, 200, 250, 300, 350 ];
117 var gridlines = [ yGridlines, y2Gridlines ];
118 var gridColors = [ [ 0, 0, 255, 255 ], [ 255, 0, 0, 255 ] ];
119
120 function halfUp(x) {
121 return Math.round(x) + 1;
122 }
123 function halfDown(y) {
124 return Math.round(y) - 1;
125 }
126 var x, y;
127 x = halfUp(g.plotter_.area.x);
128 var sampler = new PixelSampler(g);
129 // Step through y(0) and y2(1) axis
130 for ( var axis = 0; axis < 2; axis++) {
131 // Step through all gridlines of the axis
132 for ( var i = 0; i < gridlines[axis].length; i++) {
133 y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
134 // Check the grid colors.
135 assert.deepEqual(gridColors[axis], sampler.colorAtPixel(x, y),
136 "Unexpected grid color found at pixel: x: " + x + "y: " + y);
137 }
138 }
139 });
140
141 it('testPerAxisGridWidth', function() {
142 var opts = {
143 width : 480,
144 height : 320,
145 errorBars : false,
146 gridLineColor : "#ff0000",
147 labels : [ "X", "Left", "Right" ],
148 series : {
149 Left : {
150 axis : "y"
151 },
152 Right : {
153 axis : "y2"
154 }
155 },
156 axes : {
157 x : {
158 gridLineWidth : 4
159 },
160 y : {
161 gridLineWidth : 2
162 },
163 y2 : {
164 drawGrid : true,
165 independentTicks : true,
166 gridLineWidth : 1
167 }
168 }
169 };
170 var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
171 [ 5, 110, 333 ] ];
172 var graph = document.getElementById("graph");
173 var g = new Dygraph(graph, data, opts);
174 var htx = g.hidden_ctx_;
175
176 // The expected gridlines
177 var yGridlines = [ 20, 40, 60, 80 ];
178 var y2Gridlines = [ 50, 100, 150, 200, 250, 350 ];
179 var gridlines = [ yGridlines, y2Gridlines ];
180 var xGridlines = [ 2, 3, 4 ];
181 var gridColor = [ 255, 0, 0 ];
182 var emptyColor = [ 0, 0, 0 ];
183
184 function halfUp(x) {
185 return Math.round(x) + 1;
186 }
187 function halfDown(y) {
188 return Math.round(y) - 1;
189 }
190 var x, y;
191 x = halfUp(g.plotter_.area.x + 10);
192
193 var sampler = new PixelSampler(g);
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 // Ignore the alpha value
200
201 // FIXME(pholden): this test fails with a context pixel ratio of 2.
202 var drawnPixeldown2 = sampler.rgbAtPixel(x, y - 2);
203 var drawnPixeldown1 = sampler.rgbAtPixel(x, y - 1);
204 var drawnPixel = sampler.rgbAtPixel(x, y);
205 var drawnPixelup1 = sampler.rgbAtPixel(x, y + 1);
206 var drawnPixelup2 = sampler.rgbAtPixel(x, y + 2);
207 // Check the grid width.
208 switch (axis) {
209 case 0: // y with 2 pixels width
210 assert.deepEqual(emptyColor, drawnPixeldown2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
211 assert.deepEqual(gridColor, drawnPixeldown1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
212 assert.deepEqual(gridColor, drawnPixel, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
213 assert.deepEqual(gridColor, drawnPixelup1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
214 assert.deepEqual(emptyColor, drawnPixelup2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
215 break;
216 case 1: // y2 with 1 pixel width
217 assert.deepEqual(emptyColor, drawnPixeldown1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
218 assert.deepEqual(gridColor, drawnPixel, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
219 assert.deepEqual(emptyColor, drawnPixelup1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
220 break;
221 }
222 }
223 }
224
225 // Check the x axis grid
226 y = halfDown(g.plotter_.area.y) + 10;
227 for ( var i = 0; i < xGridlines.length; i++) {
228 x = halfUp(g.toDomXCoord(xGridlines[i]));
229 assert.deepEqual(emptyColor, sampler.rgbAtPixel(x - 4, y),
230 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
231 assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 3, y),
232 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
233 assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 2, y),
234 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
235 assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 1, y),
236 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
237 assert.deepEqual(gridColor, sampler.rgbAtPixel(x, y),
238 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
239 assert.deepEqual(gridColor, sampler.rgbAtPixel(x + 1, y),
240 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
241 assert.deepEqual(emptyColor, sampler.rgbAtPixel(x + 2, y),
242 "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
243 }
244 });
245
246 // PhantomJS 1.9.x does not support setLineDash
247 // When Travis-CI updates to Phantom2, this can be re-enabled.
248 // See https://github.com/ariya/phantomjs/issues/12948
249 if (!navigator.userAgent.match(/PhantomJS\/1.9/)) {
250 it('testGridLinePattern', function() {
251 var opts = {
252 width : 480,
253 height : 320,
254 errorBars : false,
255 labels : [ "X", "Left", "Right" ],
256 colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
257 series : {
258 Left : {
259 axis : "y"
260 },
261 Right : {
262 axis : "y2"
263 }
264 },
265 axes : {
266 x : {
267 drawGrid: false,
268 drawAxis: false,
269 },
270 y : {
271 drawAxis : false,
272 gridLineColor : "#0000ff",
273 gridLinePattern : [ 10, 10 ]
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 var 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;
293 var sampler = new PixelSampler(g);
294 // Step through all gridlines of the axis
295 for (var i = 0; i < yGridlines.length; i++) {
296 y = halfDown(g.toDomYCoord(yGridlines[i], 0));
297 // Step through the pixels of the line and test the pattern.
298 for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) {
299 // avoid checking the edge pixels since they differ depending on the OS.
300 var pixelpos = x % 10;
301 if(pixelpos < 1 || pixelpos > 8) continue;
302
303 // XXX: check what this looks like at master
304
305 // Ignore alpha
306 var drawnPixel = sampler.rgbAtPixel(x, y);
307 var pattern = (Math.floor((x) / 10)) % 2;
308 switch (pattern) {
309 case 0: // fill
310 assert.deepEqual([ 0, 0, 255 ], drawnPixel,
311 "Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " + y);
312 break;
313 case 1: // no fill
314 assert.deepEqual([ 0, 0, 0 ], drawnPixel,
315 "Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " + y);
316 break;
317 }
318 }
319 }
320 });
321 }
322
323 });