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
 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         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 212             + y, emptyColor, drawnPixeldown2);
 213         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 214             + y, gridColor, drawnPixeldown1);
 215         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 216             + y, gridColor, drawnPixel);
 217         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 218             + y, gridColor, drawnPixelup1);
 219         assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: "
 220             + y, emptyColor, drawnPixelup2);
 221         break;
 222       case 1: // y2 with 1 pixel width
 223         assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
 224             + y, emptyColor, drawnPixeldown1);
 225         assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
 226             + y, gridColor, drawnPixel);
 227         assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: "
 228             + y, emptyColor, drawnPixelup1);
 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]));
 238     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 239         emptyColor, Util.samplePixel(g.hidden_, x - 4, y).slice(0, 3));
 240     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 241         gridColor, Util.samplePixel(g.hidden_, x - 3, y).slice(0, 3));
 242     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 243         gridColor, Util.samplePixel(g.hidden_, x - 2, y).slice(0, 3));
 244     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 245         gridColor, Util.samplePixel(g.hidden_, x - 1, y).slice(0, 3));
 246     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 247         gridColor, Util.samplePixel(g.hidden_, x, y).slice(0, 3));
 248     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 249         gridColor, Util.samplePixel(g.hidden_, x + 1, y).slice(0, 3));
 250     assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y,
 251         emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3));
 252   }
 253 };
 254
 255 GridPerAxisTestCase.prototype.testGridLinePattern = function() {
 256   var opts = {
 257     width : 120,
 258     height : 320,
 259     errorBars : false,
 260     drawXGrid : false,
 261     drawXAxis : false,
 262     drawYAxis : false,
 263     labels : [ "X", "Left", "Right" ],
 264     colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
 265     series : {
 266       Left : {
 267         axis : "y"
 268       },
 269       Right : {
 270         axis : "y2"
 271       }
 272     },
 273     axes : {
 274       y : {
 275         gridLineColor : "#0000ff",
 276         gridLinePattern : [ 10, 10 ]
 277       }
 278     }
 279   };
 280   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 281       [ 5, 110, 333 ] ];
 282   var graph = document.getElementById("graph");
 283   var g = new Dygraph(graph, data, opts);
 284   htx = g.hidden_ctx_;
 285
 286   // The expected gridlines
 287   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
 288
 289   function halfUp(x) {
 290     return Math.round(x) + 1;
 291   }
 292   function halfDown(y) {
 293     return Math.round(y) - 1;
 294   }
 295   var x, y;
 296   // Step through all gridlines of the axis
 297   for (var i = 0; i < yGridlines.length; i++) {
 298     y = halfDown(g.toDomYCoord(yGridlines[i], 0));
 299     // Step through the pixels of the line and test the pattern.
 300     for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) {
 301       // avoid checking the edge pixels since they differ depending on the OS.
 302       var pixelpos = x % 10;
 303       if(pixelpos < 1 || pixelpos > 8) continue;
 304
 305       // Ignore alpha
 306       var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0,3);
 307       var pattern = (Math.floor((x) / 10)) % 2;
 308       switch (pattern) {
 309       case 0: // fill
 310         assertEquals("Unexpected filled grid-pattern color found at pixel: x: " + x + " y: "
 311             + y, [ 0, 0, 255 ], drawnPixel);
 312         break;
 313       case 1: // no fill
 314         assertEquals("Unexpected empty grid-pattern color found at pixel: x: " + x + " y: "
 315             + y, [ 0, 0, 0 ], drawnPixel);
 316         break;
 317       }
 318     }
 319   }
 320 };