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 var ToDomCoordsTestCase = TestCase("to-dom-coords");
   8
   9 var _origFunc = Dygraph.getContext;
  10 ToDomCoordsTestCase.prototype.setUp = function() {
  11   document.body.innerHTML = "<div id='graph'></div>";
  12   Dygraph.getContext = function(canvas) {
  13     return new Proxy(_origFunc(canvas));
  14   }
  15 };
  16
  17 ToDomCoordsTestCase.prototype.tearDown = function() {
  18   Dygraph.getContext = _origFunc;
  19 };
  20
  21 // Checks that toDomCoords and toDataCoords are inverses of one another.
  22 ToDomCoordsTestCase.prototype.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       assertEquals(x, g.toDataXCoord(g.toDomXCoord(x)));
  30       assertEquals(y, g.toDataYCoord(g.toDomYCoord(y)));
  31     }
  32   }
  33 }
  34
  35 ToDomCoordsTestCase.prototype.testPlainChart = function() {
  36   var opts = {
  37     drawXAxis: false,
  38     drawYAxis: false,
  39     drawXGrid: false,
  40     drawYGrid: false,
  41     rightGap: 0,
  42     valueRange: [0, 100],
  43     dateWindow: [0, 100],
  44     width: 400,
  45     height: 400,
  46     colors: ['#ff0000']
  47   }
  48
  49   var graph = document.getElementById("graph");
  50   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  51
  52   assertEquals([0, 100], g.toDataCoords(0, 0));
  53   assertEquals([0, 0], g.toDataCoords(0, 400));
  54   assertEquals([100, 100], g.toDataCoords(400, 0));
  55   assertEquals([100, 0], g.toDataCoords(400, 400));
  56
  57   this.checkForInverses(g);
  58
  59   var htx = g.hidden_ctx_;
  60   assertEquals(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  61 }
  62
  63 ToDomCoordsTestCase.prototype.testChartWithAxes = function() {
  64   var opts = {
  65     drawXAxis: true,
  66     xAxisHeight: 50,
  67     drawYAxis: true,
  68     yAxisLabelWidth: 100,
  69     axisTickSize: 0,
  70     drawXGrid: false,
  71     drawYGrid: false,
  72     rightGap: 0,
  73     valueRange: [0, 100],
  74     dateWindow: [0, 100],
  75     width: 500,
  76     height: 450,
  77     colors: ['#ff0000']
  78   }
  79
  80   var graph = document.getElementById("graph");
  81   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  82
  83   assertEquals([0, 100], g.toDataCoords(100, 0));
  84   assertEquals([0, 0], g.toDataCoords(100, 400));
  85   assertEquals([100, 100], g.toDataCoords(500, 0));
  86   assertEquals([100, 0], g.toDataCoords(500, 400));
  87
  88   this.checkForInverses(g);
  89 }
  90
  91 ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
  92   var opts = {
  93     drawXAxis: true,
  94     xAxisHeight: 50,
  95     drawYAxis: true,
  96     yAxisLabelWidth: 100,
  97     axisTickSize: 0,
  98     drawXGrid: false,
  99     drawYGrid: false,
 100     rightGap: 0,
 101     valueRange: [0, 100],
 102     dateWindow: [0, 100],
 103     width: 500,
 104     height: 500,
 105     colors: ['#ff0000'],
 106     ylabel: 'This is the y-axis',
 107     xlabel: 'This is the x-axis',
 108     xLabelHeight: 25,
 109     title: 'This is the title of the chart',
 110     titleHeight: 25
 111   }
 112
 113   var graph = document.getElementById("graph");
 114   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 115
 116   assertEquals([0, 100], g.toDataCoords(100, 25));
 117   assertEquals([0, 0], g.toDataCoords(100, 425));
 118   assertEquals([100, 100], g.toDataCoords(500, 25));
 119   assertEquals([100, 0], g.toDataCoords(500, 425));
 120
 121   this.checkForInverses(g);
 122 }