auto_tests/tests/grid_per_axis.js

   1 /**
   2  * @fileoverview Test cases for the option "stepPlot" especially for the
   3  *               scenario where the option is not set for the whole graph but
   4  *               for single series.
   5  *
   6  * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG)
   7  */
   8 var StepTestCase = TestCase("grid_per_axis");
   9
  10 StepTestCase.prototype.setUp = function() {
  11   document.body.innerHTML = "<div id='graph'></div>";
  12 };
  13
  14 StepTestCase.origFunc = Dygraph.getContext;
  15
  16 StepTestCase.prototype.setUp = function() {
  17   document.body.innerHTML = "<div id='graph'></div>";
  18   Dygraph.getContext = function(canvas) {
  19     return new Proxy(StepTestCase.origFunc(canvas));
  20   };
  21 };
  22
  23 StepTestCase.prototype.tearDown = function() {
  24   Dygraph.getContext = StepTestCase.origFunc;
  25 };
  26
  27 StepTestCase.prototype.testIndependantGrids = function() {
  28   var opts = {
  29     width : 480,
  30     height : 320,
  31     errorBars : false,
  32     labels : [ "X", "Left", "Right" ],
  33     series : {
  34       Left : {
  35         axis : "y"
  36       },
  37       Right : {
  38         axis : "y2"
  39       }
  40     },
  41     axes : {
  42       y2 : {
  43         drawGrid : true,
  44         independentTicks : true
  45       }
  46     }
  47   };
  48
  49   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
  50       [ 5, 110, 333 ] ];
  51   var graph = document.getElementById("graph");
  52   var g = new Dygraph(graph, data, opts);
  53
  54   htx = g.hidden_ctx_;
  55
  56   // The expected gridlines
  57   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
  58   var y2Gridlines = [ 0, 50, 100, 150, 200, 250, 300, 350 ];
  59   var gridlines = [ yGridlines, y2Gridlines ];
  60
  61   function halfUp(x) {
  62     return Math.round(x) + 0.5;
  63   }
  64   function halfDown(y) {
  65     return Math.round(y) - 0.5;
  66   }
  67
  68   var attrs = {}, x, y;
  69   x = halfUp(g.plotter_.area.x);
  70   // Step through y(0) and y2(1) axis
  71   for ( var axis = 0; axis < 2; axis++) {
  72     // Step through all gridlines of the axis
  73     for ( var i = 0; i < gridlines[axis].length; i++) {
  74       // Check the labels:
  75       var labels = Util.getYLabels(axis + 1);
  76       assertEquals("Expected label not found.", gridlines[axis][i], labels[i]);
  77
  78       // Check that the grid was drawn.
  79       y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
  80       var p1 = [ x, y ];
  81       var p2 = [ x + g.plotter_.area.w, y ];
  82       CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs);
  83     }
  84   }
  85 };
  86
  87 StepTestCase.prototype.testPerAxisGridColors = function() {
  88   var opts = {
  89     width : 480,
  90     height : 320,
  91     errorBars : false,
  92     labels : [ "X", "Left", "Right" ],
  93     series : {
  94       Left : {
  95         axis : "y"
  96       },
  97       Right : {
  98         axis : "y2"
  99       }
 100     },
 101     axes : {
 102       y : {
 103         gridLineColor : "#0000ff",
 104         gridLineWidth : 2
 105       },
 106       y2 : {
 107         drawGrid : true,
 108         independentTicks : true,
 109         gridLineColor : "#ff0000",
 110         gridLineWidth : 2,
 111       }
 112     }
 113   };
 114   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 115       [ 5, 110, 333 ] ];
 116   var graph = document.getElementById("graph");
 117   var g = new Dygraph(graph, data, opts);
 118   htx = g.hidden_ctx_;
 119
 120   // The expected gridlines
 121   var yGridlines = [ 20, 40, 60, 80, 100, 120 ];
 122   var y2Gridlines = [ 50, 100, 150, 200, 250, 300, 350 ];
 123   var gridlines = [ yGridlines, y2Gridlines ];
 124   var gridColors = [ [ 0, 0, 255, 255 ], [ 255, 0, 0, 255 ] ];
 125
 126   function halfUp(x) {
 127     return Math.round(x) + 1;
 128   }
 129   function halfDown(y) {
 130     return Math.round(y) - 1;
 131   }
 132   var x, y;
 133   x = halfUp(g.plotter_.area.x);
 134   // Step through y(0) and y2(1) axis
 135   for ( var axis = 0; axis < 2; axis++) {
 136     // Step through all gridlines of the axis
 137     for ( var i = 0; i < gridlines[axis].length; i++) {
 138       y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
 139       // Check the grid colors.
 140       assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y,
 141           gridColors[axis], Util.samplePixel(g.hidden_, x, y));
 142     }
 143   }
 144 };
 145 StepTestCase.prototype.testPerAxisGridWidth = function() {
 146   var opts = {
 147     width : 480,
 148     height : 320,
 149     errorBars : false,
 150     gridLineColor : "#ff0000",
 151     labels : [ "X", "Left", "Right" ],
 152     series : {
 153       Left : {
 154         axis : "y"
 155       },
 156       Right : {
 157         axis : "y2"
 158       }
 159     },
 160     axes : {
 161       x : {
 162         gridLineWidth : 4
 163       },
 164       y : {
 165         gridLineWidth : 2
 166       },
 167       y2 : {
 168         drawGrid : true,
 169         independentTicks : true,
 170         gridLineWidth : 1
 171       }
 172     }
 173   };
 174   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 175       [ 5, 110, 333 ] ];
 176   var graph = document.getElementById("graph");
 177   var g = new Dygraph(graph, data, opts);
 178   htx = g.hidden_ctx_;
 179
 180   // The expected gridlines
 181   var yGridlines = [ 20, 40, 60, 80 ];
 182   var y2Gridlines = [ 50, 100, 150, 200, 250, 350 ];
 183   var gridlines = [ yGridlines, y2Gridlines ];
 184   var xGridlines = [ 2, 3, 4 ];
 185
 186   function halfUp(x) {
 187     return Math.round(x) + 1;
 188   }
 189   function halfDown(y) {
 190     return Math.round(y) - 1;
 191   }
 192   var x, y;
 193   x = halfUp(g.plotter_.area.x + 10);
 194   // Step through y(0) and y2(1) axis
 195   for ( var axis = 0; axis < 2; axis++) {
 196     // Step through all gridlines of the axis
 197     for ( var i = 0; i < gridlines[axis].length; i++) {
 198       y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
 199       var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2);
 200       var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1);
 201       var drawnPixel = Util.samplePixel(g.hidden_, x, y);
 202       var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1);
 203       var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2);
 204       // Check the grid width.
 205       switch (axis) {
 206       case 0: // y with 2 pixels width
 207         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 208             + y, [ 0, 0, 0, 0 ], drawnPixeldown2);
 209         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 210             + y, [ 255, 0, 0, 127 ], drawnPixeldown1);
 211         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 212             + y, [ 255, 0, 0, 255 ], drawnPixel);
 213         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 214             + y, [ 255, 0, 0, 128 ], drawnPixelup1);
 215         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 216             + y, [ 0, 0, 0, 0 ], drawnPixelup2);
 217         break;
 218       case 1: // y2 with 1 pixel width
 219         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 220             + y, [ 0, 0, 0, 0 ], drawnPixeldown1);
 221         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 222             + y, [ 255, 0, 0, 255 ], drawnPixel);
 223         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 224             + y, [ 0, 0, 0, 0 ], drawnPixelup1);
 225         break;
 226       }
 227     }
 228   }
 229
 230   // Check the x axis grid
 231   y = halfDown(g.plotter_.area.y) + 10;
 232   for ( var i = 0; i < xGridlines.length; i++) {
 233     x = halfUp(g.toDomXCoord(xGridlines[i]));
 234     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 235         0, 0, 0, 0 ], Util.samplePixel(g.hidden_, x - 4, y));
 236     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 237         255, 0, 0, 128 ], Util.samplePixel(g.hidden_, x - 3, y));
 238     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 239         255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x - 2, y));
 240     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 241         255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x - 1, y));
 242     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 243         255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x, y));
 244     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 245         255, 0, 0, 128 ], Util.samplePixel(g.hidden_, x + 1, y));
 246     assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [
 247         0, 0, 0, 0 ], Util.samplePixel(g.hidden_, x + 2, y));
 248   }
 249 };
 250 StepTestCase.prototype.testGridLinePattern = function() {
 251   var opts = {
 252     width : 480,
 253     height : 320,
 254     errorBars : false,
 255     drawXGrid : false,
 256     drawXAxis : false,
 257     drawYAxis : false,
 258     labels : [ "X", "Left", "Right" ],
 259     colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
 260     series : {
 261       Left : {
 262         axis : "y"
 263       },
 264       Right : {
 265         axis : "y2"
 266       }
 267     },
 268     axes : {
 269       y : {
 270         gridLineColor : "#0000ff",
 271         gridLinePattern : [ 4, 4 ]
 272       }
 273     }
 274   };
 275   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 276       [ 5, 110, 333 ] ];
 277   var graph = document.getElementById("graph");
 278   var g = new Dygraph(graph, data, opts);
 279   htx = g.hidden_ctx_;
 280
 281   // The expected gridlines
 282   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
 283
 284   function halfUp(x) {
 285     return Math.round(x) + 1;
 286   }
 287   function halfDown(y) {
 288     return Math.round(y) - 1;
 289   }
 290   var x, y;
 291   x = halfUp(g.plotter_.area.x);
 292   // Step through all gridlines of the axis
 293   for ( var i = 0; i < yGridlines.length; i++) {
 294     y = halfDown(g.toDomYCoord(yGridlines[i], 0));
 295     // Step through the pixels of the line and test the pattern.
 296     for (x; x < g.plotter_.area.w; x++) {
 297       var drawnPixel = Util.samplePixel(g.hidden_, x, y);
 298       var pattern = (Math.floor((x) / 4)) % 2;
 299       switch (pattern) {
 300       case 0: // fill
 301         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 302             + y, [ 0, 0, 255, 77 ], drawnPixel);
 303         break;
 304       case 1: // no fill
 305         assertEquals("Unexpected grid color found at pixel: x: " + x + "y: "
 306             + y, [ 0, 0, 0, 0 ], drawnPixel);
 307         break;
 308       }
 309     }
 310   }
 311 };