X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=auto_tests%2Ftests%2Fto_dom_coords.js;h=454050115bb6af37fef85f740ac2a9bcb6969997;hb=ce31caf22475e3e1fd6d9fea192d61ff4fcd7fac;hp=c70b704776fe0faaa6a867485dfe2dff75560ae4;hpb=063e83bad654d6b5afcc156f7a2a0be4b2ea8e94;p=dygraphs.git

diff --git a/auto_tests/tests/to_dom_coords.js b/auto_tests/tests/to_dom_coords.js
index c70b704..4540501 100644
--- a/auto_tests/tests/to_dom_coords.js
+++ b/auto_tests/tests/to_dom_coords.js
@@ -3,100 +3,118 @@
  *
  * @author danvk@google.com (Dan Vanderkam)
  */
+import Dygraph from '../../src/dygraph';
+import * as utils from '../../src/dygraph-utils';
 
-var ToDomCoordsTestCase = TestCase("to-dom-coords");
+import Proxy from './Proxy';
+import CanvasAssertions from './CanvasAssertions';
+import {assertDeepCloseTo} from './custom_asserts';
 
-var _origFunc = Dygraph.getContext;
-ToDomCoordsTestCase.prototype.setUp = function() {
-  document.body.innerHTML = "<div id='graph'></div>";
-  Dygraph.getContext = function(canvas) {
-    return new Proxy(_origFunc(canvas));
-  }
-};
+describe("to-dom-coords", function() {
 
-ToDomCoordsTestCase.prototype.tearDown = function() {
-  Dygraph.getContext = _origFunc;
-};
+cleanupAfterEach();
+useProxyCanvas(utils, Proxy);
 
 // Checks that toDomCoords and toDataCoords are inverses of one another.
-ToDomCoordsTestCase.prototype.checkForInverses = function(g) {
+var checkForInverses = function(g) {
   var x_range = g.xAxisRange();
   var y_range = g.yAxisRange();
   for (var i = 0; i <= 10; i++) {
     var x = x_range[0] + i / 10.0 * (x_range[1] - x_range[0]);
     for (var j = 0; j <= 10; j++) {
       var y = y_range[0] + j / 10.0 * (y_range[1] - y_range[0]);
-      assertEquals(x, g.toDataXCoord(g.toDomXCoord(x)));
-      assertEquals(y, g.toDataYCoord(g.toDomYCoord(y)));
+      assert.equal(x, g.toDataXCoord(g.toDomXCoord(x)));
+      assert.equal(y, g.toDataYCoord(g.toDomYCoord(y)));
     }
   }
-}
+};
 
-ToDomCoordsTestCase.prototype.testPlainChart = function() {
+it('testPlainChart', function() {
   var opts = {
-    drawXAxis: false,
-    drawYAxis: false,
-    drawXGrid: false,
-    drawYGrid: false,
+    axes: {
+      x: {
+        drawAxis : false,
+        drawGrid : false
+      },
+      y: {
+        drawAxis : false,
+        drawGrid : false
+      }
+    },
     rightGap: 0,
     valueRange: [0, 100],
     dateWindow: [0, 100],
     width: 400,
     height: 400,
-    colors: ['#ff0000']
+    colors: ['#ff0000'],
+    labels: ['X', 'Y']
   }
 
   var graph = document.getElementById("graph");
-  g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
+  var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 
-  assertEquals([0, 100], g.toDataCoords(0, 0));
-  assertEquals([0, 0], g.toDataCoords(0, 400));
-  assertEquals([100, 100], g.toDataCoords(400, 0));
-  assertEquals([100, 0], g.toDataCoords(400, 400));
+  assert.deepEqual([0, 100], g.toDataCoords(0, 0));
+  assert.deepEqual([0, 0], g.toDataCoords(0, 400));
+  assert.deepEqual([100, 100], g.toDataCoords(400, 0));
+  assert.deepEqual([100, 0], g.toDataCoords(400, 400));
 
-  this.checkForInverses(g);
+  checkForInverses(g);
 
+  // TODO(konigsberg): This doesn't really belong here. Move to its own test.
   var htx = g.hidden_ctx_;
-  assertEquals(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
-}
+  assert.equal(1, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
+});
 
-ToDomCoordsTestCase.prototype.testChartWithAxes = function() {
+it('testChartWithAxes', function() {
   var opts = {
-    drawXAxis: true,
+    axes: {
+      x: {
+        drawGrid: false,
+        drawAxis: true,
+      },
+      y: {
+        drawGrid: false,
+        drawAxis: true,
+        axisLabelWidth: 100
+      }
+    },
     xAxisHeight: 50,
-    drawYAxis: true,
-    yAxisLabelWidth: 100,
     axisTickSize: 0,
-    drawXGrid: false,
-    drawYGrid: false,
     rightGap: 0,
     valueRange: [0, 100],
     dateWindow: [0, 100],
     width: 500,
     height: 450,
-    colors: ['#ff0000']
+    colors: ['#ff0000'],
+    labels: ['X', 'Y']
   }
 
   var graph = document.getElementById("graph");
-  g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
+  var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
 
-  assertEquals([0, 100], g.toDataCoords(100, 0));
-  assertEquals([0, 0], g.toDataCoords(100, 400));
-  assertEquals([100, 100], g.toDataCoords(500, 0));
-  assertEquals([100, 0], g.toDataCoords(500, 400));
+  assert.deepEqual([0, 100], g.toDataCoords(100, 0));
+  assert.deepEqual([0, 0], g.toDataCoords(100, 400));
+  assert.deepEqual([100, 100], g.toDataCoords(500, 0));
+  assert.deepEqual([100, 0], g.toDataCoords(500, 400));
 
-  this.checkForInverses(g);
-}
+  checkForInverses(g);
+});
 
-ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
+it('testChartWithAxesAndLabels', function() {
   var opts = {
-    drawXAxis: true,
+    axes: {
+      x: {
+        drawGrid: false,
+        drawAxis: true,
+      },
+      y: {
+        drawGrid: false,
+        drawAxis: true,
+        axisLabelWidth: 100
+      },
+    },
     xAxisHeight: 50,
-    drawYAxis: true,
-    yAxisLabelWidth: 100,
     axisTickSize: 0,
-    drawXGrid: false,
-    drawYGrid: false,
     rightGap: 0,
     valueRange: [0, 100],
     dateWindow: [0, 100],
@@ -107,16 +125,168 @@ ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
     xlabel: 'This is the x-axis',
     xLabelHeight: 25,
     title: 'This is the title of the chart',
-    titleHeight: 25
+    titleHeight: 25,
+    labels: ['X', 'Y']
+  }
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
+
+  assert.deepEqual([0, 100], g.toDataCoords(100, 25));
+  assert.deepEqual([0, 0], g.toDataCoords(100, 425));
+  assert.deepEqual([100, 100], g.toDataCoords(500, 25));
+  assert.deepEqual([100, 0], g.toDataCoords(500, 425));
+
+  checkForInverses(g);
+});
+
+it('testYAxisLabelWidth', function() {
+  var opts = {
+    axes: { y: { axisLabelWidth: 100 } },
+    axisTickSize: 0,
+    rightGap: 0,
+    valueRange: [0, 100],
+    dateWindow: [0, 100],
+    width: 500,
+    height: 500,
+    labels: ['X', 'Y']
+  }
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
+
+  assert.deepEqual([100, 0], g.toDomCoords(0, 100));
+  assert.deepEqual([500, 486], g.toDomCoords(100, 0));
+
+  g.updateOptions({     
+    axes: { y: { axisLabelWidth: 50 }},
+  });
+  assert.deepEqual([50, 0], g.toDomCoords(0, 100));
+  assert.deepEqual([500, 486], g.toDomCoords(100, 0));
+});
+
+it('testAxisTickSize', function() {
+  var opts = {
+    axes: { y: { axisLabelWidth: 100 } },
+    axisTickSize: 0,
+    rightGap: 0,
+    valueRange: [0, 100],
+    dateWindow: [0, 100],
+    width: 500,
+    height: 500,
+    labels: ['X', 'Y']
   }
 
   var graph = document.getElementById("graph");
-  g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
+  var g = new Dygraph(graph, [ [0,0], [100,100] ], opts);
+
+  assert.deepEqual([100, 0], g.toDomCoords(0, 100));
+  assert.deepEqual([500, 486], g.toDomCoords(100, 0));
+
+  g.updateOptions({ axisTickSize : 50 });
+  assert.deepEqual([200, 0], g.toDomCoords(0, 100));
+  assert.deepEqual([500, 386], g.toDomCoords(100, 0));
+});
+
+it('testChartLogarithmic_YAxis', function() {
+  var opts = {
+    rightGap: 0,
+    valueRange: [1, 4],
+    dateWindow: [0, 10],
+    width: 400,
+    height: 400,
+    colors: ['#ff0000'],
+    axes: {
+      x: {
+        drawGrid: false,
+        drawAxis: false
+      },
+      y: {
+        drawGrid: false,
+        drawAxis: false,
+        logscale: true
+      }
+    },
+    labels: ['X', 'Y']
+  }
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, [ [1,1], [4,4] ], opts);
+
+  var epsilon = 1e-8;
+  assertDeepCloseTo([0, 4], g.toDataCoords(0, 0), epsilon);
+  assertDeepCloseTo([0, 1], g.toDataCoords(0, 400), epsilon);
+  assertDeepCloseTo([10, 4], g.toDataCoords(400, 0), epsilon);
+  assertDeepCloseTo([10, 1], g.toDataCoords(400, 400), epsilon);
+  assertDeepCloseTo([10, 2], g.toDataCoords(400, 200), epsilon);
+  
+  assert.deepEqual([0, 0], g.toDomCoords(0, 4));
+  assert.deepEqual([0, 400], g.toDomCoords(0, 1));
+  assert.deepEqual([400, 0], g.toDomCoords(10, 4));
+  assert.deepEqual([400, 400], g.toDomCoords(10, 1));
+  assert.deepEqual([400, 200], g.toDomCoords(10, 2));
+});
+
+it('testChartLogarithmic_XAxis', function() {
+  var opts = {
+    rightGap: 0,
+    valueRange: [1, 1000],
+    dateWindow: [1, 1000],
+    width: 400,
+    height: 400,
+    colors: ['#ff0000'],
+    axes: {
+      x: {
+        drawGrid: false,
+        drawAxis: false,
+        logscale: true
+      },
+      y: {
+        drawGrid: false,
+        drawAxis: false
+      }
+    },
+    labels: ['X', 'Y']
+  }
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);
+
+  var epsilon = 1e-8;
+  assert.closeTo(1, g.toDataXCoord(0), epsilon);
+  assert.closeTo(5.623413251903489, g.toDataXCoord(100), epsilon);
+  assert.closeTo(31.62277660168378, g.toDataXCoord(200), epsilon);
+  assert.closeTo(177.8279410038921, g.toDataXCoord(300), epsilon);
+  assert.closeTo(1000, g.toDataXCoord(400), epsilon);
+
+  assert.closeTo(0, g.toDomXCoord(1), epsilon);
+  assert.closeTo(3.6036036036036037, g.toDomXCoord(10), epsilon);
+  assert.closeTo(39.63963963963964, g.toDomXCoord(100), epsilon);
+  assert.closeTo(400, g.toDomXCoord(1000), epsilon);
+
+  assert.closeTo(0, g.toPercentXCoord(1), epsilon);
+  assert.closeTo(0.3333333333, g.toPercentXCoord(10), epsilon);
+  assert.closeTo(0.6666666666, g.toPercentXCoord(100), epsilon);
+  assert.closeTo(1, g.toPercentXCoord(1000), epsilon);
+ 
+  // Now zoom in and ensure that the methods return reasonable values.
+  g.updateOptions({dateWindow: [ 10, 100 ]});
+
+  assert.closeTo(10, g.toDataXCoord(0), epsilon);
+  assert.closeTo(17.78279410038923, g.toDataXCoord(100), epsilon);
+  assert.closeTo(31.62277660168379, g.toDataXCoord(200), epsilon);
+  assert.closeTo(56.23413251903491, g.toDataXCoord(300), epsilon);
+  assert.closeTo(100, g.toDataXCoord(400), epsilon);
+
+  assert.closeTo(-40, g.toDomXCoord(1), epsilon);
+  assert.closeTo(0, g.toDomXCoord(10), epsilon);
+  assert.closeTo(400, g.toDomXCoord(100), epsilon);
+  assert.closeTo(4400, g.toDomXCoord(1000), epsilon);
 
-  assertEquals([0, 100], g.toDataCoords(100, 25));
-  assertEquals([0, 0], g.toDataCoords(100, 425));
-  assertEquals([100, 100], g.toDataCoords(500, 25));
-  assertEquals([100, 0], g.toDataCoords(500, 425));
+  assert.closeTo(-1, g.toPercentXCoord(1), epsilon);
+  assert.closeTo(0, g.toPercentXCoord(10), epsilon);
+  assert.closeTo(1, g.toPercentXCoord(100), epsilon);
+  assert.closeTo(2, g.toPercentXCoord(1000), epsilon);
+});
 
-  this.checkForInverses(g);
-}
+});