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 ToDomCoordsTestCase._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(ToDomCoordsTestCase._origFunc(canvas));
  14   }
  15 };
  16
  17 ToDomCoordsTestCase.prototype.tearDown = function() {
  18   Dygraph.getContext = ToDomCoordsTestCase._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   // TODO(konigsberg): This doesn't really belong here. Move to its own test.
  60   var htx = g.hidden_ctx_;
  61   assertEquals(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  62 }
  63
  64 ToDomCoordsTestCase.prototype.testChartWithAxes = function() {
  65   var opts = {
  66     drawXAxis: true,
  67     xAxisHeight: 50,
  68     drawYAxis: true,
  69     yAxisLabelWidth: 100,
  70     axisTickSize: 0,
  71     drawXGrid: false,
  72     drawYGrid: false,
  73     rightGap: 0,
  74     valueRange: [0, 100],
  75     dateWindow: [0, 100],
  76     width: 500,
  77     height: 450,
  78     colors: ['#ff0000']
  79   }
  80
  81   var graph = document.getElementById("graph");
  82   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  83
  84   assertEquals([0, 100], g.toDataCoords(100, 0));
  85   assertEquals([0, 0], g.toDataCoords(100, 400));
  86   assertEquals([100, 100], g.toDataCoords(500, 0));
  87   assertEquals([100, 0], g.toDataCoords(500, 400));
  88
  89   this.checkForInverses(g);
  90 }
  91
  92 ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
  93   var opts = {
  94     drawXAxis: true,
  95     xAxisHeight: 50,
  96     drawYAxis: true,
  97     yAxisLabelWidth: 100,
  98     axisTickSize: 0,
  99     drawXGrid: false,
 100     drawYGrid: false,
 101     rightGap: 0,
 102     valueRange: [0, 100],
 103     dateWindow: [0, 100],
 104     width: 500,
 105     height: 500,
 106     colors: ['#ff0000'],
 107     ylabel: 'This is the y-axis',
 108     xlabel: 'This is the x-axis',
 109     xLabelHeight: 25,
 110     title: 'This is the title of the chart',
 111     titleHeight: 25
 112   }
 113
 114   var graph = document.getElementById("graph");
 115   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 116
 117   assertEquals([0, 100], g.toDataCoords(100, 25));
 118   assertEquals([0, 0], g.toDataCoords(100, 425));
 119   assertEquals([100, 100], g.toDataCoords(500, 25));
 120   assertEquals([100, 0], g.toDataCoords(500, 425));
 121
 122   this.checkForInverses(g);
 123 }
 124
 125 ToDomCoordsTestCase.prototype.testYAxisLabelWidth = function() {
 126   var opts = {
 127     yAxisLabelWidth: 100,
 128     axisTickSize: 0,
 129     rightGap: 0,
 130     valueRange: [0, 100],
 131     dateWindow: [0, 100],
 132     width: 500,
 133     height: 500
 134   }
 135
 136   var graph = document.getElementById("graph");
 137   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 138
 139   assertEquals([100, 0], g.toDomCoords(0, 100));
 140   assertEquals([500, 486], g.toDomCoords(100, 0));
 141
 142   g.updateOptions({ yAxisLabelWidth: 50 });
 143   assertEquals([50, 0], g.toDomCoords(0, 100));
 144   assertEquals([500, 486], g.toDomCoords(100, 0));
 145 }
 146
 147 ToDomCoordsTestCase.prototype.testAxisTickSize = function() {
 148   var opts = {
 149     yAxisLabelWidth: 100,
 150     axisTickSize: 0,
 151     rightGap: 0,
 152     valueRange: [0, 100],
 153     dateWindow: [0, 100],
 154     width: 500,
 155     height: 500
 156   }
 157
 158   var graph = document.getElementById("graph");
 159   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 160
 161   assertEquals([100, 0], g.toDomCoords(0, 100));
 162   assertEquals([500, 486], g.toDomCoords(100, 0));
 163
 164   g.updateOptions({ axisTickSize : 50 });
 165   assertEquals([200, 0], g.toDomCoords(0, 100));
 166   assertEquals([500, 386], g.toDomCoords(100, 0));
 167 }