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

// Copyright 2011 Google Inc. All Rights Reserved.

/**
 * @fileoverview Regression tests for range selector.
 * @author paul.eric.felix@gmail.com (Paul Felix)
 */
var RangeSelectorTestCase = TestCase("range-selector");

RangeSelectorTestCase.prototype.setUp = function() {
  document.body.innerHTML = "<div id='graph'></div>";
};

RangeSelectorTestCase.prototype.tearDown = function() {
};

RangeSelectorTestCase.prototype.testRangeSelector = function() {
  var opts = {
    width: 480,
    height: 320,
    showRangeSelector: true
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
};

RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() {
  var opts = {
    width: 480,
    height: 320,
    errorBars: true,
    showRangeSelector: true
  };
  var data = [
               [1, [10, 10]],
               [2, [15, 10]],
               [3, [10, 10]],
               [4, [15, 10]],
               [5, [10, 10]],
               [6, [15, 20]],
               [7, [10, 20]],
               [8, [15, 20]],
               [9, [10, 20]]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
};

RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() {
  var opts = {
    width: 480,
    height: 320,
    customBars: true,
    showRangeSelector: true
  };
  var data = [
               [1, [10,  10, 100]],
               [2, [15,  20, 110]],
               [3, [10,  30, 100]],
               [4, [15,  40, 110]],
               [5, [10, 120, 100]],
               [6, [15,  50, 110]],
               [7, [10,  70, 100]],
               [8, [15,  90, 110]],
               [9, [10,  50, 100]]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
};

RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() {
  var opts = {
    width: 480,
    height: 320,
    logscale: true,
    showRangeSelector: true
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
};

RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() {
  var opts = {
    width: 480,
    height: 320,
    showRangeSelector: true,
    rangeSelectorHeight: 30,
    rangeSelectorPlotFillColor: 'lightyellow',
    rangeSelectorPlotStyleColor: 'yellow'
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
};

RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
  var opts = {
    width: 480,
    height: 320
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  g.updateOptions({showRangeSelector: true});
  this.assertGraphExistence(g, graph);
};

// The animatedZooms option does not work with the range selector. Make sure it gets turned off.
RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = function() {
  var opts = {
    width: 480,
    height: 320,
    showRangeSelector: true,
    animatedZooms: true
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
  assertFalse(g.getOption('animatedZooms'));
};

RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = function() {
  var opts = {
    width: 480,
    height: 320,
    animatedZooms: true
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  g.updateOptions({showRangeSelector: true});
  this.assertGraphExistence(g, graph);
  assertFalse(g.getOption('animatedZooms'));
};

RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() {
  var opts = {
    width: 480,
    height: 320,
    showRangeSelector: true
  };
  var data = [
               [1, 10],
               [2, 15],
               [3, 10],
               [4, 15],
               [5, 10],
               [6, 15],
               [7, 10],
               [8, 15],
               [9, 10]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  this.assertGraphExistence(g, graph);
  var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');

  // Move left zoomhandle in
  var xRange = g.xAxisRange().slice();

  var mouseDownEvent = DygraphOps.createEvent({
    type : 'dragstart',
    detail: 1,
    clientX : 0,
    clientY : 0
  });
  zoomhandles[0].dispatchEvent(mouseDownEvent);

  var mouseMoveEvent = DygraphOps.createEvent({
    type : 'mousemove',
    clientX : 20,
    clientY : 20
  });
  zoomhandles[0].dispatchEvent(mouseMoveEvent);

  var mouseUpEvent = DygraphOps.createEvent({
    type : 'mouseup',
    detail: 1,
    clientX : 20,
    clientY : 20
  });
  zoomhandles[0].dispatchEvent(mouseUpEvent);

  var newXRange = g.xAxisRange().slice();
  assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]);
  assertEquals('right zoomhandle should not have moved', xRange[1], newXRange[1]);

  // Move right zoomhandle in
  xRange = newXRange;

  mouseDownEvent = DygraphOps.createEvent({
    type : 'dragstart',
    detail: 1,
    clientX : 100,
    clientY : 100
  });
  zoomhandles[1].dispatchEvent(mouseDownEvent);

  mouseMoveEvent = DygraphOps.createEvent({
    type : 'mousemove',
    clientX : 80,
    clientY : 80
  });
  zoomhandles[1].dispatchEvent(mouseMoveEvent);

  mouseUpEvent = DygraphOps.createEvent({
    type : 'mouseup',
    detail: 1,
    clientX : 80,
    clientY : 80
  });
  zoomhandles[1].dispatchEvent(mouseUpEvent);

  var newXRange = g.xAxisRange().slice();
  assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
  assertEquals('left zoomhandle should not have moved', xRange[0], newXRange[0]);

  // Pan left
  xRange = newXRange;
  var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
  var x = parseInt(zoomhandles[0].style.left) + 20;
  var y = parseInt(zoomhandles[0].style.top);

  mouseDownEvent = DygraphOps.createEvent({
    type : 'mousedown',
    detail: 1,
    clientX : x,
    clientY : y
  });
  fgcanvas.dispatchEvent(mouseDownEvent);

  x -= 10;

  mouseMoveEvent = DygraphOps.createEvent({
    type : 'mousemove',
    clientX : x,
    clientY : y
  });
  fgcanvas.dispatchEvent(mouseMoveEvent);

  mouseUpEvent = DygraphOps.createEvent({
    type : 'mouseup',
    detail: 1,
    clientX : x,
    clientY : y
  });
  fgcanvas.dispatchEvent(mouseUpEvent);

  var newXRange = g.xAxisRange().slice();
  assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]);
  assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
};


RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
  var opts = {
    width: 480,
    height: 100,
    xAxisHeight: 30,
    drawXAxis: false,
    showRangeSelector: true,
    rangeSelectorHeight: 30
  };
  var data = [
               [0, 1],
               [10, 1]
             ];
  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);
  
  //assert, that the range selector is at top position 70 since the 30px of the
  // xAxis shouldn't be reserved since it isn't drawn.
  this.assertGraphExistence(g, graph);
  var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
  assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top);
  var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
  assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top);
};

RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
  assertNotNull(g);
  var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
  assertEquals(2, zoomhandles.length);
  var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
  assertEquals(1, bgcanvas.length);
  var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
  assertEquals(1, fgcanvas.length);
}
Commit	Line	Data
ccd9d7c2 PF	1	// Copyright 2011 Google Inc. All Rights Reserved.
	2
	3	/**
	4	* @fileoverview Regression tests for range selector.
	5	* @author paul.eric.felix@gmail.com (Paul Felix)
	6	*/
	7	var RangeSelectorTestCase = TestCase("range-selector");
	8
	9	RangeSelectorTestCase.prototype.setUp = function() {
	10	document.body.innerHTML = "<div id='graph'></div>";
	11	};
	12
	13	RangeSelectorTestCase.prototype.tearDown = function() {
	14	};
	15
	16	RangeSelectorTestCase.prototype.testRangeSelector = function() {
	17	var opts = {
	18	width: 480,
	19	height: 320,
	20	showRangeSelector: true
	21	};
	22	var data = [
	23	[1, 10],
	24	[2, 15],
	25	[3, 10],
	26	[4, 15],
	27	[5, 10],
	28	[6, 15],
	29	[7, 10],
	30	[8, 15],
	31	[9, 10]
	32	];
	33	var graph = document.getElementById("graph");
	34	var g = new Dygraph(graph, data, opts);
	35	this.assertGraphExistence(g, graph);
	36	};
	37
	38	RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() {
	39	var opts = {
	40	width: 480,
	41	height: 320,
	42	errorBars: true,
	43	showRangeSelector: true
	44	};
	45	var data = [
	46	[1, [10, 10]],
	47	[2, [15, 10]],
	48	[3, [10, 10]],
	49	[4, [15, 10]],
	50	[5, [10, 10]],
	51	[6, [15, 20]],
	52	[7, [10, 20]],
	53	[8, [15, 20]],
	54	[9, [10, 20]]
	55	];
	56	var graph = document.getElementById("graph");
	57	var g = new Dygraph(graph, data, opts);
	58	this.assertGraphExistence(g, graph);
	59	};
	60
	61	RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() {
	62	var opts = {
	63	width: 480,
	64	height: 320,
65	customBars: true,
66	showRangeSelector: true
67	};
68	var data = [
69	[1, [10, 10, 100]],
70	[2, [15, 20, 110]],
71	[3, [10, 30, 100]],
72	[4, [15, 40, 110]],
73	[5, [10, 120, 100]],
74	[6, [15, 50, 110]],
75	[7, [10, 70, 100]],
76	[8, [15, 90, 110]],
77	[9, [10, 50, 100]]
78	];
79	var graph = document.getElementById("graph");
80	var g = new Dygraph(graph, data, opts);
81	this.assertGraphExistence(g, graph);
82	};
83
84	RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() {
85	var opts = {
86	width: 480,
87	height: 320,
88	logscale: true,
89	showRangeSelector: true
90	};
91	var data = [
92	[1, 10],
93	[2, 15],
94	[3, 10],
95	[4, 15],
96	[5, 10],
97	[6, 15],
98	[7, 10],
99	[8, 15],
100	[9, 10]
101	];
102	var graph = document.getElementById("graph");
103	var g = new Dygraph(graph, data, opts);
104	this.assertGraphExistence(g, graph);
105	};
106
107	RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() {
108	var opts = {
109	width: 480,
110	height: 320,
111	showRangeSelector: true,
112	rangeSelectorHeight: 30,
113	rangeSelectorPlotFillColor: 'lightyellow',
114	rangeSelectorPlotStyleColor: 'yellow'
115	};
116	var data = [
117	[1, 10],
118	[2, 15],
119	[3, 10],
120	[4, 15],
121	[5, 10],
122	[6, 15],
123	[7, 10],
124	[8, 15],
125	[9, 10]
126	];
127	var graph = document.getElementById("graph");
128	var g = new Dygraph(graph, data, opts);
129	this.assertGraphExistence(g, graph);
130	};
131
ceb821aa PF	132	RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
	133	var opts = {
	134	width: 480,
	135	height: 320
	136	};
	137	var data = [
	138	[1, 10],
	139	[2, 15],
	140	[3, 10],
	141	[4, 15],
	142	[5, 10],
	143	[6, 15],
	144	[7, 10],
	145	[8, 15],
	146	[9, 10]
	147	];
	148	var graph = document.getElementById("graph");
	149	var g = new Dygraph(graph, data, opts);
	150	g.updateOptions({showRangeSelector: true});
	151	this.assertGraphExistence(g, graph);
	152	};
	153
	154	// The animatedZooms option does not work with the range selector. Make sure it gets turned off.
	155	RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = function() {
	156	var opts = {
	157	width: 480,
	158	height: 320,
	159	showRangeSelector: true,
	160	animatedZooms: true
	161	};
	162	var data = [
	163	[1, 10],
	164	[2, 15],
	165	[3, 10],
	166	[4, 15],
	167	[5, 10],
	168	[6, 15],
	169	[7, 10],
	170	[8, 15],
	171	[9, 10]
	172	];
	173	var graph = document.getElementById("graph");
	174	var g = new Dygraph(graph, data, opts);
	175	this.assertGraphExistence(g, graph);
	176	assertFalse(g.getOption('animatedZooms'));
	177	};
	178
	179	RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = function() {
	180	var opts = {
	181	width: 480,
	182	height: 320,
	183	animatedZooms: true
	184	};
	185	var data = [
	186	[1, 10],
	187	[2, 15],
	188	[3, 10],
	189	[4, 15],
	190	[5, 10],
	191	[6, 15],
	192	[7, 10],
	193	[8, 15],
	194	[9, 10]
	195	];
196	var graph = document.getElementById("graph");
197	var g = new Dygraph(graph, data, opts);
198	g.updateOptions({showRangeSelector: true});
199	this.assertGraphExistence(g, graph);
200	assertFalse(g.getOption('animatedZooms'));
201	};
202
2871344a PF	203	RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() {
	204	var opts = {
	205	width: 480,
	206	height: 320,
	207	showRangeSelector: true
	208	};
	209	var data = [
	210	[1, 10],
	211	[2, 15],
	212	[3, 10],
	213	[4, 15],
	214	[5, 10],
	215	[6, 15],
	216	[7, 10],
	217	[8, 15],
	218	[9, 10]
	219	];
	220	var graph = document.getElementById("graph");
	221	var g = new Dygraph(graph, data, opts);
	222	this.assertGraphExistence(g, graph);
	223	var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
	224
	225	// Move left zoomhandle in
	226	var xRange = g.xAxisRange().slice();
	227
	228	var mouseDownEvent = DygraphOps.createEvent({
	229	type : 'dragstart',
	230	detail: 1,
	231	clientX : 0,
	232	clientY : 0
	233	});
	234	zoomhandles[0].dispatchEvent(mouseDownEvent);
	235
	236	var mouseMoveEvent = DygraphOps.createEvent({
	237	type : 'mousemove',
	238	clientX : 20,
	239	clientY : 20
	240	});
	241	zoomhandles[0].dispatchEvent(mouseMoveEvent);
	242
	243	var mouseUpEvent = DygraphOps.createEvent({
	244	type : 'mouseup',
	245	detail: 1,
	246	clientX : 20,
	247	clientY : 20
	248	});
	249	zoomhandles[0].dispatchEvent(mouseUpEvent);
	250
	251	var newXRange = g.xAxisRange().slice();
	252	assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]);
	253	assertEquals('right zoomhandle should not have moved', xRange[1], newXRange[1]);
	254
	255	// Move right zoomhandle in
	256	xRange = newXRange;
	257
	258	mouseDownEvent = DygraphOps.createEvent({
	259	type : 'dragstart',
	260	detail: 1,
	261	clientX : 100,
	262	clientY : 100
	263	});
	264	zoomhandles[1].dispatchEvent(mouseDownEvent);
	265
	266	mouseMoveEvent = DygraphOps.createEvent({
267	type : 'mousemove',
268	clientX : 80,
269	clientY : 80
270	});
271	zoomhandles[1].dispatchEvent(mouseMoveEvent);
272
273	mouseUpEvent = DygraphOps.createEvent({
274	type : 'mouseup',
275	detail: 1,
276	clientX : 80,
277	clientY : 80
278	});
279	zoomhandles[1].dispatchEvent(mouseUpEvent);
280
281	var newXRange = g.xAxisRange().slice();
282	assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
283	assertEquals('left zoomhandle should not have moved', xRange[0], newXRange[0]);
284
285	// Pan left
286	xRange = newXRange;
287	var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
288	var x = parseInt(zoomhandles[0].style.left) + 20;
289	var y = parseInt(zoomhandles[0].style.top);
290
291	mouseDownEvent = DygraphOps.createEvent({
292	type : 'mousedown',
293	detail: 1,
294	clientX : x,
295	clientY : y
296	});
297	fgcanvas.dispatchEvent(mouseDownEvent);
298
299	x -= 10;
300
301	mouseMoveEvent = DygraphOps.createEvent({
302	type : 'mousemove',
303	clientX : x,
304	clientY : y
305	});
306	fgcanvas.dispatchEvent(mouseMoveEvent);
307
308	mouseUpEvent = DygraphOps.createEvent({
309	type : 'mouseup',
310	detail: 1,
311	clientX : x,
312	clientY : y
313	});
314	fgcanvas.dispatchEvent(mouseUpEvent);
315
316	var newXRange = g.xAxisRange().slice();
317	assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]);
318	assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
319	};
320
3718778b DE	321
	322	RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
	323	var opts = {
	324	width: 480,
	325	height: 100,
	326	xAxisHeight: 30,
	327	drawXAxis: false,
	328	showRangeSelector: true,
	329	rangeSelectorHeight: 30
	330	};
	331	var data = [
	332	[0, 1],
	333	[10, 1]
	334	];
	335	var graph = document.getElementById("graph");
	336	var g = new Dygraph(graph, data, opts);
	337
	338	//assert, that the range selector is at top position 70 since the 30px of the
55cf43c3	339	// xAxis shouldn't be reserved since it isn't drawn.
3718778b DE	340	this.assertGraphExistence(g, graph);
	341	var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
	342	assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top);
	343	var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
	344	assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top);
	345	};
	346
ccd9d7c2 PF	347	RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
ccd9d7c2 PF	348	assertNotNull(g);
88c4a47e	349	var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
ccd9d7c2	350	assertEquals(2, zoomhandles.length);
88c4a47e	351	var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
ccd9d7c2	352	assertEquals(1, bgcanvas.length);
88c4a47e	353	var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
ccd9d7c2 PF	354	assertEquals(1, fgcanvas.length);
ccd9d7c2 PF	355	}