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     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   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  57
  58   assertEquals([0, 100], g.toDataCoords(0, 0));
  59   assertEquals([0, 0], g.toDataCoords(0, 400));
  60   assertEquals([100, 100], g.toDataCoords(400, 0));
  61   assertEquals([100, 0], g.toDataCoords(400, 400));
  62
  63   this.checkForInverses(g);
  64
  65   // TODO(konigsberg): This doesn't really belong here. Move to its own test.
  66   var htx = g.hidden_ctx_;
  67   assertEquals(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  68 }
  69
  70 ToDomCoordsTestCase.prototype.testChartWithAxes = function() {
  71   var opts = {
  72     drawXAxis: true,
  73     xAxisHeight: 50,
  74     drawYAxis: true,
  75     yAxisLabelWidth: 100,
  76     axisTickSize: 0,
  77     drawXGrid: false,
  78     drawYGrid: false,
  79     rightGap: 0,
  80     valueRange: [0, 100],
  81     dateWindow: [0, 100],
  82     width: 500,
  83     height: 450,
  84     colors: ['#ff0000']
  85   }
  86
  87   var graph = document.getElementById("graph");
  88   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
  89
  90   assertEquals([0, 100], g.toDataCoords(100, 0));
  91   assertEquals([0, 0], g.toDataCoords(100, 400));
  92   assertEquals([100, 100], g.toDataCoords(500, 0));
  93   assertEquals([100, 0], g.toDataCoords(500, 400));
  94
  95   this.checkForInverses(g);
  96 }
  97
  98 ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
  99   var opts = {
 100     drawXAxis: true,
 101     xAxisHeight: 50,
 102     drawYAxis: true,
 103     yAxisLabelWidth: 100,
 104     axisTickSize: 0,
 105     drawXGrid: false,
 106     drawYGrid: false,
 107     rightGap: 0,
 108     valueRange: [0, 100],
 109     dateWindow: [0, 100],
 110     width: 500,
 111     height: 500,
 112     colors: ['#ff0000'],
 113     ylabel: 'This is the y-axis',
 114     xlabel: 'This is the x-axis',
 115     xLabelHeight: 25,
 116     title: 'This is the title of the chart',
 117     titleHeight: 25
 118   }
 119
 120   var graph = document.getElementById("graph");
 121   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 122
 123   assertEquals([0, 100], g.toDataCoords(100, 25));
 124   assertEquals([0, 0], g.toDataCoords(100, 425));
 125   assertEquals([100, 100], g.toDataCoords(500, 25));
 126   assertEquals([100, 0], g.toDataCoords(500, 425));
 127
 128   this.checkForInverses(g);
 129 }
 130
 131 ToDomCoordsTestCase.prototype.testYAxisLabelWidth = function() {
 132   var opts = {
 133     yAxisLabelWidth: 100,
 134     axisTickSize: 0,
 135     rightGap: 0,
 136     valueRange: [0, 100],
 137     dateWindow: [0, 100],
 138     width: 500,
 139     height: 500
 140   }
 141
 142   var graph = document.getElementById("graph");
 143   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 144
 145   assertEquals([100, 0], g.toDomCoords(0, 100));
 146   assertEquals([500, 486], g.toDomCoords(100, 0));
 147
 148   g.updateOptions({ yAxisLabelWidth: 50 });
 149   assertEquals([50, 0], g.toDomCoords(0, 100));
 150   assertEquals([500, 486], g.toDomCoords(100, 0));
 151 }
 152
 153 ToDomCoordsTestCase.prototype.testAxisTickSize = function() {
 154   var opts = {
 155     yAxisLabelWidth: 100,
 156     axisTickSize: 0,
 157     rightGap: 0,
 158     valueRange: [0, 100],
 159     dateWindow: [0, 100],
 160     width: 500,
 161     height: 500
 162   }
 163
 164   var graph = document.getElementById("graph");
 165   g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 166
 167   assertEquals([100, 0], g.toDomCoords(0, 100));
 168   assertEquals([500, 486], g.toDomCoords(100, 0));
 169
 170   g.updateOptions({ axisTickSize : 50 });
 171   assertEquals([200, 0], g.toDomCoords(0, 100));
 172   assertEquals([500, 386], g.toDomCoords(100, 0));
 173 }
 174
 175 ToDomCoordsTestCase.prototype.testChartLogarithmic = function() {
 176   var opts = {
 177     drawXAxis: false,
 178     drawYAxis: false,
 179     drawXGrid: false,
 180     drawYGrid: false,
 181     logscale: true,
 182     rightGap: 0,
 183     valueRange: [1, 4],
 184     dateWindow: [0, 10],
 185     width: 400,
 186     height: 400,
 187     colors: ['#ff0000']
 188   }
 189
 190   var graph = document.getElementById("graph");
 191   g = new Dygraph(graph, [ [1,1], [4,4] ], opts);
 192
 193   var epsilon = 1e-8;
 194   assertEqualsDelta([0, 4], g.toDataCoords(0, 0), epsilon);
 195   assertEqualsDelta([0, 1], g.toDataCoords(0, 400), epsilon);
 196   assertEqualsDelta([10, 4], g.toDataCoords(400, 0), epsilon);
 197   assertEqualsDelta([10, 1], g.toDataCoords(400, 400), epsilon);
 198   assertEqualsDelta([10, 2], g.toDataCoords(400, 200), epsilon);
 199
 200   assertEquals([0, 0], g.toDomCoords(0, 4));
 201   assertEquals([0, 400], g.toDomCoords(0, 1));
 202   assertEquals([400, 0], g.toDomCoords(10, 4));
 203   assertEquals([400, 400], g.toDomCoords(10, 1));
 204   assertEquals([400, 200], g.toDomCoords(10, 2));
 205 }