Commit | Line | Data |
---|---|---|
1c6b239c | 1 | /** |
2 | * @fileoverview Test cases for the callbacks. | |
3 | * | |
4 | * @author uemit.seren@gmail.com (Ümit Seren) | |
5 | */ | |
6 | ||
7 | var CallbackTestCase = TestCase("callback"); | |
8 | ||
9 | CallbackTestCase.prototype.setUp = function() { | |
857a6931 KW |
10 | document.body.innerHTML = "<div id='graph'></div><div id='selection'></div>"; |
11 | this.styleSheet = document.createElement("style"); | |
12 | this.styleSheet.type = "text/css"; | |
13 | document.getElementsByTagName("head")[0].appendChild(this.styleSheet); | |
1c6b239c | 14 | }; |
15 | ||
16 | CallbackTestCase.prototype.tearDown = function() { | |
17 | }; | |
475f7420 KW |
18 | |
19 | var data = "X,a\,b,c\n" + | |
1c6b239c | 20 | "10,-1,1,2\n" + |
21 | "11,0,3,1\n" + | |
22 | "12,1,4,2\n" + | |
23 | "13,0,2,3\n"; | |
857a6931 | 24 | |
475f7420 KW |
25 | |
26 | /** | |
27 | * This tests that when the function idxToRow_ returns the proper row and the onHiglightCallback | |
28 | * is properly called when the first series is hidden (setVisibility = false) | |
29 | * | |
30 | */ | |
31 | CallbackTestCase.prototype.testHighlightCallbackIsCalled = function() { | |
32 | var h_row; | |
33 | var h_pts; | |
34 | ||
35 | var highlightCallback = function(e, x, pts, row) { | |
36 | h_row = row; | |
37 | h_pts = pts; | |
38 | }; | |
39 | ||
40 | var graph = document.getElementById("graph"); | |
41 | var g = new Dygraph(graph, data, | |
42 | { | |
43 | width: 100, | |
44 | height: 100, | |
45 | visibility: [false, true, true], | |
46 | highlightCallback: highlightCallback | |
47 | }); | |
48 | ||
49 | DygraphOps.dispatchMouseMove(g, 13, 10); | |
50 | ||
51 | //check correct row is returned | |
52 | assertEquals(3, h_row); | |
53 | //check there are only two points (because first series is hidden) | |
54 | assertEquals(2, h_pts.length); | |
55 | }; | |
56 | ||
57 | /** | |
58 | * Test the closest-series highlighting methods for normal and stacked modes. | |
59 | * Also pass in line widths for plain and highlighted lines for easier visual | |
60 | * confirmation that the highlighted line is drawn on top of the others. | |
61 | */ | |
857a6931 KW |
62 | var runClosestTest = function(isStacked, widthNormal, widthHighlighted) { |
63 | var h_row; | |
64 | var h_pts; | |
65 | var h_series; | |
66 | ||
67 | var graph = document.getElementById("graph"); | |
68 | var g = new Dygraph(graph, data, | |
69 | { | |
70 | width: 600, | |
475f7420 | 71 | height: 400, |
857a6931 KW |
72 | visibility: [false, true, true], |
73 | stackedGraph: isStacked, | |
74 | strokeWidth: widthNormal, | |
75 | strokeBorderWidth: 2, | |
76 | highlightCircleSize: widthNormal * 2, | |
77 | highlightSeriesBackgroundFade: 0.7, | |
78 | highlightSeriesAnimate: true, | |
79 | ||
80 | highlightSeriesOpts: { | |
81 | strokeWidth: widthHighlighted, | |
82 | highlightCircleSize: widthHighlighted * 2 | |
83 | } | |
84 | }); | |
85 | ||
86 | var highlightCallback = function(e, x, pts, row, set) { | |
87 | h_row = row; | |
88 | h_pts = pts; | |
89 | h_series = set; | |
90 | document.getElementById('selection').innerHTML='row=' + row + ', set=' + set; | |
91 | }; | |
92 | ||
93 | g.updateOptions({highlightCallback: highlightCallback}, true); | |
94 | ||
95 | if (isStacked) { | |
96 | DygraphOps.dispatchMouseMove(g, 11.45, 1.4); | |
97 | assertEquals(1, h_row); | |
98 | assertEquals('c', h_series); | |
99 | ||
100 | //now move up in the same row | |
101 | DygraphOps.dispatchMouseMove(g, 11.45, 1.5); | |
102 | assertEquals(1, h_row); | |
103 | assertEquals('b', h_series); | |
104 | ||
105 | //and a bit to the right | |
106 | DygraphOps.dispatchMouseMove(g, 11.55, 1.5); | |
107 | assertEquals(2, h_row); | |
108 | assertEquals('c', h_series); | |
109 | } else { | |
110 | DygraphOps.dispatchMouseMove(g, 11, 1.5); | |
111 | assertEquals(1, h_row); | |
112 | assertEquals('c', h_series); | |
113 | ||
114 | //now move up in the same row | |
115 | DygraphOps.dispatchMouseMove(g, 11, 2.5); | |
116 | assertEquals(1, h_row); | |
117 | assertEquals('b', h_series); | |
118 | } | |
119 | ||
120 | return g; | |
121 | }; | |
122 | ||
123 | /** | |
124 | * Test basic closest-point highlighting. | |
125 | */ | |
126 | CallbackTestCase.prototype.testClosestPointCallback = function() { | |
127 | runClosestTest(false, 1, 3); | |
128 | } | |
129 | ||
130 | /** | |
131 | * Test setSelection() with series name | |
132 | */ | |
133 | CallbackTestCase.prototype.testSetSelection = function() { | |
134 | var g = runClosestTest(false, 1, 3); | |
135 | assertEquals(1, g.attr_('strokeWidth', 'c')); | |
136 | g.setSelection(false, 'c'); | |
137 | assertEquals(3, g.attr_('strokeWidth', 'c')); | |
138 | } | |
139 | ||
140 | /** | |
141 | * Test closest-point highlighting for stacked graph | |
142 | */ | |
143 | CallbackTestCase.prototype.testClosestPointStackedCallback = function() { | |
144 | runClosestTest(true, 1, 3); | |
145 | } | |
146 | ||
147 | /** | |
148 | * Closest-point highlighting with legend CSS - border around active series. | |
149 | */ | |
150 | CallbackTestCase.prototype.testClosestPointCallbackCss1 = function() { | |
151 | var css = "div.dygraph-legend > span { display: block; }\n" + | |
152 | "div.dygraph-legend > span.highlight { border: 1px solid grey; }\n"; | |
153 | this.styleSheet.innerHTML = css; | |
154 | runClosestTest(false, 2, 4); | |
155 | } | |
156 | ||
157 | /** | |
158 | * Closest-point highlighting with legend CSS - show only closest series. | |
159 | */ | |
160 | CallbackTestCase.prototype.testClosestPointCallbackCss2 = function() { | |
161 | var css = "div.dygraph-legend > span { display: none; }\n" + | |
162 | "div.dygraph-legend > span.highlight { display: inline; }\n"; | |
163 | this.styleSheet.innerHTML = css; | |
164 | runClosestTest(false, 10, 15); | |
165 | // TODO(klausw): verify that the highlighted line is drawn on top? | |
166 | } |