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     labels : [ "X", "Left", "Right" ],
 261     colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
 262     series : {
 263       Left : {
 264         axis : "y"
 265       },
 266       Right : {
 267         axis : "y2"
 268       }
 269     },
 270     axes : {
 271       x : {
 272         drawGrid: false,
 273         drawAxis: false,
 274       },
 275       y : {
 276         drawAxis : false,
 277         gridLineColor : "#0000ff",
 278         gridLinePattern : [ 10, 10 ]
 279       }
 280     }
 281   };
 282   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 283       [ 5, 110, 333 ] ];
 284   var graph = document.getElementById("graph");
 285   var g = new Dygraph(graph, data, opts);
 286   htx = g.hidden_ctx_;
 287
 288   // The expected gridlines
 289   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
 290
 291   function halfUp(x) {
 292     return Math.round(x) + 1;
 293   }
 294   function halfDown(y) {
 295     return Math.round(y) - 1;
 296   }
 297   var x, y;
 298   // Step through all gridlines of the axis
 299   for (var i = 0; i < yGridlines.length; i++) {
 300     y = halfDown(g.toDomYCoord(yGridlines[i], 0));
 301     // Step through the pixels of the line and test the pattern.
 302     for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) {
 303       // avoid checking the edge pixels since they differ depending on the OS.
 304       var pixelpos = x % 10;
 305       if(pixelpos < 1 || pixelpos > 8) continue;
 306
 307       // Ignore alpha
 308       var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0,3);
 309       var pattern = (Math.floor((x) / 10)) % 2;
 310       switch (pattern) {
 311       case 0: // fill
 312         assertEquals("Unexpected filled grid-pattern color found at pixel: x: " + x + " y: "
 313             + y, [ 0, 0, 255 ], drawnPixel);
 314         break;
 315       case 1: // no fill
 316         assertEquals("Unexpected empty grid-pattern color found at pixel: x: " + x + " y: "
 317             + y, [ 0, 0, 0 ], drawnPixel);
 318         break;
 319       }
 320     }
 321   }
 322 };