2 * @fileoverview Test cases for the per-axis grid options, including the new
3 * option "gridLinePattern".
5 * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG)
7 var GridPerAxisTestCase
= TestCase("grid-per-axis");
9 GridPerAxisTestCase
.prototype.setUp
= function() {
10 document
.body
.innerHTML
= "<div id='graph'></div>";
13 GridPerAxisTestCase
.origFunc
= Dygraph
.getContext
;
15 GridPerAxisTestCase
.prototype.setUp
= function() {
16 document
.body
.innerHTML
= "<div id='graph'></div>";
17 Dygraph
.getContext
= function(canvas
) {
18 return new Proxy(GridPerAxisTestCase
.origFunc(canvas
));
22 GridPerAxisTestCase
.prototype.tearDown
= function() {
23 Dygraph
.getContext
= GridPerAxisTestCase
.origFunc
;
26 GridPerAxisTestCase
.prototype.testIndependentGrids
= function() {
31 labels
: [ "X", "Left", "Right" ],
43 independentTicks
: true
48 var data
= [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
50 var graph
= document
.getElementById("graph");
51 var g
= new Dygraph(graph
, data
, opts
);
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
];
61 return Math
.round(x
) + 0.5;
63 function halfDown(y
) {
64 return Math
.round(y
) - 0.5;
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
++) {
74 var labels
= Util
.getYLabels(axis
+ 1);
75 assertEquals("Expected label not found.", gridlines
[axis
][i
], labels
[i
]);
77 // Check that the grid was drawn.
78 y
= halfDown(g
.toDomYCoord(gridlines
[axis
][i
], axis
));
80 var p2
= [ x
+ g
.plotter_
.area
.w
, y
];
81 CanvasAssertions
.assertLineDrawn(htx
, p1
, p2
, attrs
);
86 GridPerAxisTestCase
.prototype.testPerAxisGridColors
= function() {
91 labels
: [ "X", "Left", "Right" ],
102 gridLineColor
: "#0000ff",
107 independentTicks
: true,
108 gridLineColor
: "#ff0000",
113 var data
= [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
115 var graph
= document
.getElementById("graph");
116 var g
= new Dygraph(graph
, data
, opts
);
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 ] ];
126 return Math
.round(x
) + 1;
128 function halfDown(y
) {
129 return Math
.round(y
) - 1;
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
));
144 GridPerAxisTestCase
.prototype.testPerAxisGridWidth
= function() {
149 gridLineColor
: "#ff0000",
150 labels
: [ "X", "Left", "Right" ],
168 independentTicks
: true,
173 var data
= [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
175 var graph
= document
.getElementById("graph");
176 var g
= new Dygraph(graph
, data
, opts
);
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 ];
186 return Math
.round(x
) + 1;
188 function halfDown(y
) {
189 return Math
.round(y
) - 1;
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.
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
);
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
);
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
));
249 GridPerAxisTestCase
.prototype.testGridLinePattern
= function() {
257 labels
: [ "X", "Left", "Right" ],
258 colors
: [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
269 gridLineColor
: "#0000ff",
270 gridLinePattern
: [ 4, 4 ]
274 var data
= [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
276 var graph
= document
.getElementById("graph");
277 var g
= new Dygraph(graph
, data
, opts
);
280 // The expected gridlines
281 var yGridlines
= [ 0, 20, 40, 60, 80, 100, 120 ];
284 return Math
.round(x
) + 1;
286 function halfDown(y
) {
287 return Math
.round(y
) - 1;
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;
300 assertEquals("Unexpected grid color found at pixel: x: " + x
+ "y: "
301 + y
, [ 0, 0, 255, 77 ], drawnPixel
);
304 assertEquals("Unexpected grid color found at pixel: x: " + x
+ "y: "
305 + y
, [ 0, 0, 0, 0 ], drawnPixel
);