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