[dygraphs.git] / auto_tests / tests / to_dom_coords.js

/** 
 * @fileoverview Test cases for toDomCoords/toDataCoords
 *
 * @author danvk@google.com (Dan Vanderkam)
 */

var ToDomCoordsTestCase = TestCase("to-dom-coords");

ToDomCoordsTestCase._origFunc = Dygraph.getContext;
ToDomCoordsTestCase.prototype.setUp = function() {
  document.body.innerHTML = "<div id='graph'></div>";
  Dygraph.getContext = function(canvas) {
    return new Proxy(ToDomCoordsTestCase._origFunc(canvas));
  }
};

ToDomCoordsTestCase.prototype.tearDown = function() {
  Dygraph.getContext = ToDomCoordsTestCase._origFunc;
};

// Checks that toDomCoords and toDataCoords are inverses of one another.
ToDomCoordsTestCase.prototype.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)));
    }
  }
}

ToDomCoordsTestCase.prototype.testPlainChart = function() {
  var opts = {
    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']
  }

  var graph = document.getElementById("graph");
  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));

  this.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'));
}

ToDomCoordsTestCase.prototype.testChartWithAxes = function() {
  var opts = {
    drawXAxis: true,
    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']
  }

  var graph = document.getElementById("graph");
  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));

  this.checkForInverses(g);
}

ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
  var opts = {
    drawXAxis: true,
    xAxisHeight: 50,
    drawYAxis: true,
    yAxisLabelWidth: 100,
    axisTickSize: 0,
    drawXGrid: false,
    drawYGrid: false,
    rightGap: 0,
    valueRange: [0, 100],
    dateWindow: [0, 100],
    width: 500,
    height: 500,
    colors: ['#ff0000'],
    ylabel: 'This is the y-axis',
    xlabel: 'This is the x-axis',
    xLabelHeight: 25,
    title: 'This is the title of the chart',
    titleHeight: 25
  }

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, [ [0,0], [100,100] ], opts);

  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));

  this.checkForInverses(g);
}

ToDomCoordsTestCase.prototype.testYAxisLabelWidth = function() {
  var opts = {
    yAxisLabelWidth: 100,
    axisTickSize: 0,
    rightGap: 0,
    valueRange: [0, 100],
    dateWindow: [0, 100],
    width: 500,
    height: 500
  }

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, [ [0,0], [100,100] ], opts);

  assertEquals([100, 0], g.toDomCoords(0, 100));
  assertEquals([500, 486], g.toDomCoords(100, 0));

  g.updateOptions({ yAxisLabelWidth: 50 });
  assertEquals([50, 0], g.toDomCoords(0, 100));
  assertEquals([500, 486], g.toDomCoords(100, 0));
}

ToDomCoordsTestCase.prototype.testAxisTickSize = function() {
  var opts = {
    yAxisLabelWidth: 100,
    axisTickSize: 0,
    rightGap: 0,
    valueRange: [0, 100],
    dateWindow: [0, 100],
    width: 500,
    height: 500
  }

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, [ [0,0], [100,100] ], opts);

  assertEquals([100, 0], g.toDomCoords(0, 100));
  assertEquals([500, 486], g.toDomCoords(100, 0));

  g.updateOptions({ axisTickSize : 50 });
  assertEquals([200, 0], g.toDomCoords(0, 100));
  assertEquals([500, 386], g.toDomCoords(100, 0));
}

ToDomCoordsTestCase.prototype.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
      }
    }
  }

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, [ [1,1], [4,4] ], opts);

  var epsilon = 1e-8;
  assertEqualsDelta([0, 4], g.toDataCoords(0, 0), epsilon);
  assertEqualsDelta([0, 1], g.toDataCoords(0, 400), epsilon);
  assertEqualsDelta([10, 4], g.toDataCoords(400, 0), epsilon);
  assertEqualsDelta([10, 1], g.toDataCoords(400, 400), epsilon);
  assertEqualsDelta([10, 2], g.toDataCoords(400, 200), epsilon);
  
  assertEquals([0, 0], g.toDomCoords(0, 4));
  assertEquals([0, 400], g.toDomCoords(0, 1));
  assertEquals([400, 0], g.toDomCoords(10, 4));
  assertEquals([400, 400], g.toDomCoords(10, 1));
  assertEquals([400, 200], g.toDomCoords(10, 2));
}

ToDomCoordsTestCase.prototype.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
      }
    }
  }

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);

  var epsilon = 1e-8;
  assertEqualsDelta(1, g.toDataXCoord(0), epsilon);
  assertEqualsDelta(5.623413251903489, g.toDataXCoord(100), epsilon);
  assertEqualsDelta(31.62277660168378, g.toDataXCoord(200), epsilon);
  assertEqualsDelta(177.8279410038921, g.toDataXCoord(300), epsilon);
  assertEqualsDelta(1000, g.toDataXCoord(400), epsilon);

  assertEqualsDelta(0, g.toDomXCoord(1), epsilon);
  assertEqualsDelta(3.6036036036036037, g.toDomXCoord(10), epsilon);
  assertEqualsDelta(39.63963963963964, g.toDomXCoord(100), epsilon);
  assertEqualsDelta(400, g.toDomXCoord(1000), epsilon);

  assertEqualsDelta(0, g.toPercentXCoord(1), epsilon);
  assertEqualsDelta(0.3333333333, g.toPercentXCoord(10), epsilon);
  assertEqualsDelta(0.6666666666, g.toPercentXCoord(100), epsilon);
  assertEqualsDelta(1, g.toPercentXCoord(1000), epsilon);
 
  // Now zoom in and ensure that the methods return reasonable values.
  g.updateOptions({dateWindow: [ 10, 100 ]});

  assertEqualsDelta(10, g.toDataXCoord(0), epsilon);
  assertEqualsDelta(17.78279410038923, g.toDataXCoord(100), epsilon);
  assertEqualsDelta(31.62277660168379, g.toDataXCoord(200), epsilon);
  assertEqualsDelta(56.23413251903491, g.toDataXCoord(300), epsilon);
  assertEqualsDelta(100, g.toDataXCoord(400), epsilon);

  assertEqualsDelta(-40, g.toDomXCoord(1), epsilon);
  assertEqualsDelta(0, g.toDomXCoord(10), epsilon);
  assertEqualsDelta(400, g.toDomXCoord(100), epsilon);
  assertEqualsDelta(4400, g.toDomXCoord(1000), epsilon);

  assertEqualsDelta(-1, g.toPercentXCoord(1), epsilon);
  assertEqualsDelta(0, g.toPercentXCoord(10), epsilon);
  assertEqualsDelta(1, g.toPercentXCoord(100), epsilon);
  assertEqualsDelta(2, g.toPercentXCoord(1000), epsilon);
}
Commit	Line	Data
063e83ba DV	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
4707563c	9	ToDomCoordsTestCase._origFunc = Dygraph.getContext;
063e83ba DV	10	ToDomCoordsTestCase.prototype.setUp = function() {
	11	document.body.innerHTML = "<div id='graph'></div>";
	12	Dygraph.getContext = function(canvas) {
4707563c	13	return new Proxy(ToDomCoordsTestCase._origFunc(canvas));
063e83ba DV	14	}
	15	};
	16
	17	ToDomCoordsTestCase.prototype.tearDown = function() {
4707563c	18	Dygraph.getContext = ToDomCoordsTestCase._origFunc;
063e83ba DV	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 = {
7f6a7190 RK	37	axes : {
	38	x : {
	39	drawAxis : false,
	40	drawGrid : false,
	41	},
	42	y : {
	43	drawAxis : false,
	44	drawGrid : false,
	45	}
	46	},
063e83ba DV	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
796ccbc0	65	// TODO(konigsberg): This doesn't really belong here. Move to its own test.
063e83ba DV	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	}
efd5b117 RK	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,
268e525d	139	height: 500
efd5b117 RK	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));
268e525d	146	assertEquals([500, 486], g.toDomCoords(100, 0));
efd5b117 RK	147
	148	g.updateOptions({ yAxisLabelWidth: 50 });
	149	assertEquals([50, 0], g.toDomCoords(0, 100));
268e525d RK	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));
efd5b117	173	}
1f8c95d8	174
5b9b2142	175	ToDomCoordsTestCase.prototype.testChartLogarithmic_YAxis = function() {
1f8c95d8	176	var opts = {
1f8c95d8	177	rightGap: 0,
c8e01863 DV	178	valueRange: [1, 4],
c8e01863 DV	179	dateWindow: [0, 10],
1f8c95d8	180	width: 400,
1f8c95d8	181	height: 400,
5b9b2142 RK	182	colors: ['#ff0000'],
	183	axes: {
	184	x: {
	185	drawGrid: false,
	186	drawAxis: false
	187	},
	188	y: {
	189	drawGrid: false,
	190	drawAxis: false,
	191	logscale: true
	192	}
	193	}
1f8c95d8	194	}
	195
	196	var graph = document.getElementById("graph");
c8e01863 DV	197	g = new Dygraph(graph, [ [1,1], [4,4] ], opts);
	198
	199	var epsilon = 1e-8;
	200	assertEqualsDelta([0, 4], g.toDataCoords(0, 0), epsilon);
	201	assertEqualsDelta([0, 1], g.toDataCoords(0, 400), epsilon);
	202	assertEqualsDelta([10, 4], g.toDataCoords(400, 0), epsilon);
	203	assertEqualsDelta([10, 1], g.toDataCoords(400, 400), epsilon);
	204	assertEqualsDelta([10, 2], g.toDataCoords(400, 200), epsilon);
1f8c95d8	205
c8e01863 DV	206	assertEquals([0, 0], g.toDomCoords(0, 4));
	207	assertEquals([0, 400], g.toDomCoords(0, 1));
	208	assertEquals([400, 0], g.toDomCoords(10, 4));
	209	assertEquals([400, 400], g.toDomCoords(10, 1));
	210	assertEquals([400, 200], g.toDomCoords(10, 2));
1f8c95d8	211	}
5b9b2142 RK	212
	213	ToDomCoordsTestCase.prototype.testChartLogarithmic_XAxis = function() {
	214	var opts = {
	215	rightGap: 0,
	216	valueRange: [1, 1000],
	217	dateWindow: [1, 1000],
	218	width: 400,
	219	height: 400,
	220	colors: ['#ff0000'],
	221	axes: {
	222	x: {
	223	drawGrid: false,
	224	drawAxis: false,
	225	logscale: true
	226	},
	227	y: {
	228	drawGrid: false,
	229	drawAxis: false
	230	}
	231	}
	232	}
	233
	234	var graph = document.getElementById("graph");
	235	g = new Dygraph(graph, [ [1,1], [10, 10], [100,100], [1000,1000] ], opts);
	236
	237	var epsilon = 1e-8;
	238	assertEqualsDelta(1, g.toDataXCoord(0), epsilon);
	239	assertEqualsDelta(5.623413251903489, g.toDataXCoord(100), epsilon);
	240	assertEqualsDelta(31.62277660168378, g.toDataXCoord(200), epsilon);
	241	assertEqualsDelta(177.8279410038921, g.toDataXCoord(300), epsilon);
	242	assertEqualsDelta(1000, g.toDataXCoord(400), epsilon);
	243
	244	assertEqualsDelta(0, g.toDomXCoord(1), epsilon);
	245	assertEqualsDelta(3.6036036036036037, g.toDomXCoord(10), epsilon);
	246	assertEqualsDelta(39.63963963963964, g.toDomXCoord(100), epsilon);
	247	assertEqualsDelta(400, g.toDomXCoord(1000), epsilon);
	248
	249	assertEqualsDelta(0, g.toPercentXCoord(1), epsilon);
	250	assertEqualsDelta(0.3333333333, g.toPercentXCoord(10), epsilon);
	251	assertEqualsDelta(0.6666666666, g.toPercentXCoord(100), epsilon);
	252	assertEqualsDelta(1, g.toPercentXCoord(1000), epsilon);
	253
	254	// Now zoom in and ensure that the methods return reasonable values.
	255	g.updateOptions({dateWindow: [ 10, 100 ]});
	256
	257	assertEqualsDelta(10, g.toDataXCoord(0), epsilon);
	258	assertEqualsDelta(17.78279410038923, g.toDataXCoord(100), epsilon);
	259	assertEqualsDelta(31.62277660168379, g.toDataXCoord(200), epsilon);
	260	assertEqualsDelta(56.23413251903491, g.toDataXCoord(300), epsilon);
	261	assertEqualsDelta(100, g.toDataXCoord(400), epsilon);
	262
	263	assertEqualsDelta(-40, g.toDomXCoord(1), epsilon);
	264	assertEqualsDelta(0, g.toDomXCoord(10), epsilon);
	265	assertEqualsDelta(400, g.toDomXCoord(100), epsilon);
	266	assertEqualsDelta(4400, g.toDomXCoord(1000), epsilon);
	267
	268	assertEqualsDelta(-1, g.toPercentXCoord(1), epsilon);
	269	assertEqualsDelta(0, g.toPercentXCoord(10), epsilon);
	270	assertEqualsDelta(1, g.toPercentXCoord(100), epsilon);
	271	assertEqualsDelta(2, g.toPercentXCoord(1000), epsilon);
	272	}