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

/**
 * @fileoverview Tests using the "stackedGraph" option.
 *
 * @author dan@dygraphs.com (Dan Vanderkam)
 */
var stackedTestCase = TestCase("stacked");

stackedTestCase._origGetContext = Dygraph.getContext;

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

stackedTestCase.prototype.tearDown = function() {
  Dygraph.getContext = stackedTestCase._origGetContext;
};

stackedTestCase.prototype.testCorrectColors = function() {
  var opts = {
    width: 400,
    height: 300,
    stackedGraph: true,
    drawXGrid: false,
    drawYGrid: false,
    drawXAxis: false,
    drawYAxis: false,
    valueRange: [0, 3],
    colors: ['#00ff00', '#0000ff'],
    fillAlpha: 0.15
  };
  var data = "X,Y1,Y2\n" +
      "0,1,1\n" +
      "1,1,1\n" +
      "2,1,1\n" +
      "3,1,1\n"
  ;

  var graph = document.getElementById("graph");
  var g = new Dygraph(graph, data, opts);

  // y pixels 299-201 = y2 = transparent blue
  // y pixel 200 = y2 line (blue)
  // y pixels 199-101 = y1 = transparent green
  // y pixel 100 = y1 line (green)
  // y pixels 0-99 = nothing (white)

  // TODO(danvk): factor this and getPixel() into a utility usable by all tests.
  var ctx = g.hidden_ctx_;
  var imageData = ctx.getImageData(0, 0, 400, 300);

  assertEquals(400, imageData.width);
  assertEquals(300, imageData.height);

  // returns an (r, g, b, alpha) tuple for the pixel.
  // values are in [0, 255].
  var getPixel = function(imageData, x, y) {
    var i = 4 * (x + imageData.width * y);
    var d = imageData.data;
    return [d[i], d[i+1], d[i+2], d[i+3]];
  };

  // 38 = round(0.15 * 255)
  assertEquals([0, 0, 255, 38], getPixel(imageData, 200, 250));
  assertEquals([0, 255, 0, 38], getPixel(imageData, 200, 150));
};

// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
stackedTestCase.prototype.testSelectionValues = function() {
  var opts = {
    stackedGraph: true
  };
  var data = "X,Y1,Y2\n" +
      "0,1,1\n" +
      "1,1,1\n" +
      "2,1,1\n" +
      "3,1,1\n"
  ;

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, data, opts);

  g.setSelection(0);

  assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());

  // Verify that the behavior is correct with highlightSeriesOpts as well.
  g.updateOptions({
    highlightSeriesOpts: {
      strokeWidth: 10
    }
  });
  g.setSelection(0);
  assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());

  g.setSelection(1);
  assertEquals("1: Y1: 1 Y2: 1", Util.getLegend());

  g.setSelection(0, 'Y2');
  assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
};

// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
stackedTestCase.prototype.testDuplicatedXValue = function() {
  var opts = {
    stackedGraph: true,
    fillAlpha: 0.15,
    colors: ['#00ff00'],
    width: 400,
    height: 300
  };
  var data = "X,Y1\n" +
      "0,1\n" +
      "1,1\n" +
      "2,1\n" +
      "2,1\n" +  // duplicate x-value!
      "3,1\n"
  ;

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, data, opts);

  assert(g.yAxisRange()[1] < 2);

  assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
  assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
}

// Validates regression when null values in stacked graphs show up
// incorrectly in the legend.
stackedTestCase.prototype.testNullValues = function() {
  var opts = {
    stackedGraph: true,
    stepPlot:true
  };
  var data = "X,Y1,Y2,Y3\n" +
      "0,-5,-1,1\n" +
      "1,1,,1\n" +
      "2,1,2,3\n" +
      "3,3,,4\n" +
      "4,3,2,3\n"
  ;

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, data, opts);

  g.setSelection(0);
  assertEquals("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());

  g.setSelection(1);
  assertEquals("1: Y1: 1 Y3: 1", Util.getLegend());

  g.setSelection(2);
  assertEquals("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());

  g.setSelection(3);
  assertEquals("3: Y1: 3 Y3: 4", Util.getLegend());

  g.setSelection(4);
  assertEquals("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
};

// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
stackedTestCase.prototype.testMissingValueAtZero = function() {
  var opts = {
    stackedGraph: true
  };
  var data = "X,Y1,Y2\n" +
      "0,,1\n" +
      "1,1,2\n" +
      "2,,3\n"
  ;

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, data, opts);

  g.setSelection(0);
  assertEquals("0: Y2: 1", Util.getLegend());

  g.setSelection(1);
  assertEquals("1: Y1: 1 Y2: 2", Util.getLegend());

  g.setSelection(2);
  assertEquals("2: Y2: 3", Util.getLegend());
};

stackedTestCase.prototype.testInterpolation = function() {
  var opts = {
    colors: ['#ff0000', '#00ff00', '#0000ff'],
    stackedGraph: true
  };

  // The last series is all-NaN, it ought to be treated as all zero
  // for stacking purposes.
  var N = NaN;
  var data = [
    [100, 1, 2, N, N],
    [101, 1, 2, 2, N],
    [102, 1, N, N, N],
    [103, 1, 2, 4, N],
    [104, N, N, N, N],
    [105, 1, 2, N, N],
    [106, 1, 2, 7, N],
    [107, 1, 2, 8, N],
    [108, 1, 2, 9, N],
    [109, 1, N, N, N]];

  var graph = document.getElementById("graph");
  g = new Dygraph(graph, data, opts);

  var htx = g.hidden_ctx_;
  var attrs = {};

  // Check that lines are drawn at the expected positions, using
  // interpolated values for missing data.
  CanvasAssertions.assertLineDrawn(
      htx, g.toDomCoords(100, 4), g.toDomCoords(101, 4), {strokeStyle: '#00ff00'});
  CanvasAssertions.assertLineDrawn(
      htx, g.toDomCoords(102, 6), g.toDomCoords(103, 7), {strokeStyle: '#ff0000'});
  CanvasAssertions.assertLineDrawn(
      htx, g.toDomCoords(107, 8), g.toDomCoords(108, 9), {strokeStyle: '#0000ff'});
  CanvasAssertions.assertLineDrawn(
      htx, g.toDomCoords(108, 12), g.toDomCoords(109, 12), {strokeStyle: '#ff0000'});

  // Check that the expected number of line segments gets drawn
  // for each series. Gaps don't get a line.
  assertEquals(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
  assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
  assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));

  // Check that the selection returns the original (non-stacked)
  // values and skips gaps.
  g.setSelection(1);
  assertEquals("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());

  g.setSelection(8);
  assertEquals("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());

  g.setSelection(9);
  assertEquals("109: Y1: 1", Util.getLegend());
};

stackedTestCase.prototype.testInterpolationOptions = function() {
  var opts = {
    colors: ['#ff0000', '#00ff00', '#0000ff'],
    stackedGraph: true
  };

  var data = [
    [100, 1, NaN, 3],
    [101, 1, 2, 3],
    [102, 1, NaN, 3],
    [103, 1, 2, 3],
    [104, 1, NaN, 3]];

  var choices = ['all', 'inside', 'none'];
  var stackedY = [
    [6, 6, 6, 6, 6],
    [4, 6, 6, 6, 4],
    [4, 6, 4, 6, 4]];

  for (var i = 0; i < choices.length; ++i) {
    var graph = document.getElementById("graph");
    opts['stackedGraphNaNFill'] = choices[i];
    g = new Dygraph(graph, data, opts);

    var htx = g.hidden_ctx_;
    var attrs = {};

    // Check top lines get drawn at the expected positions.
    for (var j = 0; j < stackedY[i].length - 1; ++j) {
      CanvasAssertions.assertLineDrawn(
          htx,
          g.toDomCoords(100 + j, stackedY[i][j]),
          g.toDomCoords(101 + j, stackedY[i][j + 1]),
          {strokeStyle: '#ff0000'});
    }
  }
};
Commit	Line	Data
890e2a37 DV	1	/**
	2	* @fileoverview Tests using the "stackedGraph" option.
	3	*
	4	* @author dan@dygraphs.com (Dan Vanderkam)
	5	*/
	6	var stackedTestCase = TestCase("stacked");
	7
30a5cfc6 KW	8	stackedTestCase._origGetContext = Dygraph.getContext;
30a5cfc6 KW	9
890e2a37 DV	10	stackedTestCase.prototype.setUp = function() {
890e2a37 DV	11	document.body.innerHTML = "<div id='graph'></div>";
30a5cfc6 KW	12	Dygraph.getContext = function(canvas) {
	13	return new Proxy(stackedTestCase._origGetContext(canvas));
	14	}
890e2a37 DV	15	};
	16
	17	stackedTestCase.prototype.tearDown = function() {
30a5cfc6	18	Dygraph.getContext = stackedTestCase._origGetContext;
890e2a37 DV	19	};
	20
	21	stackedTestCase.prototype.testCorrectColors = function() {
	22	var opts = {
	23	width: 400,
	24	height: 300,
	25	stackedGraph: true,
	26	drawXGrid: false,
	27	drawYGrid: false,
	28	drawXAxis: false,
	29	drawYAxis: false,
	30	valueRange: [0, 3],
	31	colors: ['#00ff00', '#0000ff'],
	32	fillAlpha: 0.15
	33	};
	34	var data = "X,Y1,Y2\n" +
	35	"0,1,1\n" +
	36	"1,1,1\n" +
	37	"2,1,1\n" +
	38	"3,1,1\n"
	39	;
	40
	41	var graph = document.getElementById("graph");
	42	var g = new Dygraph(graph, data, opts);
	43
	44	// y pixels 299-201 = y2 = transparent blue
	45	// y pixel 200 = y2 line (blue)
	46	// y pixels 199-101 = y1 = transparent green
	47	// y pixel 100 = y1 line (green)
	48	// y pixels 0-99 = nothing (white)
	49
debdb88d DV	50	// TODO(danvk): factor this and getPixel() into a utility usable by all tests.
	51	var ctx = g.hidden_ctx_;
	52	var imageData = ctx.getImageData(0, 0, 400, 300);
890e2a37 DV	53
	54	assertEquals(400, imageData.width);
	55	assertEquals(300, imageData.height);
	56
	57	// returns an (r, g, b, alpha) tuple for the pixel.
	58	// values are in [0, 255].
	59	var getPixel = function(imageData, x, y) {
	60	var i = 4 * (x + imageData.width * y);
	61	var d = imageData.data;
	62	return [d[i], d[i+1], d[i+2], d[i+3]];
	63	};
	64
	65	// 38 = round(0.15 * 255)
	66	assertEquals([0, 0, 255, 38], getPixel(imageData, 200, 250));
	67	assertEquals([0, 255, 0, 38], getPixel(imageData, 200, 150));
890e2a37	68	};
9b3d9459 DV	69
	70	// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
	71	stackedTestCase.prototype.testSelectionValues = function() {
	72	var opts = {
	73	stackedGraph: true
	74	};
	75	var data = "X,Y1,Y2\n" +
	76	"0,1,1\n" +
	77	"1,1,1\n" +
	78	"2,1,1\n" +
	79	"3,1,1\n"
	80	;
	81
	82	var graph = document.getElementById("graph");
	83	g = new Dygraph(graph, data, opts);
	84
	85	g.setSelection(0);
	86
79aabc9d	87	assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
9b3d9459 DV	88
	89	// Verify that the behavior is correct with highlightSeriesOpts as well.
	90	g.updateOptions({
	91	highlightSeriesOpts: {
	92	strokeWidth: 10
	93	}
	94	});
fa11f4e4 DV	95	g.setSelection(0);
	96	assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
	97
9b3d9459	98	g.setSelection(1);
79aabc9d	99	assertEquals("1: Y1: 1 Y2: 1", Util.getLegend());
9b3d9459 DV	100
9b3d9459 DV	101	g.setSelection(0, 'Y2');
79aabc9d	102	assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
9b3d9459	103	};
12b879f4 DV	104
	105	// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
	106	stackedTestCase.prototype.testDuplicatedXValue = function() {
	107	var opts = {
	108	stackedGraph: true,
	109	fillAlpha: 0.15,
	110	colors: ['#00ff00'],
	111	width: 400,
	112	height: 300
	113	};
	114	var data = "X,Y1\n" +
	115	"0,1\n" +
	116	"1,1\n" +
	117	"2,1\n" +
	118	"2,1\n" + // duplicate x-value!
	119	"3,1\n"
	120	;
	121
	122	var graph = document.getElementById("graph");
	123	g = new Dygraph(graph, data, opts);
	124
	125	assert(g.yAxisRange()[1] < 2);
	126
	127	assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
	128	assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
	129	}
907121a8 VS	130
	131	// Validates regression when null values in stacked graphs show up
	132	// incorrectly in the legend.
	133	stackedTestCase.prototype.testNullValues = function() {
	134	var opts = {
	135	stackedGraph: true,
	136	stepPlot:true
	137	};
	138	var data = "X,Y1,Y2,Y3\n" +
	139	"0,-5,-1,1\n" +
	140	"1,1,,1\n" +
	141	"2,1,2,3\n" +
	142	"3,3,,4\n" +
	143	"4,3,2,3\n"
	144	;
	145
	146	var graph = document.getElementById("graph");
	147	g = new Dygraph(graph, data, opts);
	148
	149	g.setSelection(0);
	150	assertEquals("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());
	151
	152	g.setSelection(1);
	153	assertEquals("1: Y1: 1 Y3: 1", Util.getLegend());
	154
	155	g.setSelection(2);
	156	assertEquals("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());
	157
	158	g.setSelection(3);
	159	assertEquals("3: Y1: 3 Y3: 4", Util.getLegend());
	160
	161	g.setSelection(4);
	162	assertEquals("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
	163	};
cc87e270 VS	164
	165	// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
	166	stackedTestCase.prototype.testMissingValueAtZero = function() {
	167	var opts = {
	168	stackedGraph: true
	169	};
	170	var data = "X,Y1,Y2\n" +
	171	"0,,1\n" +
	172	"1,1,2\n" +
	173	"2,,3\n"
	174	;
	175
	176	var graph = document.getElementById("graph");
	177	g = new Dygraph(graph, data, opts);
	178
	179	g.setSelection(0);
	180	assertEquals("0: Y2: 1", Util.getLegend());
	181
	182	g.setSelection(1);
	183	assertEquals("1: Y1: 1 Y2: 2", Util.getLegend());
	184
	185	g.setSelection(2);
	186	assertEquals("2: Y2: 3", Util.getLegend());
	187	};
30a5cfc6 KW	188
	189	stackedTestCase.prototype.testInterpolation = function() {
	190	var opts = {
	191	colors: ['#ff0000', '#00ff00', '#0000ff'],
	192	stackedGraph: true
	193	};
	194
	195	// The last series is all-NaN, it ought to be treated as all zero
	196	// for stacking purposes.
	197	var N = NaN;
	198	var data = [
	199	[100, 1, 2, N, N],
	200	[101, 1, 2, 2, N],
	201	[102, 1, N, N, N],
	202	[103, 1, 2, 4, N],
	203	[104, N, N, N, N],
	204	[105, 1, 2, N, N],
	205	[106, 1, 2, 7, N],
	206	[107, 1, 2, 8, N],
	207	[108, 1, 2, 9, N],
	208	[109, 1, N, N, N]];
	209
	210	var graph = document.getElementById("graph");
	211	g = new Dygraph(graph, data, opts);
	212
	213	var htx = g.hidden_ctx_;
	214	var attrs = {};
	215
	216	// Check that lines are drawn at the expected positions, using
	217	// interpolated values for missing data.
	218	CanvasAssertions.assertLineDrawn(
	219	htx, g.toDomCoords(100, 4), g.toDomCoords(101, 4), {strokeStyle: '#00ff00'});
	220	CanvasAssertions.assertLineDrawn(
	221	htx, g.toDomCoords(102, 6), g.toDomCoords(103, 7), {strokeStyle: '#ff0000'});
	222	CanvasAssertions.assertLineDrawn(
	223	htx, g.toDomCoords(107, 8), g.toDomCoords(108, 9), {strokeStyle: '#0000ff'});
	224	CanvasAssertions.assertLineDrawn(
	225	htx, g.toDomCoords(108, 12), g.toDomCoords(109, 12), {strokeStyle: '#ff0000'});
	226
	227	// Check that the expected number of line segments gets drawn
	228	// for each series. Gaps don't get a line.
	229	assertEquals(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
	230	assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
	231	assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
	232
	233	// Check that the selection returns the original (non-stacked)
	234	// values and skips gaps.
	235	g.setSelection(1);
	236	assertEquals("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
	237
	238	g.setSelection(8);
	239	assertEquals("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
	240
	241	g.setSelection(9);
	242	assertEquals("109: Y1: 1", Util.getLegend());
	243	};
	244
	245	stackedTestCase.prototype.testInterpolationOptions = function() {
	246	var opts = {
	247	colors: ['#ff0000', '#00ff00', '#0000ff'],
	248	stackedGraph: true
	249	};
	250
	251	var data = [
252	[100, 1, NaN, 3],
253	[101, 1, 2, 3],
254	[102, 1, NaN, 3],
255	[103, 1, 2, 3],
256	[104, 1, NaN, 3]];
257
258	var choices = ['all', 'inside', 'none'];
259	var stackedY = [
260	[6, 6, 6, 6, 6],
261	[4, 6, 6, 6, 4],
262	[4, 6, 4, 6, 4]];
263
264	for (var i = 0; i < choices.length; ++i) {
265	var graph = document.getElementById("graph");
266	opts['stackedGraphNaNFill'] = choices[i];
267	g = new Dygraph(graph, data, opts);
268
269	var htx = g.hidden_ctx_;
270	var attrs = {};
271
272	// Check top lines get drawn at the expected positions.
273	for (var j = 0; j < stackedY[i].length - 1; ++j) {
274	CanvasAssertions.assertLineDrawn(
275	htx,
276	g.toDomCoords(100 + j, stackedY[i][j]),
277	g.toDomCoords(101 + j, stackedY[i][j + 1]),
278	{strokeStyle: '#ff0000'});
279	}
280	}
281	};