auto_tests/tests/to_dom_coords.js

   1 /**
   2  * @fileoverview Test cases for toDomCoords/toDataCoords
   3  *
   4  * @author danvk@google.com (Dan Vanderkam)
   5  */
   6
   7 describe("to-dom-coords", function() {
   8
   9 var origFunc = Dygraph.getContext;
  10 beforeEach(function() {
  11   document.body.innerHTML = "<div id='graph'></div>";
  12   Dygraph.getContext = function(canvas) {
  13     return new Proxy(origFunc(canvas));
  14   }
  15 });
  16
  17 afterEach(function() {
  18   Dygraph.getContext = origFunc;
  19 });
  20
  21 // Checks that toDomCoords and toDataCoords are inverses of one another.
  22 var checkForInverses = function(g) {
  23   var x_range = g.xAxisRange();
  24   var y_range = g.yAxisRange();
  25   for (var i = 0; i <= 10; i++) {
  26     var x = x_range[0] + i / 10.0 * (x_range[1] - x_range[0]);
  27     for (var j = 0; j <= 10; j++) {
  28       var y = y_range[0] + j / 10.0 * (y_range[1] - y_range[0]);
  29       assert.equal(x, g.toDataXCoord(g.toDomXCoord(x)));
  30       assert.equal(y, g.toDataYCoord(g.toDomYCoord(y)));
  31     }
  32   }
  33 };
  34
  35 it('testPlainChart', function() {
  36   var opts = {
  37     axes: {
  38       x: {
  39         drawAxis : false,
  40         drawGrid : false
  41       },
  42       y: {
  43         drawAxis : false,
  44         drawGrid : false
  45       }
  46     },
  47     rightGap: 0,
  48     valueRange: [0, 100],
  49     dateWindow: [0, 100],
  50     width: 400,
  51     height: 400,
  52     colors: ['#ff0000'],
  53     labels: ['X', 'Y']
  54   }
  55
  56   var graph = document.getElementById("graph");
  57   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  58
  59   assert.deepEqual([0, 100], g.toDataCoords(0, 0));
  60   assert.deepEqual([0, 0], g.toDataCoords(0, 400));
  61   assert.deepEqual([100, 100], g.toDataCoords(400, 0));
  62   assert.deepEqual([100, 0], g.toDataCoords(400, 400));
  63
  64   checkForInverses(g);
  65
  66   // TODO(konigsberg): This doesn't really belong here. Move to its own test.
  67   var htx = g.hidden_ctx_;
  68   assert.equal(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  69 });
  70
  71 it('testChartWithAxes', function() {
  72   var opts = {
  73     axes: {
  74       x: {
  75         drawGrid: false,
  76         drawAxis: true,
  77       },
  78       y: {
  79         drawGrid: false,
  80         drawAxis: true,
  81         axisLabelWidth: 100
  82       }
  83     },
  84     xAxisHeight: 50,
  85     axisTickSize: 0,
  86     rightGap: 0,
  87     valueRange: [0, 100],
  88     dateWindow: [0, 100],
  89     width: 500,
  90     height: 450,
  91     colors: ['#ff0000'],
  92     labels: ['X', 'Y']
  93   }
  94
  95   var graph = document.getElementById("graph");
  96   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  97
  98   assert.deepEqual([0, 100], g.toDataCoords(100, 0));
  99   assert.deepEqual([0, 0], g.toDataCoords(100, 400));
 100   assert.deepEqual([100, 100], g.toDataCoords(500, 0));
 101   assert.deepEqual([100, 0], g.toDataCoords(500, 400));
 102
 103   checkForInverses(g);
 104 });
 105
 106 it('testChartWithAxesAndLabels', function() {
 107   var opts = {
 108     axes: {
 109       x: {
 110         drawGrid: false,
 111         drawAxis: true,
 112       },
 113       y: {
 114         drawGrid: false,
 115         drawAxis: true,
 116         axisLabelWidth: 100
 117       },
 118     },
 119     xAxisHeight: 50,
 120     axisTickSize: 0,
 121     rightGap: 0,
 122     valueRange: [0, 100],
 123     dateWindow: [0, 100],
 124     width: 500,
 125     height: 500,
 126     colors: ['#ff0000'],
 127     ylabel: 'This is the y-axis',
 128     xlabel: 'This is the x-axis',
 129     xLabelHeight: 25,
 130     title: 'This is the title of the chart',
 131     titleHeight: 25,
 132     labels: ['X', 'Y']
 133   }
 134
 135   var graph = document.getElementById("graph");
 136   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 137
 138   assert.deepEqual([0, 100], g.toDataCoords(100, 25));
 139   assert.deepEqual([0, 0], g.toDataCoords(100, 425));
 140   assert.deepEqual([100, 100], g.toDataCoords(500, 25));
 141   assert.deepEqual([100, 0], g.toDataCoords(500, 425));
 142
 143   checkForInverses(g);
 144 });
 145
 146 it('testYAxisLabelWidth', function() {
 147   var opts = {
 148     axes: { y: { axisLabelWidth: 100 } },
 149     axisTickSize: 0,
 150     rightGap: 0,
 151     valueRange: [0, 100],
 152     dateWindow: [0, 100],
 153     width: 500,
 154     height: 500,
 155     labels: ['X', 'Y']
 156   }
 157
 158   var graph = document.getElementById("graph");
 159   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 160
 161   assert.deepEqual([100, 0], g.toDomCoords(0, 100));
 162   assert.deepEqual([500, 486], g.toDomCoords(100, 0));
 163
 164   g.updateOptions({
 165     axes: { y: { axisLabelWidth: 50 }},
 166   });
 167   assert.deepEqual([50, 0], g.toDomCoords(0, 100));
 168   assert.deepEqual([500, 486], g.toDomCoords(100, 0));
 169 });
 170
 171 it('testAxisTickSize', function() {
 172   var opts = {
 173     axes: { y: { axisLabelWidth: 100 } },
 174     axisTickSize: 0,
 175     rightGap: 0,
 176     valueRange: [0, 100],
 177     dateWindow: [0, 100],
 178     width: 500,
 179     height: 500,
 180     labels: ['X', 'Y']
 181   }
 182
 183   var graph = document.getElementById("graph");
 184   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 185
 186   assert.deepEqual([100, 0], g.toDomCoords(0, 100));
 187   assert.deepEqual([500, 486], g.toDomCoords(100, 0));
 188
 189   g.updateOptions({ axisTickSize : 50 });
 190   assert.deepEqual([200, 0], g.toDomCoords(0, 100));
 191   assert.deepEqual([500, 386], g.toDomCoords(100, 0));
 192 });
 193
 194 it('testChartLogarithmic_YAxis', function() {
 195   var opts = {
 196     rightGap: 0,
 197     valueRange: [1, 4],
 198     dateWindow: [0, 10],
 199     width: 400,
 200     height: 400,
 201     colors: ['#ff0000'],
 202     axes: {
 203       x: {
 204         drawGrid: false,
 205         drawAxis: false
 206       },
 207       y: {
 208         drawGrid: false,
 209         drawAxis: false,
 210         logscale: true
 211       }
 212     },
 213     labels: ['X', 'Y']
 214   }
 215
 216   var graph = document.getElementById("graph");
 217   var g = new Dygraph(graph, [ [1,1], [4,4] ], opts);
 218
 219   var epsilon = 1e-8;
 220   assertDeepCloseTo([0, 4], g.toDataCoords(0, 0), epsilon);
 221   assertDeepCloseTo([0, 1], g.toDataCoords(0, 400), epsilon);
 222   assertDeepCloseTo([10, 4], g.toDataCoords(400, 0), epsilon);
 223   assertDeepCloseTo([10, 1], g.toDataCoords(400, 400), epsilon);
 224   assertDeepCloseTo([10, 2], g.toDataCoords(400, 200), epsilon);
 225
 226   assert.deepEqual([0, 0], g.toDomCoords(0, 4));
 227   assert.deepEqual([0, 400], g.toDomCoords(0, 1));
 228   assert.deepEqual([400, 0], g.toDomCoords(10, 4));
 229   assert.deepEqual([400, 400], g.toDomCoords(10, 1));
 230   assert.deepEqual([400, 200], g.toDomCoords(10, 2));
 231 });
 232
 233 it('testChartLogarithmic_XAxis', function() {
 234   var opts = {
 235     rightGap: 0,
 236     valueRange: [1, 1000],
 237     dateWindow: [1, 1000],
 238     width: 400,
 239     height: 400,
 240     colors: ['#ff0000'],
 241     axes: {
 242       x: {
 243         drawGrid: false,
 244         drawAxis: false,
 245         logscale: true
 246       },
 247       y: {
 248         drawGrid: false,
 249         drawAxis: false
 250       }
 251     },
 252     labels: ['X', 'Y']
 253   }
 254
 255   var graph = document.getElementById("graph");
 256   var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);
 257
 258   var epsilon = 1e-8;
 259   assert.closeTo(1, g.toDataXCoord(0), epsilon);
 260   assert.closeTo(5.623413251903489, g.toDataXCoord(100), epsilon);
 261   assert.closeTo(31.62277660168378, g.toDataXCoord(200), epsilon);
 262   assert.closeTo(177.8279410038921, g.toDataXCoord(300), epsilon);
 263   assert.closeTo(1000, g.toDataXCoord(400), epsilon);
 264
 265   assert.closeTo(0, g.toDomXCoord(1), epsilon);
 266   assert.closeTo(3.6036036036036037, g.toDomXCoord(10), epsilon);
 267   assert.closeTo(39.63963963963964, g.toDomXCoord(100), epsilon);
 268   assert.closeTo(400, g.toDomXCoord(1000), epsilon);
 269
 270   assert.closeTo(0, g.toPercentXCoord(1), epsilon);
 271   assert.closeTo(0.3333333333, g.toPercentXCoord(10), epsilon);
 272   assert.closeTo(0.6666666666, g.toPercentXCoord(100), epsilon);
 273   assert.closeTo(1, g.toPercentXCoord(1000), epsilon);
 274
 275   // Now zoom in and ensure that the methods return reasonable values.
 276   g.updateOptions({dateWindow: [ 10, 100 ]});
 277
 278   assert.closeTo(10, g.toDataXCoord(0), epsilon);
 279   assert.closeTo(17.78279410038923, g.toDataXCoord(100), epsilon);
 280   assert.closeTo(31.62277660168379, g.toDataXCoord(200), epsilon);
 281   assert.closeTo(56.23413251903491, g.toDataXCoord(300), epsilon);
 282   assert.closeTo(100, g.toDataXCoord(400), epsilon);
 283
 284   assert.closeTo(-40, g.toDomXCoord(1), epsilon);
 285   assert.closeTo(0, g.toDomXCoord(10), epsilon);
 286   assert.closeTo(400, g.toDomXCoord(100), epsilon);
 287   assert.closeTo(4400, g.toDomXCoord(1000), epsilon);
 288
 289   assert.closeTo(-1, g.toPercentXCoord(1), epsilon);
 290   assert.closeTo(0, g.toPercentXCoord(10), epsilon);
 291   assert.closeTo(1, g.toPercentXCoord(100), epsilon);
 292   assert.closeTo(2, g.toPercentXCoord(1000), epsilon);
 293 });
 294
 295 });