Fork off Karma file for in-browser debug
[dygraphs.git] / auto_tests / tests / stacked.js
1 /**
2 * @fileoverview Tests using the "stackedGraph" option.
3 *
4 * @author dan@dygraphs.com (Dan Vanderkam)
5 */
6 describe("stacked", function() {
7
8 var _origGetContext = Dygraph.getContext;
9
10 beforeEach(function() {
11 document.body.innerHTML = "<div id='graph'></div>";
12 Dygraph.getContext = function(canvas) {
13 return new Proxy(_origGetContext(canvas));
14 }
15 });
16
17 afterEach(function() {
18 Dygraph.getContext = _origGetContext;
19 });
20
21 it('testCorrectColors', function() {
22 var opts = {
23 width: 400,
24 height: 300,
25 stackedGraph: true,
26 axes : {
27 x : {
28 drawGrid: false,
29 drawAxis: false,
30 },
31 y : {
32 drawGrid: false,
33 drawAxis: false,
34 }
35 },
36 valueRange: [0, 3],
37 colors: ['#00ff00', '#0000ff'],
38 fillAlpha: 0.15
39 };
40 var data = "X,Y1,Y2\n" +
41 "0,1,1\n" +
42 "1,1,1\n" +
43 "2,1,1\n" +
44 "3,1,1\n"
45 ;
46
47 var graph = document.getElementById("graph");
48 var g = new Dygraph(graph, data, opts);
49
50 // y pixels 299-201 = y2 = transparent blue
51 // y pixel 200 = y2 line (blue)
52 // y pixels 199-101 = y1 = transparent green
53 // y pixel 100 = y1 line (green)
54 // y pixels 0-99 = nothing (white)
55
56 // 38 = round(0.15 * 255)
57 assert.deepEqual([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 250));
58 assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 150));
59 });
60
61 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
62 it('testSelectionValues', function() {
63 var opts = {
64 stackedGraph: true
65 };
66 var data = "X,Y1,Y2\n" +
67 "0,1,1\n" +
68 "1,1,1\n" +
69 "2,1,1\n" +
70 "3,1,1\n"
71 ;
72
73 var graph = document.getElementById("graph");
74 var g = new Dygraph(graph, data, opts);
75
76 g.setSelection(0);
77
78 assert.equal("0: Y1: 1 Y2: 1", Util.getLegend());
79
80 // Verify that the behavior is correct with highlightSeriesOpts as well.
81 g.updateOptions({
82 highlightSeriesOpts: {
83 strokeWidth: 10
84 }
85 });
86 g.setSelection(0);
87 assert.equal("0: Y1: 1 Y2: 1", Util.getLegend());
88
89 g.setSelection(1);
90 assert.equal("1: Y1: 1 Y2: 1", Util.getLegend());
91
92 g.setSelection(0, 'Y2');
93 assert.equal("0: Y1: 1 Y2: 1", Util.getLegend());
94 });
95
96 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
97 it('testDuplicatedXValue', function() {
98 var opts = {
99 stackedGraph: true,
100 fillAlpha: 0.15,
101 colors: ['#00ff00'],
102 width: 400,
103 height: 300
104 };
105 var data = "X,Y1\n" +
106 "0,1\n" +
107 "1,1\n" +
108 "2,1\n" +
109 "2,1\n" + // duplicate x-value!
110 "3,1\n"
111 ;
112
113 var graph = document.getElementById("graph");
114 var g = new Dygraph(graph, data, opts);
115
116 assert(g.yAxisRange()[1] < 2);
117
118 assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
119 assert.deepEqual([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
120 });
121
122 // Validates regression when null values in stacked graphs show up
123 // incorrectly in the legend.
124 it('testNullValues', function() {
125 var opts = {
126 stackedGraph: true,
127 stepPlot:true
128 };
129 var data = "X,Y1,Y2,Y3\n" +
130 "0,-5,-1,1\n" +
131 "1,1,,1\n" +
132 "2,1,2,3\n" +
133 "3,3,,4\n" +
134 "4,3,2,3\n"
135 ;
136
137 var graph = document.getElementById("graph");
138 var g = new Dygraph(graph, data, opts);
139
140 g.setSelection(0);
141 assert.equal("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());
142
143 g.setSelection(1);
144 assert.equal("1: Y1: 1 Y3: 1", Util.getLegend());
145
146 g.setSelection(2);
147 assert.equal("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());
148
149 g.setSelection(3);
150 assert.equal("3: Y1: 3 Y3: 4", Util.getLegend());
151
152 g.setSelection(4);
153 assert.equal("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
154 });
155
156 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
157 it('testMissingValueAtZero', function() {
158 var opts = {
159 stackedGraph: true
160 };
161 var data = "X,Y1,Y2\n" +
162 "0,,1\n" +
163 "1,1,2\n" +
164 "2,,3\n"
165 ;
166
167 var graph = document.getElementById("graph");
168 var g = new Dygraph(graph, data, opts);
169
170 g.setSelection(0);
171 assert.equal("0: Y2: 1", Util.getLegend());
172
173 g.setSelection(1);
174 assert.equal("1: Y1: 1 Y2: 2", Util.getLegend());
175
176 g.setSelection(2);
177 assert.equal("2: Y2: 3", Util.getLegend());
178 });
179
180 it('testInterpolation', function() {
181 var opts = {
182 colors: ['#ff0000', '#00ff00', '#0000ff'],
183 stackedGraph: true,
184 labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4']
185 };
186
187 // The last series is all-NaN, it ought to be treated as all zero
188 // for stacking purposes.
189 var N = NaN;
190 var data = [
191 [100, 1, 2, N, N],
192 [101, 1, 2, 2, N],
193 [102, 1, N, N, N],
194 [103, 1, 2, 4, N],
195 [104, N, N, N, N],
196 [105, 1, 2, N, N],
197 [106, 1, 2, 7, N],
198 [107, 1, 2, 8, N],
199 [108, 1, 2, 9, N],
200 [109, 1, N, N, N]];
201
202 var graph = document.getElementById("graph");
203 var g = new Dygraph(graph, data, opts);
204
205 var htx = g.hidden_ctx_;
206 var attrs = {};
207
208 // Check that lines are drawn at the expected positions, using
209 // interpolated values for missing data.
210 CanvasAssertions.assertLineDrawn(
211 htx, g.toDomCoords(100, 4), g.toDomCoords(101, 4), {strokeStyle: '#00ff00'});
212 CanvasAssertions.assertLineDrawn(
213 htx, g.toDomCoords(102, 6), g.toDomCoords(103, 7), {strokeStyle: '#ff0000'});
214 CanvasAssertions.assertLineDrawn(
215 htx, g.toDomCoords(107, 8), g.toDomCoords(108, 9), {strokeStyle: '#0000ff'});
216 CanvasAssertions.assertLineDrawn(
217 htx, g.toDomCoords(108, 12), g.toDomCoords(109, 12), {strokeStyle: '#ff0000'});
218
219 // Check that the expected number of line segments gets drawn
220 // for each series. Gaps don't get a line.
221 assert.equal(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
222 assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
223 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
224
225 // Check that the selection returns the original (non-stacked)
226 // values and skips gaps.
227 g.setSelection(1);
228 assert.equal("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
229
230 g.setSelection(8);
231 assert.equal("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
232
233 g.setSelection(9);
234 assert.equal("109: Y1: 1", Util.getLegend());
235 });
236
237 it('testInterpolationOptions', function() {
238 var opts = {
239 colors: ['#ff0000', '#00ff00', '#0000ff'],
240 stackedGraph: true,
241 labels: ['X', 'Y1', 'Y2', 'Y3']
242 };
243
244 var data = [
245 [100, 1, NaN, 3],
246 [101, 1, 2, 3],
247 [102, 1, NaN, 3],
248 [103, 1, 2, 3],
249 [104, 1, NaN, 3]];
250
251 var choices = ['all', 'inside', 'none'];
252 var stackedY = [
253 [6, 6, 6, 6, 6],
254 [4, 6, 6, 6, 4],
255 [4, 6, 4, 6, 4]];
256
257 for (var i = 0; i < choices.length; ++i) {
258 var graph = document.getElementById("graph");
259 opts['stackedGraphNaNFill'] = choices[i];
260 var g = new Dygraph(graph, data, opts);
261
262 var htx = g.hidden_ctx_;
263 var attrs = {};
264
265 // Check top lines get drawn at the expected positions.
266 for (var j = 0; j < stackedY[i].length - 1; ++j) {
267 CanvasAssertions.assertLineDrawn(
268 htx,
269 g.toDomCoords(100 + j, stackedY[i][j]),
270 g.toDomCoords(101 + j, stackedY[i][j + 1]),
271 {strokeStyle: '#ff0000'});
272 }
273 }
274 });
275
276 it('testMultiAxisInterpolation', function() {
277 // Setting 2 axes to test that each axis stacks separately
278 var opts = {
279 colors: ['#ff0000', '#00ff00', '#0000ff'],
280 stackedGraph: true,
281 series: {
282 'Y1': {
283 axis: 'y',
284 },
285 'Y2': {
286 axis: 'y',
287 },
288 'Y3': {
289 axis: 'y2',
290 },
291 'Y4': {
292 axis: 'y2',
293 }
294 },
295 labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4']
296 };
297
298 // The last series is all-NaN, it ought to be treated as all zero
299 // for stacking purposes.
300 var N = NaN;
301 var data = [
302 [100, 1, 2, N, N],
303 [101, 1, 2, 2, N],
304 [102, 1, N, N, N],
305 [103, 1, 2, 4, N],
306 [104, N, N, N, N],
307 [105, 1, 2, N, N],
308 [106, 1, 2, 7, N],
309 [107, 1, 2, 8, N],
310 [108, 1, 2, 9, N],
311 [109, 1, N, N, N]];
312
313 var graph = document.getElementById("graph");
314 var g = new Dygraph(graph, data, opts);
315
316 var htx = g.hidden_ctx_;
317 var attrs = {};
318
319 // Check that lines are drawn at the expected positions, using
320 // interpolated values for missing data.
321 CanvasAssertions.assertLineDrawn(
322 htx, g.toDomCoords(100, 2), g.toDomCoords(101, 2), {strokeStyle: '#00ff00'});
323 CanvasAssertions.assertLineDrawn(
324 htx, g.toDomCoords(102, 3), g.toDomCoords(103, 3), {strokeStyle: '#ff0000'});
325 CanvasAssertions.assertLineDrawn(
326 htx, g.toDomCoords(107, 2.71), g.toDomCoords(108, 3), {strokeStyle: '#0000ff'});
327 CanvasAssertions.assertLineDrawn(
328 htx, g.toDomCoords(108, 3), g.toDomCoords(109, 3), {strokeStyle: '#ff0000'});
329
330 // Check that the expected number of line segments gets drawn
331 // for each series. Gaps don't get a line.
332 assert.equal(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
333 assert.equal(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
334 assert.equal(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
335
336 // Check that the selection returns the original (non-stacked)
337 // values and skips gaps.
338 g.setSelection(1);
339 assert.equal("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
340
341 g.setSelection(8);
342 assert.equal("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
343
344 g.setSelection(9);
345 assert.equal("109: Y1: 1", Util.getLegend());
346 });
347
348 });