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   }
  54
  55   var graph = document.getElementById("graph");
  56   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  57
  58   assert.deepEqual([0, 100], g.toDataCoords(0, 0));
  59   assert.deepEqual([0, 0], g.toDataCoords(0, 400));
  60   assert.deepEqual([100, 100], g.toDataCoords(400, 0));
  61   assert.deepEqual([100, 0], g.toDataCoords(400, 400));
  62
  63   checkForInverses(g);
  64
  65   // TODO(konigsberg): This doesn't really belong here. Move to its own test.
  66   var htx = g.hidden_ctx_;
  67   assert.equal(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  68 });
  69
  70 it('testChartWithAxes', function() {
  71   var opts = {
  72     axes : {
  73       x : {
  74         drawGrid: false,
  75         drawAxis: true,
  76       },
  77       y : {
  78         drawGrid: false,
  79         drawAxis: true,
  80         axisLabelWidth: 100
  81       }
  82     },
  83     xAxisHeight: 50,
  84     axisTickSize: 0,
  85     rightGap: 0,
  86     valueRange: [0, 100],
  87     dateWindow: [0, 100],
  88     width: 500,
  89     height: 450,
  90     colors: ['#ff0000']
  91   }
  92
  93   var graph = document.getElementById("graph");
  94   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  95
  96   assert.deepEqual([0, 100], g.toDataCoords(100, 0));
  97   assert.deepEqual([0, 0], g.toDataCoords(100, 400));
  98   assert.deepEqual([100, 100], g.toDataCoords(500, 0));
  99   assert.deepEqual([100, 0], g.toDataCoords(500, 400));
 100
 101   checkForInverses(g);
 102 });
 103
 104 it('testChartWithAxesAndLabels', function() {
 105   var opts = {
 106     axes : {
 107       x : {
 108         drawGrid: false,
 109         drawAxis: true,
 110       },
 111       y : {
 112         drawGrid: false,
 113         drawAxis: true,
 114         axisLabelWidth: 100
 115       }
 116     },
 117     xAxisHeight: 50,
 118     axisTickSize: 0,
 119     rightGap: 0,
 120     valueRange: [0, 100],
 121     dateWindow: [0, 100],
 122     width: 500,
 123     height: 500,
 124     colors: ['#ff0000'],
 125     ylabel: 'This is the y-axis',
 126     xlabel: 'This is the x-axis',
 127     xLabelHeight: 25,
 128     title: 'This is the title of the chart',
 129     titleHeight: 25
 130   }
 131
 132   var graph = document.getElementById("graph");
 133   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 134
 135   assert.deepEqual([0, 100], g.toDataCoords(100, 25));
 136   assert.deepEqual([0, 0], g.toDataCoords(100, 425));
 137   assert.deepEqual([100, 100], g.toDataCoords(500, 25));
 138   assert.deepEqual([100, 0], g.toDataCoords(500, 425));
 139
 140   checkForInverses(g);
 141 });
 142
 143 it('testYAxisLabelWidth', function() {
 144   var opts = {
 145     axes: { y: { axisLabelWidth: 100 } },
 146     axisTickSize: 0,
 147     rightGap: 0,
 148     valueRange: [0, 100],
 149     dateWindow: [0, 100],
 150     width: 500,
 151     height: 500
 152   }
 153
 154   var graph = document.getElementById("graph");
 155   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 156
 157   assert.deepEqual([100, 0], g.toDomCoords(0, 100));
 158   assert.deepEqual([500, 486], g.toDomCoords(100, 0));
 159
 160   g.updateOptions({
 161     axes: { y: { axisLabelWidth: 50 }},
 162   });
 163   assert.deepEqual([50, 0], g.toDomCoords(0, 100));
 164   assert.deepEqual([500, 486], g.toDomCoords(100, 0));
 165 });
 166
 167 it('testAxisTickSize', function() {
 168   var opts = {
 169     axes: { y: { axisLabelWidth: 100 } },
 170     axisTickSize: 0,
 171     rightGap: 0,
 172     valueRange: [0, 100],
 173     dateWindow: [0, 100],
 174     width: 500,
 175     height: 500
 176   }
 177
 178   var graph = document.getElementById("graph");
 179   var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 180
 181   assert.deepEqual([100, 0], g.toDomCoords(0, 100));
 182   assert.deepEqual([500, 486], g.toDomCoords(100, 0));
 183
 184   g.updateOptions({ axisTickSize : 50 });
 185   assert.deepEqual([200, 0], g.toDomCoords(0, 100));
 186   assert.deepEqual([500, 386], g.toDomCoords(100, 0));
 187 });
 188
 189 it('testChartLogarithmic_YAxis', function() {
 190   var opts = {
 191     rightGap: 0,
 192     valueRange: [1, 4],
 193     dateWindow: [0, 10],
 194     width: 400,
 195     height: 400,
 196     colors: ['#ff0000'],
 197     axes: {
 198       x: {
 199         drawGrid: false,
 200         drawAxis: false
 201       },
 202       y: {
 203         drawGrid: false,
 204         drawAxis: false,
 205         logscale: true
 206       }
 207     }
 208   }
 209
 210   var graph = document.getElementById("graph");
 211   var g = new Dygraph(graph, [ [1,1], [4,4] ], opts);
 212
 213   var epsilon = 1e-8;
 214   assert.equalsDelta([0, 4], g.toDataCoords(0, 0), epsilon);
 215   assert.equalsDelta([0, 1], g.toDataCoords(0, 400), epsilon);
 216   assert.equalsDelta([10, 4], g.toDataCoords(400, 0), epsilon);
 217   assert.equalsDelta([10, 1], g.toDataCoords(400, 400), epsilon);
 218   assert.equalsDelta([10, 2], g.toDataCoords(400, 200), epsilon);
 219
 220   assert.deepEqual([0, 0], g.toDomCoords(0, 4));
 221   assert.deepEqual([0, 400], g.toDomCoords(0, 1));
 222   assert.deepEqual([400, 0], g.toDomCoords(10, 4));
 223   assert.deepEqual([400, 400], g.toDomCoords(10, 1));
 224   assert.deepEqual([400, 200], g.toDomCoords(10, 2));
 225 });
 226
 227 it('testChartLogarithmic_XAxis', function() {
 228   var opts = {
 229     rightGap: 0,
 230     valueRange: [1, 1000],
 231     dateWindow: [1, 1000],
 232     width: 400,
 233     height: 400,
 234     colors: ['#ff0000'],
 235     axes: {
 236       x: {
 237         drawGrid: false,
 238         drawAxis: false,
 239         logscale: true
 240       },
 241       y: {
 242         drawGrid: false,
 243         drawAxis: false
 244       }
 245     }
 246   }
 247
 248   var graph = document.getElementById("graph");
 249   var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);
 250
 251   var epsilon = 1e-8;
 252   assert.equalsDelta(1, g.toDataXCoord(0), epsilon);
 253   assert.equalsDelta(5.623413251903489, g.toDataXCoord(100), epsilon);
 254   assert.equalsDelta(31.62277660168378, g.toDataXCoord(200), epsilon);
 255   assert.equalsDelta(177.8279410038921, g.toDataXCoord(300), epsilon);
 256   assert.equalsDelta(1000, g.toDataXCoord(400), epsilon);
 257
 258   assert.equalsDelta(0, g.toDomXCoord(1), epsilon);
 259   assert.equalsDelta(3.6036036036036037, g.toDomXCoord(10), epsilon);
 260   assert.equalsDelta(39.63963963963964, g.toDomXCoord(100), epsilon);
 261   assert.equalsDelta(400, g.toDomXCoord(1000), epsilon);
 262
 263   assert.equalsDelta(0, g.toPercentXCoord(1), epsilon);
 264   assert.equalsDelta(0.3333333333, g.toPercentXCoord(10), epsilon);
 265   assert.equalsDelta(0.6666666666, g.toPercentXCoord(100), epsilon);
 266   assert.equalsDelta(1, g.toPercentXCoord(1000), epsilon);
 267
 268   // Now zoom in and ensure that the methods return reasonable values.
 269   g.updateOptions({dateWindow: [ 10, 100 ]});
 270
 271   assert.equalsDelta(10, g.toDataXCoord(0), epsilon);
 272   assert.equalsDelta(17.78279410038923, g.toDataXCoord(100), epsilon);
 273   assert.equalsDelta(31.62277660168379, g.toDataXCoord(200), epsilon);
 274   assert.equalsDelta(56.23413251903491, g.toDataXCoord(300), epsilon);
 275   assert.equalsDelta(100, g.toDataXCoord(400), epsilon);
 276
 277   assert.equalsDelta(-40, g.toDomXCoord(1), epsilon);
 278   assert.equalsDelta(0, g.toDomXCoord(10), epsilon);
 279   assert.equalsDelta(400, g.toDomXCoord(100), epsilon);
 280   assert.equalsDelta(4400, g.toDomXCoord(1000), epsilon);
 281
 282   assert.equalsDelta(-1, g.toPercentXCoord(1), epsilon);
 283   assert.equalsDelta(0, g.toPercentXCoord(10), epsilon);
 284   assert.equalsDelta(1, g.toPercentXCoord(100), epsilon);
 285   assert.equalsDelta(2, g.toPercentXCoord(1000), epsilon);
 286 });
 287
 288 });