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
   8 import Dygraph from '../../src/dygraph';
   9 import * as utils from '../../src/dygraph-utils';
  10
  11 import Proxy from './Proxy';
  12 import CanvasAssertions from './CanvasAssertions';
  13 import Util from './Util';
  14 import PixelSampler from './PixelSampler';
  15
  16 describe("grid-per-axis", function() {
  17
  18 cleanupAfterEach();
  19 useProxyCanvas(utils, Proxy);
  20
  21 it('testIndependentGrids', function() {
  22   var opts = {
  23     width : 480,
  24     height : 320,
  25     errorBars : false,
  26     labels : [ "X", "Left", "Right" ],
  27     series : {
  28       Left : {
  29         axis : "y"
  30       },
  31       Right : {
  32         axis : "y2"
  33       }
  34     },
  35     axes : {
  36       y2 : {
  37         drawGrid : true,
  38         independentTicks : true
  39       }
  40     }
  41   };
  42
  43   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
  44       [ 5, 110, 333 ] ];
  45   var graph = document.getElementById("graph");
  46   var g = new Dygraph(graph, data, opts);
  47
  48   var htx = g.hidden_ctx_;
  49
  50   // The expected gridlines
  51   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
  52   var y2Gridlines = [ 0, 50, 100, 150, 200, 250, 300, 350 ];
  53   var gridlines = [ yGridlines, y2Gridlines ];
  54
  55   function halfUp(x) {
  56     return Math.round(x) + 0.5;
  57   }
  58   function halfDown(y) {
  59     return Math.round(y) - 0.5;
  60   }
  61
  62   var attrs = {}, x, y;
  63   x = halfUp(g.plotter_.area.x);
  64   // Step through y(0) and y2(1) axis
  65   for ( var axis = 0; axis < 2; axis++) {
  66     // Step through all gridlines of the axis
  67     for ( var i = 0; i < gridlines[axis].length; i++) {
  68       // Check the labels:
  69       var labels = Util.getYLabels(axis + 1);
  70       assert.equal(gridlines[axis][i], labels[i], "Expected label not found.");
  71
  72       // Check that the grid was drawn.
  73       y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
  74       var p1 = [ x, y ];
  75       var p2 = [ x + g.plotter_.area.w, y ];
  76       CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs);
  77     }
  78   }
  79 });
  80
  81 it('testPerAxisGridColors', function() {
  82   var opts = {
  83     width : 480,
  84     height : 320,
  85     errorBars : false,
  86     labels : [ "X", "Left", "Right" ],
  87     series : {
  88       Left : {
  89         axis : "y"
  90       },
  91       Right : {
  92         axis : "y2"
  93       }
  94     },
  95     axes : {
  96       y : {
  97         gridLineColor : "#0000ff",
  98         gridLineWidth : 2
  99       },
 100       y2 : {
 101         drawGrid : true,
 102         independentTicks : true,
 103         gridLineColor : "#ff0000",
 104         gridLineWidth : 2,
 105       }
 106     }
 107   };
 108   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 109       [ 5, 110, 333 ] ];
 110   var graph = document.getElementById("graph");
 111   var g = new Dygraph(graph, data, opts);
 112   var htx = g.hidden_ctx_;
 113
 114   // The expected gridlines
 115   var yGridlines = [ 20, 40, 60, 80, 100, 120 ];
 116   var y2Gridlines = [ 50, 100, 150, 200, 250, 300, 350 ];
 117   var gridlines = [ yGridlines, y2Gridlines ];
 118   var gridColors = [ [ 0, 0, 255, 255 ], [ 255, 0, 0, 255 ] ];
 119
 120   function halfUp(x) {
 121     return Math.round(x) + 1;
 122   }
 123   function halfDown(y) {
 124     return Math.round(y) - 1;
 125   }
 126   var x, y;
 127   x = halfUp(g.plotter_.area.x);
 128   var sampler = new PixelSampler(g);
 129   // Step through y(0) and y2(1) axis
 130   for ( var axis = 0; axis < 2; axis++) {
 131     // Step through all gridlines of the axis
 132     for ( var i = 0; i < gridlines[axis].length; i++) {
 133       y = halfDown(g.toDomYCoord(gridlines[axis][i], axis));
 134       // Check the grid colors.
 135       assert.deepEqual(gridColors[axis], sampler.colorAtPixel(x, y),
 136           "Unexpected grid color found at pixel: x: " + x + "y: " + y);
 137     }
 138   }
 139 });
 140
 141 it('testPerAxisGridWidth', function() {
 142   var opts = {
 143     width : 480,
 144     height : 320,
 145     errorBars : false,
 146     gridLineColor : "#ff0000",
 147     labels : [ "X", "Left", "Right" ],
 148     series : {
 149       Left : {
 150         axis : "y"
 151       },
 152       Right : {
 153         axis : "y2"
 154       }
 155     },
 156     axes : {
 157       x : {
 158         gridLineWidth : 4
 159       },
 160       y : {
 161         gridLineWidth : 2
 162       },
 163       y2 : {
 164         drawGrid : true,
 165         independentTicks : true,
 166         gridLineWidth : 1
 167       }
 168     }
 169   };
 170   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 171       [ 5, 110, 333 ] ];
 172   var graph = document.getElementById("graph");
 173   var g = new Dygraph(graph, data, opts);
 174   var htx = g.hidden_ctx_;
 175
 176   // The expected gridlines
 177   var yGridlines = [ 20, 40, 60, 80 ];
 178   var y2Gridlines = [ 50, 100, 150, 200, 250, 350 ];
 179   var gridlines = [ yGridlines, y2Gridlines ];
 180   var xGridlines = [ 2, 3, 4 ];
 181   var gridColor = [ 255, 0, 0 ];
 182   var emptyColor = [ 0, 0, 0 ];
 183
 184   function halfUp(x) {
 185     return Math.round(x) + 1;
 186   }
 187   function halfDown(y) {
 188     return Math.round(y) - 1;
 189   }
 190   var x, y;
 191   x = halfUp(g.plotter_.area.x + 10);
 192
 193   var sampler = new PixelSampler(g);
 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       // Ignore the alpha value
 200
 201       // FIXME(pholden): this test fails with a context pixel ratio of 2.
 202       var drawnPixeldown2 = sampler.rgbAtPixel(x, y - 2);
 203       var drawnPixeldown1 = sampler.rgbAtPixel(x, y - 1);
 204       var drawnPixel = sampler.rgbAtPixel(x, y);
 205       var drawnPixelup1 = sampler.rgbAtPixel(x, y + 1);
 206       var drawnPixelup2 = sampler.rgbAtPixel(x, y + 2);
 207       // Check the grid width.
 208       switch (axis) {
 209       case 0: // y with 2 pixels width
 210         assert.deepEqual(emptyColor, drawnPixeldown2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 211         assert.deepEqual(gridColor, drawnPixeldown1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 212         assert.deepEqual(gridColor, drawnPixel, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 213         assert.deepEqual(gridColor, drawnPixelup1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 214         assert.deepEqual(emptyColor, drawnPixelup2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y);
 215         break;
 216       case 1: // y2 with 1 pixel width
 217         assert.deepEqual(emptyColor, drawnPixeldown1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
 218         assert.deepEqual(gridColor, drawnPixel, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
 219         assert.deepEqual(emptyColor, drawnPixelup1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y);
 220         break;
 221       }
 222     }
 223   }
 224
 225   // Check the x axis grid
 226   y = halfDown(g.plotter_.area.y) + 10;
 227   for ( var i = 0; i < xGridlines.length; i++) {
 228     x = halfUp(g.toDomXCoord(xGridlines[i]));
 229     assert.deepEqual(emptyColor, sampler.rgbAtPixel(x - 4, y),
 230                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 231     assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 3, y),
 232                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 233     assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 2, y),
 234                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 235     assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 1, y),
 236                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 237     assert.deepEqual(gridColor, sampler.rgbAtPixel(x, y),
 238                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 239     assert.deepEqual(gridColor, sampler.rgbAtPixel(x + 1, y),
 240                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 241     assert.deepEqual(emptyColor, sampler.rgbAtPixel(x + 2, y),
 242                      "Unexpected x-grid color found at pixel: x: " + x + "y: " + y);
 243   }
 244 });
 245
 246 // PhantomJS 1.9.x does not support setLineDash
 247 // When Travis-CI updates to Phantom2, this can be re-enabled.
 248 // See https://github.com/ariya/phantomjs/issues/12948
 249 if (!navigator.userAgent.match(/PhantomJS\/1.9/)) {
 250 it('testGridLinePattern', function() {
 251   var opts = {
 252     width : 480,
 253     height : 320,
 254     errorBars : false,
 255     labels : [ "X", "Left", "Right" ],
 256     colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
 257     series : {
 258       Left : {
 259         axis : "y"
 260       },
 261       Right : {
 262         axis : "y2"
 263       }
 264     },
 265     axes : {
 266       x : {
 267         drawGrid: false,
 268         drawAxis: false,
 269       },
 270       y : {
 271         drawAxis : false,
 272         gridLineColor : "#0000ff",
 273         gridLinePattern : [ 10, 10 ]
 274       }
 275     }
 276   };
 277   var data = [ [ 1, 0, 0 ], [ 2, 12, 88 ], [ 3, 88, 122 ], [ 4, 63, 273 ],
 278       [ 5, 110, 333 ] ];
 279   var graph = document.getElementById("graph");
 280   var g = new Dygraph(graph, data, opts);
 281   var htx = g.hidden_ctx_;
 282
 283   // The expected gridlines
 284   var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ];
 285
 286   function halfUp(x) {
 287     return Math.round(x) + 1;
 288   }
 289   function halfDown(y) {
 290     return Math.round(y) - 1;
 291   }
 292   var x, y;
 293   var sampler = new PixelSampler(g);
 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       // XXX: check what this looks like at master
 304
 305       // Ignore alpha
 306       var drawnPixel = sampler.rgbAtPixel(x, y);
 307       var pattern = (Math.floor((x) / 10)) % 2;
 308       switch (pattern) {
 309       case 0: // fill
 310         assert.deepEqual([ 0, 0, 255 ], drawnPixel,
 311                          "Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " + y);
 312         break;
 313       case 1: // no fill
 314         assert.deepEqual([ 0, 0, 0 ], drawnPixel,
 315                          "Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " + y);
 316         break;
 317       }
 318     }
 319   }
 320 });
 321 }
 322
 323 });