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 describe("grid-per-axis", function() {
   8
   9 beforeEach(function() {
  10   document.body.innerHTML = "<div id='graph'></div>";
  11 });
  12
  13 var origFunc = Dygraph.getContext;
  14
  15 beforeEach(function() {
  16   document.body.innerHTML = "<div id='graph'></div>";
  17   Dygraph.getContext = function(canvas) {
  18     return new Proxy(origFunc(canvas));
  19   };
  20 });
  21
  22 afterEach(function() {
  23   Dygraph.getContext = origFunc;
  24 });
  25
  26 it('testIndependentGrids', function() {
  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   var 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       assert.equal(gridlines[axis][i], labels[i], "Expected label not found.");
  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
  86 it('testPerAxisGridColors', function() {
  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   var 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       assert.deepEqual(gridColors[axis], Util.samplePixel(g.hidden_, x, y),
 140           "Unexpected grid color found at pixel: x: " + x + "y: " + y);
 141     }
 142   }
 143 });
 144 it('testPerAxisGridWidth', function() {
 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   var 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   var gridColor = [ 255, 0, 0 ];
 185   var emptyColor = [ 0, 0, 0 ];
 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));
 200       // Ignore the alpha value
 201
 202       // FIXME(pholden): this test fails with a context pixel ratio of 2.
 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);
 208       // Check the grid width.
 209       switch (axis) {
 210       case 0: // y with 2 pixels width
 211         assert.deepEqual(emptyColor, drawnPixeldown2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 212         assert.deepEqual(gridColor, drawnPixeldown1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 213         assert.deepEqual(gridColor, drawnPixel, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 214         assert.deepEqual(gridColor, drawnPixelup1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 215         assert.deepEqual(emptyColor, drawnPixelup2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 216         break;
 217       case 1: // y2 with 1 pixel width
 218         assert.deepEqual(emptyColor, drawnPixeldown1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
 219         assert.deepEqual(gridColor, drawnPixel, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
 220         assert.deepEqual(emptyColor, drawnPixelup1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
 221         break;
 222       }
 223     }
 224   }
 225
 226   // Check the x axis grid
 227   y = halfDown(g.plotter_.area.y) + 10;
 228   for ( var i = 0; i < xGridlines.length; i++) {
 229     x = halfUp(g.toDomXCoord(xGridlines[i]));
 230     assert.deepEqual(emptyColor, Util.samplePixel(g.hidden_, x - 4, y).slice(0, 3),
 231                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 232     assert.deepEqual(gridColor, Util.samplePixel(g.hidden_, x - 3, y).slice(0, 3),
 233                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 234     assert.deepEqual(gridColor, Util.samplePixel(g.hidden_, x - 2, y).slice(0, 3),
 235                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 236     assert.deepEqual(gridColor, Util.samplePixel(g.hidden_, x - 1, y).slice(0, 3),
 237                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 238     assert.deepEqual(gridColor, Util.samplePixel(g.hidden_, x, y).slice(0, 3),
 239                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 240     assert.deepEqual(gridColor, Util.samplePixel(g.hidden_, x + 1, y).slice(0, 3),
 241                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 242     assert.deepEqual(emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3),
 243                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 244   }
 245 });
 246
 247 it('testGridLinePattern', function() {
 248   var opts = {
 249     width : 120,
 250     height : 320,
 251     errorBars : false,
 252     labels : [ "X", "Left", "Right" ],
 253     colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
 254     series : {
 255       Left : {
 256         axis : "y"
 257       },
 258       Right : {
 259         axis : "y2"
 260       }
 261     },
 262     axes : {
 263       x : {
 264         drawGrid: false,
 265         drawAxis: false,
 266       },
 267       y : {
 268         drawAxis : false,
 269         gridLineColor : "#0000ff",
 270         gridLinePattern : [ 10, 10 ]
 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   var 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   // Step through all gridlines of the axis
 291   for (var i = 0; i < yGridlines.length; i++) {
 292     y = halfDown(g.toDomYCoord(yGridlines[i], 0));
 293     // Step through the pixels of the line and test the pattern.
 294     for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) {
 295       // avoid checking the edge pixels since they differ depending on the OS.
 296       var pixelpos = x % 10;
 297       if(pixelpos < 1 || pixelpos > 8) continue;
 298
 299       // Ignore alpha
 300       var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0,3);
 301       var pattern = (Math.floor((x) / 10)) % 2;
 302       switch (pattern) {
 303       case 0: // fill
 304         assert.deepEqual([ 0, 0, 255 ], drawnPixel,
 305                          "Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " + y);
 306         break;
 307       case 1: // no fill
 308         assert.deepEqual([ 0, 0, 0 ], drawnPixel,
 309                          "Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " + y);
 310         break;
 311       }
 312     }
 313   }
 314 });
 315
 316 });