Commit | Line | Data |
---|---|---|
74a5af31 DV |
1 | // Copyright 2011 Dan Vanderkam (danvdk@gmail.com) |
2 | // All Rights Reserved. | |
3 | ||
4 | /** | |
5 | * @fileoverview Based on PlotKitLayout, but modified to meet the needs of | |
6 | * dygraphs. | |
7 | */ | |
8 | ||
9 | /** | |
10 | * Creates a new DygraphLayout object. | |
11 | * | |
12 | * This class contains all the data to be charted. | |
13 | * It uses data coordinates, but also records the chart range (in data | |
14 | * coordinates) and hence is able to calculate percentage positions ('In this | |
15 | * view, Point A lies 25% down the x-axis.') | |
16 | * | |
17 | * Two things that it does not do are: | |
18 | * 1. Record pixel coordinates for anything. | |
19 | * 2. (oddly) determine anything about the layout of chart elements. | |
20 | * | |
21 | * The naming is a vestige of Dygraph's original PlotKit roots. | |
22 | * | |
23 | * @constructor | |
24 | */ | |
25 | DygraphLayout = function(dygraph) { | |
26 | this.dygraph_ = dygraph; | |
27 | this.datasets = new Array(); | |
28 | this.annotations = new Array(); | |
29 | this.yAxes_ = null; | |
30 | ||
31 | // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and | |
32 | // yticks are outputs. Clean this up. | |
33 | this.xTicks_ = null; | |
34 | this.yTicks_ = null; | |
35 | }; | |
36 | ||
37 | DygraphLayout.prototype.attr_ = function(name) { | |
38 | return this.dygraph_.attr_(name); | |
39 | }; | |
40 | ||
41 | DygraphLayout.prototype.addDataset = function(setname, set_xy) { | |
42 | this.datasets[setname] = set_xy; | |
43 | }; | |
44 | ||
45 | DygraphLayout.prototype.setAnnotations = function(ann) { | |
46 | // The Dygraph object's annotations aren't parsed. We parse them here and | |
47 | // save a copy. If there is no parser, then the user must be using raw format. | |
48 | this.annotations = []; | |
49 | var parse = this.attr_('xValueParser') || function(x) { return x; }; | |
50 | for (var i = 0; i < ann.length; i++) { | |
51 | var a = {}; | |
52 | if (!ann[i].xval && !ann[i].x) { | |
53 | this.dygraph_.error("Annotations must have an 'x' property"); | |
54 | return; | |
55 | } | |
56 | if (ann[i].icon && | |
57 | !(ann[i].hasOwnProperty('width') && | |
58 | ann[i].hasOwnProperty('height'))) { | |
59 | this.dygraph_.error("Must set width and height when setting " + | |
60 | "annotation.icon property"); | |
61 | return; | |
62 | } | |
63 | Dygraph.update(a, ann[i]); | |
64 | if (!a.xval) a.xval = parse(a.x); | |
65 | this.annotations.push(a); | |
66 | } | |
67 | }; | |
68 | ||
69 | DygraphLayout.prototype.setXTicks = function(xTicks) { | |
70 | this.xTicks_ = xTicks; | |
71 | }; | |
72 | ||
73 | // TODO(danvk): add this to the Dygraph object's API or move it into Layout. | |
74 | DygraphLayout.prototype.setYAxes = function (yAxes) { | |
75 | this.yAxes_ = yAxes; | |
76 | }; | |
77 | ||
78 | DygraphLayout.prototype.setDateWindow = function(dateWindow) { | |
79 | this.dateWindow_ = dateWindow; | |
80 | }; | |
81 | ||
82 | DygraphLayout.prototype.evaluate = function() { | |
83 | this._evaluateLimits(); | |
84 | this._evaluateLineCharts(); | |
85 | this._evaluateLineTicks(); | |
86 | this._evaluateAnnotations(); | |
87 | }; | |
88 | ||
89 | DygraphLayout.prototype._evaluateLimits = function() { | |
90 | this.minxval = this.maxxval = null; | |
91 | if (this.dateWindow_) { | |
92 | this.minxval = this.dateWindow_[0]; | |
93 | this.maxxval = this.dateWindow_[1]; | |
94 | } else { | |
95 | for (var name in this.datasets) { | |
96 | if (!this.datasets.hasOwnProperty(name)) continue; | |
97 | var series = this.datasets[name]; | |
98 | if (series.length > 1) { | |
99 | var x1 = series[0][0]; | |
100 | if (!this.minxval || x1 < this.minxval) this.minxval = x1; | |
101 | ||
102 | var x2 = series[series.length - 1][0]; | |
103 | if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2; | |
104 | } | |
105 | } | |
106 | } | |
107 | this.xrange = this.maxxval - this.minxval; | |
108 | this.xscale = (this.xrange != 0 ? 1/this.xrange : 1.0); | |
109 | ||
110 | for (var i = 0; i < this.yAxes_.length; i++) { | |
111 | var axis = this.yAxes_[i]; | |
112 | axis.minyval = axis.computedValueRange[0]; | |
113 | axis.maxyval = axis.computedValueRange[1]; | |
114 | axis.yrange = axis.maxyval - axis.minyval; | |
115 | axis.yscale = (axis.yrange != 0 ? 1.0 / axis.yrange : 1.0); | |
116 | ||
117 | if (axis.g.attr_("logscale")) { | |
118 | axis.ylogrange = Dygraph.log10(axis.maxyval) - Dygraph.log10(axis.minyval); | |
119 | axis.ylogscale = (axis.ylogrange != 0 ? 1.0 / axis.ylogrange : 1.0); | |
120 | if (!isFinite(axis.ylogrange) || isNaN(axis.ylogrange)) { | |
121 | axis.g.error('axis ' + i + ' of graph at ' + axis.g + | |
122 | ' can\'t be displayed in log scale for range [' + | |
123 | axis.minyval + ' - ' + axis.maxyval + ']'); | |
124 | } | |
125 | } | |
126 | } | |
127 | }; | |
128 | ||
129 | DygraphLayout.prototype._evaluateLineCharts = function() { | |
130 | // add all the rects | |
131 | this.points = new Array(); | |
132 | for (var setName in this.datasets) { | |
133 | if (!this.datasets.hasOwnProperty(setName)) continue; | |
134 | ||
135 | var dataset = this.datasets[setName]; | |
136 | var axis = this.dygraph_.axisPropertiesForSeries(setName); | |
137 | ||
4ab8db0c AR |
138 | var graphWidth = this.dygraph_.width_; |
139 | var graphHeight = this.dygraph_.height_; | |
140 | var prevXPx = NaN; | |
141 | var prevYPx = NaN; | |
142 | var currXPx = NaN; | |
143 | var currYPx = NaN; | |
ecf9b464 DV |
144 | |
145 | // Ignore the pixel skipping optimization if there are error bars. | |
f6939dc9 DV |
146 | // XXX 2011-07-25 temporarily disabled (see autotests/tests/selection.js) |
147 | var skip_opt = (true || | |
148 | this.attr_("errorBars") || | |
ecf9b464 DV |
149 | this.attr_("customBars") || |
150 | this.annotations.length > 0); | |
4ab8db0c | 151 | |
74a5af31 DV |
152 | for (var j = 0; j < dataset.length; j++) { |
153 | var item = dataset[j]; | |
4ab8db0c AR |
154 | var xValue = parseFloat(dataset[j][0]); |
155 | var yValue = parseFloat(dataset[j][1]); | |
ecf9b464 | 156 | |
4ab8db0c AR |
157 | // Range from 0-1 where 0 represents top and 1 represents bottom |
158 | var xNormal = (xValue - this.minxval) * this.xscale; | |
159 | // Range from 0-1 where 0 represents left and 1 represents right. | |
160 | var yNormal; | |
74a5af31 | 161 | if (axis.logscale) { |
4ab8db0c | 162 | yNormal = 1.0 - ((Dygraph.log10(yValue) - Dygraph.log10(axis.minyval)) * axis.ylogscale); |
74a5af31 | 163 | } else { |
4ab8db0c AR |
164 | yNormal = 1.0 - ((yValue - axis.minyval) * axis.yscale); |
165 | } | |
ecf9b464 | 166 | |
4ab8db0c AR |
167 | // Current pixel coordinates that the data point would fill. |
168 | currXPx = Math.round(xNormal * graphWidth); | |
169 | currYPx = Math.round(yNormal * graphHeight); | |
170 | ||
171 | // Skip over pushing points that lie on the same pixel. | |
4ab8db0c | 172 | // TODO(antrob): optimize this for graphs with error bars. |
ecf9b464 | 173 | if (skip_opt || prevXPx != currXPx || prevYPx != currYPx) { |
4ab8db0c AR |
174 | var point = { |
175 | // TODO(danvk): here | |
176 | x: xNormal, | |
177 | y: yNormal, | |
178 | xval: xValue, | |
179 | yval: yValue, | |
180 | name: setName | |
181 | }; | |
182 | this.points.push(point); | |
74a5af31 | 183 | } |
4ab8db0c AR |
184 | prevXPx = currXPx; |
185 | prevYPx = currYPx; | |
74a5af31 DV |
186 | } |
187 | } | |
188 | }; | |
189 | ||
190 | DygraphLayout.prototype._evaluateLineTicks = function() { | |
191 | this.xticks = new Array(); | |
192 | for (var i = 0; i < this.xTicks_.length; i++) { | |
193 | var tick = this.xTicks_[i]; | |
194 | var label = tick.label; | |
195 | var pos = this.xscale * (tick.v - this.minxval); | |
196 | if ((pos >= 0.0) && (pos <= 1.0)) { | |
197 | this.xticks.push([pos, label]); | |
198 | } | |
199 | } | |
200 | ||
201 | this.yticks = new Array(); | |
202 | for (var i = 0; i < this.yAxes_.length; i++ ) { | |
203 | var axis = this.yAxes_[i]; | |
204 | for (var j = 0; j < axis.ticks.length; j++) { | |
205 | var tick = axis.ticks[j]; | |
206 | var label = tick.label; | |
207 | var pos = this.dygraph_.toPercentYCoord(tick.v, i); | |
208 | if ((pos >= 0.0) && (pos <= 1.0)) { | |
209 | this.yticks.push([i, pos, label]); | |
210 | } | |
211 | } | |
212 | } | |
213 | }; | |
214 | ||
215 | ||
216 | /** | |
217 | * Behaves the same way as PlotKit.Layout, but also copies the errors | |
218 | * @private | |
219 | */ | |
220 | DygraphLayout.prototype.evaluateWithError = function() { | |
221 | this.evaluate(); | |
222 | if (!(this.attr_('errorBars') || this.attr_('customBars'))) return; | |
223 | ||
224 | // Copy over the error terms | |
225 | var i = 0; // index in this.points | |
226 | for (var setName in this.datasets) { | |
227 | if (!this.datasets.hasOwnProperty(setName)) continue; | |
228 | var j = 0; | |
229 | var dataset = this.datasets[setName]; | |
230 | for (var j = 0; j < dataset.length; j++, i++) { | |
231 | var item = dataset[j]; | |
232 | var xv = parseFloat(item[0]); | |
233 | var yv = parseFloat(item[1]); | |
234 | ||
235 | if (xv == this.points[i].xval && | |
236 | yv == this.points[i].yval) { | |
237 | this.points[i].errorMinus = parseFloat(item[2]); | |
238 | this.points[i].errorPlus = parseFloat(item[3]); | |
239 | } | |
240 | } | |
241 | } | |
242 | }; | |
243 | ||
244 | DygraphLayout.prototype._evaluateAnnotations = function() { | |
245 | // Add the annotations to the point to which they belong. | |
246 | // Make a map from (setName, xval) to annotation for quick lookups. | |
247 | var annotations = {}; | |
248 | for (var i = 0; i < this.annotations.length; i++) { | |
249 | var a = this.annotations[i]; | |
250 | annotations[a.xval + "," + a.series] = a; | |
251 | } | |
252 | ||
253 | this.annotated_points = []; | |
d570a072 AR |
254 | |
255 | // Exit the function early if there are no annotations. | |
256 | if (!this.annotations || !this.annotations.length) { | |
257 | return; | |
258 | } | |
259 | ||
260 | // TODO(antrob): loop through annotations not points. | |
74a5af31 DV |
261 | for (var i = 0; i < this.points.length; i++) { |
262 | var p = this.points[i]; | |
263 | var k = p.xval + "," + p.name; | |
264 | if (k in annotations) { | |
265 | p.annotation = annotations[k]; | |
266 | this.annotated_points.push(p); | |
267 | } | |
268 | } | |
269 | }; | |
270 | ||
271 | /** | |
272 | * Convenience function to remove all the data sets from a graph | |
273 | */ | |
274 | DygraphLayout.prototype.removeAllDatasets = function() { | |
275 | delete this.datasets; | |
276 | this.datasets = new Array(); | |
277 | }; | |
278 | ||
279 | /** | |
280 | * Return a copy of the point at the indicated index, with its yval unstacked. | |
281 | * @param int index of point in layout_.points | |
282 | */ | |
283 | DygraphLayout.prototype.unstackPointAtIndex = function(idx) { | |
284 | var point = this.points[idx]; | |
285 | ||
286 | // Clone the point since we modify it | |
287 | var unstackedPoint = {}; | |
288 | for (var i in point) { | |
289 | unstackedPoint[i] = point[i]; | |
290 | } | |
291 | ||
292 | if (!this.attr_("stackedGraph")) { | |
293 | return unstackedPoint; | |
294 | } | |
295 | ||
296 | // The unstacked yval is equal to the current yval minus the yval of the | |
297 | // next point at the same xval. | |
298 | for (var i = idx+1; i < this.points.length; i++) { | |
299 | if (this.points[i].xval == point.xval) { | |
300 | unstackedPoint.yval -= this.points[i].yval; | |
301 | break; | |
302 | } | |
303 | } | |
304 | ||
305 | return unstackedPoint; | |
306 | } |