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 | }; | |
18 | ||
19 | var data = "X,a\,b,c\n" + | |
20 | "10,-1,1,2\n" + | |
21 | "11,0,3,1\n" + | |
22 | "12,1,4,2\n" + | |
23 | "13,0,2,3\n"; | |
24 | ||
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 | ||
41 | ||
42 | var graph = document.getElementById("graph"); | |
43 | var g = new Dygraph(graph, data, | |
44 | { | |
45 | width: 100, | |
46 | height : 100, | |
47 | visibility: [false, true, true], | |
857a6931 | 48 | highlightCallback : highlightCallback |
1c6b239c | 49 | }); |
50 | ||
51 | DygraphOps.dispatchMouseMove(g, 13, 10); | |
52 | ||
53 | //check correct row is returned | |
54 | assertEquals(3, h_row); | |
55 | //check there are only two points (because first series is hidden) | |
56 | assertEquals(2, h_pts.length); | |
57 | }; | |
857a6931 KW |
58 | |
59 | var runClosestTest = function(isStacked, widthNormal, widthHighlighted) { | |
60 | var h_row; | |
61 | var h_pts; | |
62 | var h_series; | |
63 | ||
64 | var graph = document.getElementById("graph"); | |
65 | var g = new Dygraph(graph, data, | |
66 | { | |
67 | width: 600, | |
68 | height : 400, | |
69 | visibility: [false, true, true], | |
70 | stackedGraph: isStacked, | |
71 | strokeWidth: widthNormal, | |
72 | strokeBorderWidth: 2, | |
73 | highlightCircleSize: widthNormal * 2, | |
74 | highlightSeriesBackgroundFade: 0.7, | |
75 | highlightSeriesAnimate: true, | |
76 | ||
77 | highlightSeriesOpts: { | |
78 | strokeWidth: widthHighlighted, | |
79 | highlightCircleSize: widthHighlighted * 2 | |
80 | } | |
81 | }); | |
82 | ||
83 | var highlightCallback = function(e, x, pts, row, set) { | |
84 | h_row = row; | |
85 | h_pts = pts; | |
86 | h_series = set; | |
87 | document.getElementById('selection').innerHTML='row=' + row + ', set=' + set; | |
88 | }; | |
89 | ||
90 | g.updateOptions({highlightCallback: highlightCallback}, true); | |
91 | ||
92 | if (isStacked) { | |
93 | DygraphOps.dispatchMouseMove(g, 11.45, 1.4); | |
94 | assertEquals(1, h_row); | |
95 | assertEquals('c', h_series); | |
96 | ||
97 | //now move up in the same row | |
98 | DygraphOps.dispatchMouseMove(g, 11.45, 1.5); | |
99 | assertEquals(1, h_row); | |
100 | assertEquals('b', h_series); | |
101 | ||
102 | //and a bit to the right | |
103 | DygraphOps.dispatchMouseMove(g, 11.55, 1.5); | |
104 | assertEquals(2, h_row); | |
105 | assertEquals('c', h_series); | |
106 | } else { | |
107 | DygraphOps.dispatchMouseMove(g, 11, 1.5); | |
108 | assertEquals(1, h_row); | |
109 | assertEquals('c', h_series); | |
110 | ||
111 | //now move up in the same row | |
112 | DygraphOps.dispatchMouseMove(g, 11, 2.5); | |
113 | assertEquals(1, h_row); | |
114 | assertEquals('b', h_series); | |
115 | } | |
116 | ||
117 | return g; | |
118 | }; | |
119 | ||
120 | /** | |
121 | * Test basic closest-point highlighting. | |
122 | */ | |
123 | CallbackTestCase.prototype.testClosestPointCallback = function() { | |
124 | runClosestTest(false, 1, 3); | |
125 | } | |
126 | ||
127 | /** | |
128 | * Test setSelection() with series name | |
129 | */ | |
130 | CallbackTestCase.prototype.testSetSelection = function() { | |
131 | var g = runClosestTest(false, 1, 3); | |
132 | assertEquals(1, g.attr_('strokeWidth', 'c')); | |
133 | g.setSelection(false, 'c'); | |
134 | assertEquals(3, g.attr_('strokeWidth', 'c')); | |
135 | } | |
136 | ||
137 | /** | |
138 | * Test closest-point highlighting for stacked graph | |
139 | */ | |
140 | CallbackTestCase.prototype.testClosestPointStackedCallback = function() { | |
141 | runClosestTest(true, 1, 3); | |
142 | } | |
143 | ||
144 | /** | |
145 | * Closest-point highlighting with legend CSS - border around active series. | |
146 | */ | |
147 | CallbackTestCase.prototype.testClosestPointCallbackCss1 = function() { | |
148 | var css = "div.dygraph-legend > span { display: block; }\n" + | |
149 | "div.dygraph-legend > span.highlight { border: 1px solid grey; }\n"; | |
150 | this.styleSheet.innerHTML = css; | |
151 | runClosestTest(false, 2, 4); | |
152 | } | |
153 | ||
154 | /** | |
155 | * Closest-point highlighting with legend CSS - show only closest series. | |
156 | */ | |
157 | CallbackTestCase.prototype.testClosestPointCallbackCss2 = function() { | |
158 | var css = "div.dygraph-legend > span { display: none; }\n" + | |
159 | "div.dygraph-legend > span.highlight { display: inline; }\n"; | |
160 | this.styleSheet.innerHTML = css; | |
161 | runClosestTest(false, 10, 15); | |
162 | // TODO(klausw): verify that the highlighted line is drawn on top? | |
163 | } |