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

// Copyright (c) 2012 Google, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

/** 
 * @fileoverview Test cases for drawing lines with missing points.
 *
 * @author konigsberg@google.com (Robert Konigsberg)
 */
var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]];

var MissingPointsTestCase = TestCase("missing-points");

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

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

MissingPointsTestCase.prototype.testSeparatedPointsDontDraw = function() {
  var graph = document.getElementById("graph");
  var g = new Dygraph(
      graph,
      [[1, 10, 11],
       [2, 11, null],
       [3, 12, 13]],
      { colors: ['red', 'blue']});
  var htx = g.hidden_ctx_;
  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  assertEquals(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
};

MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded = function() {
  var graph = document.getElementById("graph");
  var g = new Dygraph(
      graph,
      [[0, 10],
       [1, 11],
       [2, null],
       [3, 13],
       [4, 14]],
      { colors: ['blue']});
  var htx = g.hidden_ctx_;

  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212],
      { strokeStyle: '#0000ff', });
  CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25],
      { strokeStyle: '#0000ff', });
};

MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded_connected = function() {
  var graph = document.getElementById("graph");
  var g = new Dygraph(
      graph,
      [[0, 10],
       [1, 11],
       [2, null],
       [3, 13],
       [4, 14]],
      { colors: ['blue'], connectSeparatedPoints: true});
  var htx = g.hidden_ctx_;
  var num_lines = 0;

  assertEquals(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [[56, 275], [161, 212], [370, 87], [475, 25]],
      { strokeStyle: '#0000ff' });
};

/**
 * At the time of writing this test, the blue series is only points, and not lines.
 */
MissingPointsTestCase.prototype.testConnectSeparatedPoints = function() {
  var g = new Dygraph(
    document.getElementById("graph"),
    [
      [1, null, 3],
      [2, 2, null],
      [3, null, 7],
      [4, 5, null],
      [5, null, 5],
      [6, 3, null]
    ],
    {
      connectSeparatedPoints: true,
      drawPoints: true,
      colors: ['red', 'blue']
    }
  );

  var htx = g.hidden_ctx_;

  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [[56, 225], [223, 25], [391, 125]],
      { strokeStyle: '#0000ff' });

  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [[140, 275], [307, 125], [475, 225]],
      { strokeStyle: '#ff0000' });
};

/**
 * At the time of writing this test, the blue series is only points, and not lines.
 */
MissingPointsTestCase.prototype.testConnectSeparatedPointsWithNan = function() {
  var g = new Dygraph(
    document.getElementById("graph"),
    "x,A,B  \n" +
    "1,,3   \n" +
    "2,2,   \n" +
    "3,,5   \n" +
    "4,4,   \n" +
    "5,,7   \n" +
    "6,NaN, \n" +
    "8,8,   \n" +
    "10,10, \n",
    {
      connectSeparatedPoints: true,
      drawPoints: true,
      colors: ['red', 'blue']
    }
  );

  var htx = g.hidden_ctx_;

  // Red has two disconnected line segments
  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' });
  CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' });

  // Blue's lines are consecutive, however.
  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [[56, 244], [149, 181], [242, 118]],
      { strokeStyle: '#0000ff' });
};

/* These lines contain awesome powa!  
  var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"});
  for (var idx = 0; idx < lines.length; idx++) {
    var line = lines[idx];
    console.log(line[0].args, line[1].args, line[0].properties.strokeStyle);
  }
*/

MissingPointsTestCase.prototype.testErrorBarsWithMissingPoints = function() {
  var data = [
              [1, [2,1]],
              [2, [3,1]],
              [3, null],
              [4, [5,1]],
              [5, [4,1]],
              [6, [null,null]],
             ];
  var g = new Dygraph(
    document.getElementById("graph"),
    data,
    {
      errorBars: true,
      colors: ['red']
    }
  );

  var htx = g.hidden_ctx_;

  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));

  var p0 = g.toDomCoords(data[0][0], data[0][1][0]);
  var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
  var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
  var p3 = g.toDomCoords(data[4][0], data[4][1][0]);
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [p0, p1], { strokeStyle: '#ff0000' });
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [p2, p3], { strokeStyle: '#ff0000' });
};

MissingPointsTestCase.prototype.testErrorBarsWithMissingPointsConnected = function() {
  var data = [
              [1, [null,1]],
              [2, [2,1]],
              [3, null],
              [4, [5,1]],
              [5, [null,null]],
              [6, [3,1]]
             ];
  var g = new Dygraph(
    document.getElementById("graph"),
    data,
    {
      connectSeparatedPoints: true,
      drawPoints: true,
      errorBars: true,
      colors: ['red']
    }
  );

  var htx = g.hidden_ctx_;
  
  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));

  var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
  var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
  var p3 = g.toDomCoords(data[5][0], data[5][1][0]);
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [p1, p2, p3],
      { strokeStyle: '#ff0000' });
};
MissingPointsTestCase.prototype.testCustomBarsWithMissingPoints = function() {
  var data = [
              [1, [1,2,3]],
              [2, [2,3,4]],
              [3, null],
              [4, [4,5,6]],
              [5, [3,4,5]],
              [6, [null,null,null]],
              [7, [2,3,4]],
              [8, [1,2,3]],
              [9, NaN],
              [10, [2,3,4]],
              [11, [3,4,5]],
              [12, [NaN,NaN,NaN]]
             ];
  var g = new Dygraph(
    document.getElementById("graph"),
    data,
    {
      customBars: true,
      colors: ['red']
    }
  );

  var htx = g.hidden_ctx_;

  assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));

  var p0 = g.toDomCoords(data[0][0], data[0][1][1]);
  var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
  CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
  
  p0 = g.toDomCoords(data[3][0], data[3][1][1]);
  p1 = g.toDomCoords(data[4][0], data[4][1][1]);
  CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });

  p0 = g.toDomCoords(data[6][0], data[6][1][1]);
  p1 = g.toDomCoords(data[7][0], data[7][1][1]);
  CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });;

  p0 = g.toDomCoords(data[9][0], data[9][1][1]);
  p1 = g.toDomCoords(data[10][0], data[10][1][1]);
  CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
};

MissingPointsTestCase.prototype.testCustomBarsWithMissingPointsConnected = function() {
  var data = [
              [1, [1,null,1]],
              [2, [1,2,3]],
              [3, null],
              [4, [4,5,6]],
              [5, [null,null,null]],
              [6, [2,3,4]]
             ];
  var g = new Dygraph(
    document.getElementById("graph"),
    data,
    {
      connectSeparatedPoints: true,
      drawPoints: true,
      customBars: true,
      colors: ['red']
    }
  );

  var htx = g.hidden_ctx_;
  
  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));

  var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
  var p2 = g.toDomCoords(data[3][0], data[3][1][1]);
  var p3 = g.toDomCoords(data[5][0], data[5][1][1]);
  CanvasAssertions.assertConsecutiveLinesDrawn(htx, 
      [p1, p2, p3],
      { strokeStyle: '#ff0000' });
};
Commit	Line	Data
	1	// Copyright (c) 2012 Google, Inc.
	2	//
	3	// Permission is hereby granted, free of charge, to any person obtaining a copy
	4	// of this software and associated documentation files (the "Software"), to deal
	5	// in the Software without restriction, including without limitation the rights
	6	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	7	// copies of the Software, and to permit persons to whom the Software is
	8	// furnished to do so, subject to the following conditions:
	9	//
	10	// The above copyright notice and this permission notice shall be included in
	11	// all copies or substantial portions of the Software.
	12	//
	13	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	14	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	15	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	16	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	17	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	18	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	19	// THE SOFTWARE.
	20
	21	/**
	22	* @fileoverview Test cases for drawing lines with missing points.
	23	*
	24	* @author konigsberg@google.com (Robert Konigsberg)
	25	*/
	26	var ZERO_TO_FIFTY = [[ 10, 0 ] , [ 20, 50 ]];
	27
	28	var MissingPointsTestCase = TestCase("missing-points");
	29
	30	MissingPointsTestCase._origFunc = Dygraph.getContext;
	31	MissingPointsTestCase.prototype.setUp = function() {
	32	document.body.innerHTML = "<div id='graph'></div>";
	33	Dygraph.getContext = function(canvas) {
	34	return new Proxy(MissingPointsTestCase._origFunc(canvas));
	35	}
	36	};
	37
	38	MissingPointsTestCase.prototype.tearDown = function() {
	39	Dygraph.getContext = MissingPointsTestCase._origFunc;
	40	};
	41
	42	MissingPointsTestCase.prototype.testSeparatedPointsDontDraw = function() {
	43	var graph = document.getElementById("graph");
	44	var g = new Dygraph(
	45	graph,
	46	[[1, 10, 11],
	47	[2, 11, null],
	48	[3, 12, 13]],
	49	{ colors: ['red', 'blue']});
	50	var htx = g.hidden_ctx_;
	51	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	52	assertEquals(0, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
	53	};
	54
	55	MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded = function() {
	56	var graph = document.getElementById("graph");
	57	var g = new Dygraph(
	58	graph,
	59	[[0, 10],
	60	[1, 11],
	61	[2, null],
	62	[3, 13],
	63	[4, 14]],
	64	{ colors: ['blue']});
	65	var htx = g.hidden_ctx_;
	66
	67	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
	68	CanvasAssertions.assertLineDrawn(htx, [56, 275], [161, 212],
	69	{ strokeStyle: '#0000ff', });
	70	CanvasAssertions.assertLineDrawn(htx, [370, 87], [475, 25],
	71	{ strokeStyle: '#0000ff', });
	72	};
	73
	74	MissingPointsTestCase.prototype.testSeparatedPointsDontDraw_expanded_connected = function() {
	75	var graph = document.getElementById("graph");
	76	var g = new Dygraph(
	77	graph,
	78	[[0, 10],
	79	[1, 11],
	80	[2, null],
	81	[3, 13],
	82	[4, 14]],
	83	{ colors: ['blue'], connectSeparatedPoints: true});
	84	var htx = g.hidden_ctx_;
	85	var num_lines = 0;
	86
	87	assertEquals(3, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
	88	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	89	[[56, 275], [161, 212], [370, 87], [475, 25]],
	90	{ strokeStyle: '#0000ff' });
	91	};
	92
	93	/**
	94	* At the time of writing this test, the blue series is only points, and not lines.
	95	*/
	96	MissingPointsTestCase.prototype.testConnectSeparatedPoints = function() {
	97	var g = new Dygraph(
	98	document.getElementById("graph"),
	99	[
	100	[1, null, 3],
	101	[2, 2, null],
	102	[3, null, 7],
	103	[4, 5, null],
	104	[5, null, 5],
	105	[6, 3, null]
	106	],
	107	{
	108	connectSeparatedPoints: true,
	109	drawPoints: true,
	110	colors: ['red', 'blue']
	111	}
	112	);
	113
	114	var htx = g.hidden_ctx_;
	115
	116	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
	117	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	118	[[56, 225], [223, 25], [391, 125]],
	119	{ strokeStyle: '#0000ff' });
	120
	121	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	122	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	123	[[140, 275], [307, 125], [475, 225]],
	124	{ strokeStyle: '#ff0000' });
	125	};
	126
	127	/**
	128	* At the time of writing this test, the blue series is only points, and not lines.
	129	*/
	130	MissingPointsTestCase.prototype.testConnectSeparatedPointsWithNan = function() {
	131	var g = new Dygraph(
	132	document.getElementById("graph"),
	133	"x,A,B \n" +
	134	"1,,3 \n" +
	135	"2,2, \n" +
	136	"3,,5 \n" +
	137	"4,4, \n" +
	138	"5,,7 \n" +
	139	"6,NaN, \n" +
	140	"8,8, \n" +
	141	"10,10, \n",
	142	{
	143	connectSeparatedPoints: true,
	144	drawPoints: true,
	145	colors: ['red', 'blue']
	146	}
	147	);
	148
	149	var htx = g.hidden_ctx_;
	150
	151	// Red has two disconnected line segments
	152	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	153	CanvasAssertions.assertLineDrawn(htx, [102, 275], [195, 212], { strokeStyle: '#ff0000' });
	154	CanvasAssertions.assertLineDrawn(htx, [381, 87], [475, 25], { strokeStyle: '#ff0000' });
	155
	156	// Blue's lines are consecutive, however.
	157	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
	158	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	159	[[56, 244], [149, 181], [242, 118]],
	160	{ strokeStyle: '#0000ff' });
	161	};
	162
	163	/* These lines contain awesome powa!
	164	var lines = CanvasAssertions.getLinesDrawn(htx, {strokeStyle: "#0000ff"});
	165	for (var idx = 0; idx < lines.length; idx++) {
	166	var line = lines[idx];
	167	console.log(line[0].args, line[1].args, line[0].properties.strokeStyle);
	168	}
	169	*/
	170
	171	MissingPointsTestCase.prototype.testErrorBarsWithMissingPoints = function() {
	172	var data = [
	173	[1, [2,1]],
	174	[2, [3,1]],
	175	[3, null],
	176	[4, [5,1]],
	177	[5, [4,1]],
	178	[6, [null,null]],
	179	];
	180	var g = new Dygraph(
	181	document.getElementById("graph"),
	182	data,
	183	{
	184	errorBars: true,
	185	colors: ['red']
	186	}
	187	);
	188
	189	var htx = g.hidden_ctx_;
	190
	191	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	192
	193	var p0 = g.toDomCoords(data[0][0], data[0][1][0]);
	194	var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
	195	var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
	196	var p3 = g.toDomCoords(data[4][0], data[4][1][0]);
	197	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	198	[p0, p1], { strokeStyle: '#ff0000' });
	199	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	200	[p2, p3], { strokeStyle: '#ff0000' });
	201	};
	202
	203	MissingPointsTestCase.prototype.testErrorBarsWithMissingPointsConnected = function() {
	204	var data = [
	205	[1, [null,1]],
	206	[2, [2,1]],
	207	[3, null],
	208	[4, [5,1]],
	209	[5, [null,null]],
	210	[6, [3,1]]
	211	];
	212	var g = new Dygraph(
	213	document.getElementById("graph"),
	214	data,
	215	{
	216	connectSeparatedPoints: true,
	217	drawPoints: true,
	218	errorBars: true,
	219	colors: ['red']
	220	}
	221	);
	222
	223	var htx = g.hidden_ctx_;
	224
	225	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	226
	227	var p1 = g.toDomCoords(data[1][0], data[1][1][0]);
	228	var p2 = g.toDomCoords(data[3][0], data[3][1][0]);
	229	var p3 = g.toDomCoords(data[5][0], data[5][1][0]);
	230	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	231	[p1, p2, p3],
	232	{ strokeStyle: '#ff0000' });
	233	};
	234	MissingPointsTestCase.prototype.testCustomBarsWithMissingPoints = function() {
	235	var data = [
	236	[1, [1,2,3]],
	237	[2, [2,3,4]],
	238	[3, null],
	239	[4, [4,5,6]],
	240	[5, [3,4,5]],
	241	[6, [null,null,null]],
	242	[7, [2,3,4]],
	243	[8, [1,2,3]],
	244	[9, NaN],
	245	[10, [2,3,4]],
	246	[11, [3,4,5]],
	247	[12, [NaN,NaN,NaN]]
	248	];
	249	var g = new Dygraph(
	250	document.getElementById("graph"),
	251	data,
	252	{
	253	customBars: true,
	254	colors: ['red']
	255	}
	256	);
	257
	258	var htx = g.hidden_ctx_;
	259
	260	assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	261
	262	var p0 = g.toDomCoords(data[0][0], data[0][1][1]);
	263	var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
	264	CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
	265
	266	p0 = g.toDomCoords(data[3][0], data[3][1][1]);
	267	p1 = g.toDomCoords(data[4][0], data[4][1][1]);
	268	CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
	269
	270	p0 = g.toDomCoords(data[6][0], data[6][1][1]);
	271	p1 = g.toDomCoords(data[7][0], data[7][1][1]);
	272	CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });;
	273
	274	p0 = g.toDomCoords(data[9][0], data[9][1][1]);
	275	p1 = g.toDomCoords(data[10][0], data[10][1][1]);
	276	CanvasAssertions.assertLineDrawn(htx, p0, p1, { strokeStyle: '#ff0000' });
	277	};
	278
	279	MissingPointsTestCase.prototype.testCustomBarsWithMissingPointsConnected = function() {
	280	var data = [
	281	[1, [1,null,1]],
	282	[2, [1,2,3]],
	283	[3, null],
	284	[4, [4,5,6]],
	285	[5, [null,null,null]],
	286	[6, [2,3,4]]
	287	];
	288	var g = new Dygraph(
	289	document.getElementById("graph"),
	290	data,
	291	{
	292	connectSeparatedPoints: true,
	293	drawPoints: true,
	294	customBars: true,
	295	colors: ['red']
	296	}
	297	);
	298
	299	var htx = g.hidden_ctx_;
	300
	301	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	302
	303	var p1 = g.toDomCoords(data[1][0], data[1][1][1]);
	304	var p2 = g.toDomCoords(data[3][0], data[3][1][1]);
	305	var p3 = g.toDomCoords(data[5][0], data[5][1][1]);
	306	CanvasAssertions.assertConsecutiveLinesDrawn(htx,
	307	[p1, p2, p3],
	308	{ strokeStyle: '#ff0000' });
	309	};