Commit | Line | Data |
---|---|---|
f3cbe61e DV |
1 | /** |
2 | * @fileoverview Test cases for how axis labels are chosen and formatted. | |
3 | * | |
4 | * @author dan@dygraphs.com (Dan Vanderkam) | |
5 | */ | |
6 | var AxisLabelsTestCase = TestCase("axis-labels"); | |
7 | ||
8 | AxisLabelsTestCase.prototype.setUp = function() { | |
9 | document.body.innerHTML = "<div id='graph'></div>"; | |
10 | }; | |
11 | ||
12 | AxisLabelsTestCase.prototype.tearDown = function() { | |
13 | }; | |
14 | ||
15 | function getYLabels() { | |
16 | var y_labels = document.getElementsByClassName("dygraph-axis-label-y"); | |
17 | var ary = []; | |
18 | for (var i = 0; i < y_labels.length; i++) { | |
19 | ary.push(y_labels[i].innerHTML); | |
20 | } | |
21 | return ary; | |
22 | } | |
23 | ||
97889da4 | 24 | function getXLabels() { |
25 | var x_labels = document.getElementsByClassName("dygraph-axis-label-x"); | |
26 | var ary = []; | |
27 | for (var i = 0; i < x_labels.length; i++) { | |
28 | ary.push(x_labels[i].innerHTML); | |
29 | } | |
30 | return ary; | |
31 | } | |
32 | ||
f3cbe61e DV |
33 | AxisLabelsTestCase.prototype.testMinusOneToOne = function() { |
34 | var opts = { | |
35 | width: 480, | |
36 | height: 320 | |
37 | }; | |
38 | var data = "X,Y\n" + | |
39 | "0,-1\n" + | |
40 | "1,0\n" + | |
41 | "2,1\n" + | |
42 | "3,0\n" | |
43 | ; | |
44 | ||
45 | var graph = document.getElementById("graph"); | |
46 | var g = new Dygraph(graph, data, opts); | |
47 | ||
48 | // TODO(danvk): would ['-1.0','-0.5','0.0','0.5','1.0'] be better? | |
49 | assertEquals(['-1','-0.5','0','0.5','1'], getYLabels()); | |
50 | ||
51 | // Go up to 2 | |
52 | data += "4,2\n"; | |
53 | g.updateOptions({file: data}); | |
54 | assertEquals(['-1','-0.5','0','0.5','1','1.5','2'], getYLabels()); | |
55 | ||
56 | // Now 10 | |
57 | data += "5,10\n"; | |
58 | g.updateOptions({file: data}); | |
59 | assertEquals(['-2','0','2','4','6','8','10'], getYLabels()); | |
60 | ||
61 | // Now 100 | |
62 | data += "6,100\n"; | |
63 | g.updateOptions({file: data}); | |
64 | assertEquals(['0','20','40','60','80','100'], getYLabels()); | |
65 | }; | |
66 | ||
67 | AxisLabelsTestCase.prototype.testSmallRangeNearZero = function() { | |
68 | var opts = { | |
69 | width: 480, | |
70 | height: 320 | |
71 | }; | |
72 | var data = "X,Y\n" + | |
73 | "0,-1\n" + | |
74 | "1,0\n" + | |
75 | "2,1\n" + | |
76 | "3,0\n" | |
77 | ; | |
78 | opts.valueRange = [-0.1, 0.1]; | |
79 | ||
80 | var graph = document.getElementById("graph"); | |
81 | var g = new Dygraph(graph, data, opts); | |
82 | assertEquals(["-0.1","-0.08","-0.06","-0.04","-0.02","0","0.02","0.04","0.06","0.08"], getYLabels()); | |
83 | ||
84 | opts.valueRange = [-0.05, 0.05]; | |
85 | g.updateOptions(opts); | |
86 | // TODO(danvk): why '1.00e-2' and not '0.01'? | |
87 | assertEquals(["-0.05","-0.04","-0.03","-0.02","-0.01","0","1.00e-2","0.02","0.03","0.04"], getYLabels()); | |
88 | ||
89 | opts.valueRange = [-0.01, 0.01]; | |
90 | g.updateOptions(opts); | |
91 | assertEquals(["-0.01","-8.00e-3","-6.00e-3","-4.00e-3","-2.00e-3","0","2.00e-3","4.00e-3","6.00e-3","8.00e-3"], getYLabels()); | |
92 | }; | |
93 | ||
94 | AxisLabelsTestCase.prototype.testSmallRangeAwayFromZero = function() { | |
95 | var opts = { | |
96 | width: 480, | |
97 | height: 320 | |
98 | }; | |
99 | var data = "X,Y\n" + | |
100 | "0,-1\n" + | |
101 | "1,0\n" + | |
102 | "2,1\n" + | |
103 | "3,0\n" | |
104 | ; | |
105 | var graph = document.getElementById("graph"); | |
106 | ||
107 | opts.valueRange = [9.9, 10.1]; | |
108 | var g = new Dygraph(graph, data, opts); | |
109 | assertEquals(["9.9","9.92","9.94","9.96","9.98","10","10.02","10.04","10.06","10.08"], getYLabels()); | |
110 | ||
111 | opts.valueRange = [9.99, 10.01]; | |
112 | g.updateOptions(opts); | |
113 | // TODO(danvk): this is bad | |
114 | assertEquals(["9.99","9.99","9.99","10","10","10","10","10","10.01","10.01"], getYLabels()); | |
115 | ||
116 | opts.valueRange = [9.999, 10.001]; | |
117 | g.updateOptions(opts); | |
118 | // TODO(danvk): this is even worse! | |
119 | assertEquals(["10","10","10","10","10","10","10","10","10","10"], getYLabels()); | |
120 | }; | |
97889da4 | 121 | |
ad69cb8a DV |
122 | AxisLabelsTestCase.prototype.testXAxisTimeLabelFormatter = function() { |
123 | var opts = { | |
124 | width: 480, | |
125 | height: 320 | |
126 | }; | |
127 | var data = [[5.0,0],[5.1,1],[5.2,2],[5.3,3],[5.4,4],[5.5,5],[5.6,6],[5.7,7],[5.8,8],[5.9,9]]; | |
128 | var graph = document.getElementById("graph"); | |
129 | var g = new Dygraph(graph, data, opts); | |
130 | g.updateOptions({ | |
131 | xAxisLabelFormatter: function (totalMinutes) { | |
132 | var hours = Math.floor( totalMinutes / 60); | |
133 | var minutes = Math.floor((totalMinutes - (hours * 60))); | |
134 | var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60)); | |
135 | ||
136 | if (hours < 10) hours = "0" + hours; | |
137 | if (minutes < 10) minutes = "0" + minutes; | |
138 | if (seconds < 10) seconds = "0" + seconds; | |
139 | ||
140 | return hours + ':' + minutes + ':' + seconds; | |
141 | } | |
142 | }); | |
97889da4 | 143 | |
ad69cb8a DV |
144 | // This is what the output should be: |
145 | // assertEquals(["00:05:00", "00:05:06", "00:05:12", "00:05:18", "00:05:24", "00:05:30", "00:05:36", "00:05:42", "00:05:48", "00:05:54"], getXLabels()); | |
146 | ||
147 | // This is what it is: | |
148 | assertEquals(['5','5.1','5.2','5.3','5.4','5.5', '5.6', '5.7', '5.8', '5.9'], getXLabels()); | |
149 | }; | |
97889da4 | 150 |