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 var GridPerAxisTestCase = TestCase("grid-per-axis");
   8
   9 GridPerAxisTestCase.prototype.setUp = function() {
  10   document.body.innerHTML = "<div id='graph'></div>";
  11 };
  12
  13 GridPerAxisTestCase.origFunc = Dygraph.getContext;
  14
  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));
  19   };
  20 };
  21
  22 GridPerAxisTestCase.prototype.tearDown = function() {
  23   Dygraph.getContext = GridPerAxisTestCase.origFunc;
  24 };
  25
  26 GridPerAxisTestCase.prototype.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   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       assertEquals("Expected label not found.", gridlines[axis][i], labels[i]);
  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 GridPerAxisTestCase.prototype.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   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       assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y,
 140           gridColors[axis], Util.samplePixel(g.hidden_, x, y));
 141     }
 142   }
 143 };
 144 GridPerAxisTestCase.prototype.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   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       var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2).slice(0, 3);
 202       var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1).slice(0, 3);
 203       var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0, 3);
 204       var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1).slice(0, 3);
 205       var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2).slice(0, 3);
 206       // Check the grid width.
 207       switch (axis) {
 208       case 0: // y with 2 pixels width
 209         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 210             + y, emptyColor, drawnPixeldown2);
 211         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 212             + y, gridColor, drawnPixeldown1);
 213         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 214             + y, gridColor, drawnPixel);
 215         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 216             + y, gridColor, drawnPixelup1);
 217         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 218             + y, emptyColor, drawnPixelup2);
 219         break;
 220       case 1: // y2 with 1 pixel width
 221         assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
 222             + y, emptyColor, drawnPixeldown1);
 223         assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
 224             + y, gridColor, drawnPixel);
 225         assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
 226             + y, emptyColor, drawnPixelup1);
 227         break;
 228       }
 229     }
 230   }
 231
 232   // Check the x axis grid
 233   y = halfDown(g.plotter_.area.y) + 10;
 234   for ( var i = 0; i < xGridlines.length; i++) {
 235     x = halfUp(g.toDomXCoord(xGridlines[i]));
 236     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 237         emptyColor, Util.samplePixel(g.hidden_, x - 4, y).slice(0, 3));
 238     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 239         gridColor, Util.samplePixel(g.hidden_, x - 3, y).slice(0, 3));
 240     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 241         gridColor, Util.samplePixel(g.hidden_, x - 2, y).slice(0, 3));
 242     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 243         gridColor, Util.samplePixel(g.hidden_, x - 1, y).slice(0, 3));
 244     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 245         gridColor, Util.samplePixel(g.hidden_, x, y).slice(0, 3));
 246     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 247         gridColor, Util.samplePixel(g.hidden_, x + 1, y).slice(0, 3));
 248     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 249         emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3));
 250   }
 251 };
 252
 253 GridPerAxisTestCase.prototype.testGridLinePattern = function() {
 254   var opts = {
 255     width : 120,
 256     height : 320,
 257     errorBars : false,
 258     drawXGrid : false,
 259     drawXAxis : false,
 260     drawYAxis : false,
 261     labels : [ "X", "Left", "Right" ],
 262     colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
 263     series : {
 264       Left : {
 265         axis : "y"
 266       },
 267       Right : {
 268         axis : "y2"
 269       }
 270     },
 271     axes : {
 272       y : {
 273         gridLineColor : "#0000ff",
 274         gridLinePattern : [ 10, 10 ]
 275       }
 276     }
 277   };
 278   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 279       [ 5, 110, 333 ] ];
 280   var graph = document.getElementById("graph");
 281   var g = new Dygraph(graph, data, opts);
 282   htx = g.hidden_ctx_;
 283
 284   // The expected gridlines
 285   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
 286
 287   function halfUp(x) {
 288     return Math.round(x) + 1;
 289   }
 290   function halfDown(y) {
 291     return Math.round(y) - 1;
 292   }
 293   var x, y;
 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       // Ignore alpha
 304       var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0,3);
 305       var pattern = (Math.floor((x) / 10)) % 2;
 306       switch (pattern) {
 307       case 0: // fill
 308         assertEquals("Unexpected filled grid-pattern color found at pixel: x: " + x + " y: "
 309             + y, [ 0, 0, 255 ], drawnPixel);
 310         break;
 311       case 1: // no fill
 312         assertEquals("Unexpected empty grid-pattern color found at pixel: x: " + x + " y: "
 313             + y, [ 0, 0, 0 ], drawnPixel);
 314         break;
 315       }
 316     }
 317   }
 318 };