|
0
|
1 /*
|
|
|
2 * SimileTimeplotModify.js
|
|
|
3 *
|
|
|
4 * Copyright (c) 2012, Stefan Jänicke. All rights reserved.
|
|
|
5 *
|
|
|
6 * This library is free software; you can redistribute it and/or
|
|
|
7 * modify it under the terms of the GNU Lesser General Public
|
|
|
8 * License as published by the Free Software Foundation; either
|
|
|
9 * version 3 of the License, or (at your option) any later version.
|
|
|
10 *
|
|
|
11 * This library is distributed in the hope that it will be useful,
|
|
|
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
|
14 * Lesser General Public License for more details.
|
|
|
15 *
|
|
|
16 * You should have received a copy of the GNU Lesser General Public
|
|
|
17 * License along with this library; if not, write to the Free Software
|
|
|
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
|
|
|
19 * MA 02110-1301 USA
|
|
|
20 */
|
|
|
21
|
|
|
22 /**
|
|
|
23 * Modified (overwritten) Simile Timeplot Functions
|
|
|
24 * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
|
|
|
25 * @release 1.0
|
|
|
26 * @release date: 2012-07-27
|
|
|
27 * @version date: 2012-07-27
|
|
|
28 */
|
|
|
29 SimileAjax.DateTime.MILLISECOND = 0;
|
|
|
30 SimileAjax.DateTime.SECOND = 1;
|
|
|
31 SimileAjax.DateTime.MINUTE = 2;
|
|
|
32 SimileAjax.DateTime.HOUR = 3;
|
|
|
33 SimileAjax.DateTime.DAY = 4;
|
|
|
34 SimileAjax.DateTime.WEEK = 5;
|
|
|
35 SimileAjax.DateTime.MONTH = 6;
|
|
|
36 SimileAjax.DateTime.QUARTER = 7;
|
|
|
37 SimileAjax.DateTime.SEMESTER = 8;
|
|
|
38 SimileAjax.DateTime.YEAR = 9;
|
|
|
39 SimileAjax.DateTime.LUSTRUM = 10;
|
|
|
40 SimileAjax.DateTime.DECADE = 11;
|
|
|
41 SimileAjax.DateTime.HALFCENTURY = 12;
|
|
|
42 SimileAjax.DateTime.CENTURY = 13;
|
|
|
43 SimileAjax.DateTime.HALFMILLENNIUM = 14;
|
|
|
44 SimileAjax.DateTime.MILLENNIUM = 15;
|
|
|
45
|
|
|
46 SimileAjax.DateTime.Strings = {
|
|
|
47 "en" : ["milliseconds", "seconds", "minutes", "hours", "days", "weeks", "months", "quarters", "semester", "years", "5 years", "decades", "50 years", "centuries", "500 years", "millenniums"],
|
|
|
48 "de" : ["Millisekunden", "Sekunden", "Minuten", "Stunden", "Tage", "Wochen", "Monate", "Quartale", "Semester", "Jahre", "5 Jahre", "Dekaden", "50 Jahre", "Jahrhunderte", "500 Jahre", "Jahrtausende"]
|
|
|
49 };
|
|
|
50
|
|
|
51 SimileAjax.DateTime.gregorianUnitLengths = [];
|
|
|
52 (function() {
|
|
|
53 var d = SimileAjax.DateTime;
|
|
|
54 var a = d.gregorianUnitLengths;
|
|
|
55
|
|
|
56 a[d.MILLISECOND] = 1;
|
|
|
57 a[d.SECOND] = 1000;
|
|
|
58 a[d.MINUTE] = a[d.SECOND] * 60;
|
|
|
59 a[d.HOUR] = a[d.MINUTE] * 60;
|
|
|
60 a[d.DAY] = a[d.HOUR] * 24;
|
|
|
61 a[d.WEEK] = a[d.DAY] * 7;
|
|
|
62 a[d.MONTH] = a[d.DAY] * 31;
|
|
|
63 a[d.QUARTER] = a[d.DAY] * 91;
|
|
|
64 a[d.SEMESTER] = a[d.DAY] * 182;
|
|
|
65 a[d.YEAR] = a[d.DAY] * 365;
|
|
|
66 a[d.LUSTRUM] = a[d.YEAR] * 5;
|
|
|
67 a[d.DECADE] = a[d.YEAR] * 10;
|
|
|
68 a[d.HALFCENTURY] = a[d.YEAR] * 50;
|
|
|
69 a[d.CENTURY] = a[d.YEAR] * 100;
|
|
|
70 a[d.HALFMILLENNIUM] = a[d.YEAR] * 500;
|
|
|
71 a[d.MILLENNIUM] = a[d.YEAR] * 1000;
|
|
|
72 })();
|
|
|
73
|
|
|
74 SimileAjax.DateTime.roundDownToInterval = function(date, intervalUnit, timeZone, multiple, firstDayOfWeek) {
|
|
|
75 timeZone = ( typeof timeZone == 'undefined') ? 0 : timeZone;
|
|
|
76 var timeShift = timeZone * SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR];
|
|
|
77
|
|
|
78 var date2 = new Date(date.getTime() + timeShift);
|
|
|
79 var clearInDay = function(d) {
|
|
|
80 d.setUTCMilliseconds(0);
|
|
|
81 d.setUTCSeconds(0);
|
|
|
82 d.setUTCMinutes(0);
|
|
|
83 d.setUTCHours(0);
|
|
|
84 };
|
|
|
85 var clearInWeek = function(d) {
|
|
|
86 clearInDay(d);
|
|
|
87 var day = d.getDay();
|
|
|
88 var millies = d.getTime();
|
|
|
89 millies -= day * 1000 * 60 * 60 * 24;
|
|
|
90 d.setTime(millies);
|
|
|
91 };
|
|
|
92 var clearInYear = function(d) {
|
|
|
93 clearInDay(d);
|
|
|
94 d.setUTCDate(1);
|
|
|
95 d.setUTCMonth(0);
|
|
|
96 };
|
|
|
97
|
|
|
98 switch (intervalUnit) {
|
|
|
99 case SimileAjax.DateTime.MILLISECOND:
|
|
|
100 var x = date2.getUTCMilliseconds();
|
|
|
101 date2.setUTCMilliseconds(x - (x % multiple));
|
|
|
102 break;
|
|
|
103 case SimileAjax.DateTime.SECOND:
|
|
|
104 date2.setUTCMilliseconds(0);
|
|
|
105 var x = date2.getUTCSeconds();
|
|
|
106 date2.setUTCSeconds(x - (x % multiple));
|
|
|
107 break;
|
|
|
108 case SimileAjax.DateTime.MINUTE:
|
|
|
109 date2.setUTCMilliseconds(0);
|
|
|
110 date2.setUTCSeconds(0);
|
|
|
111 var x = date2.getUTCMinutes();
|
|
|
112 date2.setTime(date2.getTime() - (x % multiple) * SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.MINUTE]);
|
|
|
113 break;
|
|
|
114 case SimileAjax.DateTime.HOUR:
|
|
|
115 date2.setUTCMilliseconds(0);
|
|
|
116 date2.setUTCSeconds(0);
|
|
|
117 date2.setUTCMinutes(0);
|
|
|
118 var x = date2.getUTCHours();
|
|
|
119 date2.setUTCHours(x - (x % multiple));
|
|
|
120 break;
|
|
|
121 case SimileAjax.DateTime.DAY:
|
|
|
122 clearInDay(date2);
|
|
|
123 break;
|
|
|
124 case SimileAjax.DateTime.WEEK:
|
|
|
125 clearInWeek(date2);
|
|
|
126 break;
|
|
|
127 case SimileAjax.DateTime.MONTH:
|
|
|
128 clearInDay(date2);
|
|
|
129 date2.setUTCDate(1);
|
|
|
130 var x = date2.getUTCMonth();
|
|
|
131 date2.setUTCMonth(x - (x % multiple));
|
|
|
132 break;
|
|
|
133 case SimileAjax.DateTime.QUARTER:
|
|
|
134 clearInDay(date2);
|
|
|
135 date2.setUTCDate(1);
|
|
|
136 var x = date2.getUTCMonth();
|
|
|
137 date2.setUTCMonth(x - (x % 3));
|
|
|
138 break;
|
|
|
139 case SimileAjax.DateTime.SEMESTER:
|
|
|
140 clearInDay(date2);
|
|
|
141 date2.setUTCDate(1);
|
|
|
142 var x = date2.getUTCMonth();
|
|
|
143 date2.setUTCMonth(x - (x % 6));
|
|
|
144 break;
|
|
|
145 case SimileAjax.DateTime.YEAR:
|
|
|
146 clearInYear(date2);
|
|
|
147 var x = date2.getUTCFullYear();
|
|
|
148 date2.setUTCFullYear(x - (x % multiple));
|
|
|
149 break;
|
|
|
150 case SimileAjax.DateTime.LUSTRUM:
|
|
|
151 clearInYear(date2);
|
|
|
152 date2.setUTCFullYear(Math.floor(date2.getUTCFullYear() / 5) * 5);
|
|
|
153 break;
|
|
|
154 case SimileAjax.DateTime.DECADE:
|
|
|
155 clearInYear(date2);
|
|
|
156 date2.setUTCFullYear(Math.floor(date2.getUTCFullYear() / 10) * 10);
|
|
|
157 break;
|
|
|
158 case SimileAjax.DateTime.HALFCENTURY:
|
|
|
159 clearInYear(date2);
|
|
|
160 date2.setUTCFullYear(Math.floor(date2.getUTCFullYear() / 50) * 50);
|
|
|
161 break;
|
|
|
162 case SimileAjax.DateTime.CENTURY:
|
|
|
163 clearInYear(date2);
|
|
|
164 date2.setUTCFullYear(Math.floor(date2.getUTCFullYear() / 100) * 100);
|
|
|
165 break;
|
|
|
166 case SimileAjax.DateTime.HALFMILLENNIUM:
|
|
|
167 clearInYear(date2);
|
|
|
168 date2.setUTCFullYear(Math.floor(date2.getUTCFullYear() / 500) * 500);
|
|
|
169 break;
|
|
|
170 case SimileAjax.DateTime.MILLENNIUM:
|
|
|
171 clearInYear(date2);
|
|
|
172 date2.setUTCFullYear(Math.floor(date2.getUTCFullYear() / 1000) * 1000);
|
|
|
173 break;
|
|
|
174 }
|
|
|
175
|
|
|
176 date.setTime(date2.getTime() - timeShift);
|
|
|
177 };
|
|
|
178
|
|
|
179 SimileAjax.DateTime.incrementByInterval = function(date, intervalUnit, timeZone) {
|
|
|
180 timeZone = ( typeof timeZone == 'undefined') ? 0 : timeZone;
|
|
|
181
|
|
|
182 var timeShift = timeZone * SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR];
|
|
|
183
|
|
|
184 var date2 = new Date(date.getTime() + timeShift);
|
|
|
185
|
|
|
186 switch (intervalUnit) {
|
|
|
187 case SimileAjax.DateTime.MILLISECOND:
|
|
|
188 date2.setTime(date2.getTime() + 1)
|
|
|
189 break;
|
|
|
190 case SimileAjax.DateTime.SECOND:
|
|
|
191 date2.setTime(date2.getTime() + 1000);
|
|
|
192 break;
|
|
|
193 case SimileAjax.DateTime.MINUTE:
|
|
|
194 date2.setTime(date2.getTime() + SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.MINUTE]);
|
|
|
195 break;
|
|
|
196 case SimileAjax.DateTime.HOUR:
|
|
|
197 date2.setTime(date2.getTime() + SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]);
|
|
|
198 break;
|
|
|
199 case SimileAjax.DateTime.DAY:
|
|
|
200 date2.setUTCDate(date2.getUTCDate() + 1);
|
|
|
201 break;
|
|
|
202 case SimileAjax.DateTime.WEEK:
|
|
|
203 date2.setUTCDate(date2.getUTCDate() + 7);
|
|
|
204 break;
|
|
|
205 case SimileAjax.DateTime.MONTH:
|
|
|
206 date2.setUTCMonth(date2.getUTCMonth() + 1);
|
|
|
207 break;
|
|
|
208 case SimileAjax.DateTime.QUARTER:
|
|
|
209 date2.setUTCMonth(date2.getUTCMonth() + 3);
|
|
|
210 break;
|
|
|
211 case SimileAjax.DateTime.SEMESTER:
|
|
|
212 date2.setUTCMonth(date2.getUTCMonth() + 6);
|
|
|
213 break;
|
|
|
214 case SimileAjax.DateTime.YEAR:
|
|
|
215 date2.setUTCFullYear(date2.getUTCFullYear() + 1);
|
|
|
216 break;
|
|
|
217 case SimileAjax.DateTime.LUSTRUM:
|
|
|
218 date2.setUTCFullYear(date2.getUTCFullYear() + 5);
|
|
|
219 break;
|
|
|
220 case SimileAjax.DateTime.DECADE:
|
|
|
221 date2.setUTCFullYear(date2.getUTCFullYear() + 10);
|
|
|
222 break;
|
|
|
223 case SimileAjax.DateTime.HALFCENTURY:
|
|
|
224 date2.setUTCFullYear(date2.getUTCFullYear() + 50);
|
|
|
225 break;
|
|
|
226 case SimileAjax.DateTime.CENTURY:
|
|
|
227 date2.setUTCFullYear(date2.getUTCFullYear() + 100);
|
|
|
228 break;
|
|
|
229 case SimileAjax.DateTime.HALFMILLENNIUM:
|
|
|
230 date2.setUTCFullYear(date2.getUTCFullYear() + 500);
|
|
|
231 break;
|
|
|
232 case SimileAjax.DateTime.MILLENNIUM:
|
|
|
233 date2.setUTCFullYear(date2.getUTCFullYear() + 1000);
|
|
|
234 break;
|
|
|
235 }
|
|
|
236 date.setTime(date2.getTime() - timeShift);
|
|
|
237 };
|
|
|
238
|
|
|
239 SimileAjax.DateTime.getTimeLabel = function(unit, t) {
|
|
|
240 var time = SimileAjax.DateTime;
|
|
|
241 var second = t.getUTCSeconds();
|
|
|
242 var minute = t.getUTCMinutes();
|
|
|
243 var hour = t.getUTCHours();
|
|
|
244 var day = t.getUTCDate();
|
|
|
245 var month = t.getUTCMonth() + 1;
|
|
|
246 var year = t.getUTCFullYear();
|
|
|
247 switch(unit) {
|
|
|
248 case time.SECOND:
|
|
|
249 return hour + ":" + ((minute < 10) ? "0" : "") + minute + ":" + ((second < 10) ? "0" : "") + second;
|
|
|
250 case time.MINUTE:
|
|
|
251 return hour + ":" + ((minute < 10) ? "0" : "") + minute;
|
|
|
252 case time.HOUR:
|
|
|
253 return hour + ":00";
|
|
|
254 case time.DAY:
|
|
|
255 case time.WEEK:
|
|
|
256 case time.MONTH:
|
|
|
257 case time.QUARTER:
|
|
|
258 case time.SEMESTER:
|
|
|
259 return year + "-" + ((month < 10) ? "0" : "") + month + "-" + ((day < 10) ? "0" : "") + day;
|
|
|
260 case time.YEAR:
|
|
|
261 case time.LUSTRUM:
|
|
|
262 case time.DECADE:
|
|
|
263 case time.HALFCENTURY:
|
|
|
264 case time.CENTURY:
|
|
|
265 case time.HALFMILLENNIUM:
|
|
|
266 case time.MILLENNIUM:
|
|
|
267 return year;
|
|
|
268 }
|
|
|
269 };
|
|
|
270
|
|
|
271 SimileAjax.DateTime.getTimeString = function(unit, t) {
|
|
|
272 var time = SimileAjax.DateTime;
|
|
|
273 switch(unit) {
|
|
|
274 case time.MILLISECOND:
|
|
|
275 case time.SECOND:
|
|
|
276 case time.MINUTE:
|
|
|
277 case time.HOUR:
|
|
|
278 var m = t.getUTCMonth() + 1;
|
|
|
279 var d = t.getUTCDate();
|
|
|
280 var h = t.getUTCHours();
|
|
|
281 var min = t.getUTCMinutes();
|
|
|
282 var s = t.getUTCSeconds();
|
|
|
283 return t.getUTCFullYear() + "-" + ((m < 10) ? "0" : "") + m + "-" + ((d < 10) ? "0" : "") + d + " " + ((h < 10) ? "0" : "") + h + ":" + ((min < 10) ? "0" : "") + min + ":" + ((s < 10) ? "0" : "") + s;
|
|
|
284 case time.DAY:
|
|
|
285 case time.WEEK:
|
|
|
286 case time.MONTH:
|
|
|
287 case time.QUARTER:
|
|
|
288 case time.SEMESTER:
|
|
|
289 var m = t.getUTCMonth() + 1;
|
|
|
290 var d = t.getUTCDate();
|
|
|
291 return t.getUTCFullYear() + "-" + ((m < 10) ? "0" : "") + m + "-" + ((d < 10) ? "0" : "") + d;
|
|
|
292 case time.YEAR:
|
|
|
293 case time.LUSTRUM:
|
|
|
294 case time.DECADE:
|
|
|
295 case time.HALFCENTURY:
|
|
|
296 case time.CENTURY:
|
|
|
297 case time.HALFMILLENNIUM:
|
|
|
298 case time.MILLENNIUM:
|
|
|
299 return t.getUTCFullYear();
|
|
|
300 }
|
|
|
301 };
|
|
|
302
|
|
|
303 Timeplot.DefaultEventSource.prototype.loadData = function(events) {
|
|
|
304
|
|
|
305 this._events.maxValues = new Array();
|
|
|
306 this._events.removeAll();
|
|
|
307 for (var i = 0; i < events.length; i++) {
|
|
|
308 var event = events[i];
|
|
|
309 var numericEvent = new Timeplot.DefaultEventSource.NumericEvent(event.date, event.value);
|
|
|
310 this._events.add(numericEvent);
|
|
|
311 }
|
|
|
312 this._fire("onAddMany", []);
|
|
|
313
|
|
|
314 };
|
|
|
315
|
|
|
316 Timeplot._Impl.prototype.resetPlots = function(plotInfos) {
|
|
|
317
|
|
|
318 this._plotInfos = plotInfos;
|
|
|
319 this._painters = {
|
|
|
320 background : [],
|
|
|
321 foreground : []
|
|
|
322 };
|
|
|
323 this._painter = null;
|
|
|
324
|
|
|
325 var timeplot = this;
|
|
|
326 var painter = {
|
|
|
327 onAddMany : function() {
|
|
|
328 timeplot.update();
|
|
|
329 },
|
|
|
330 onClear : function() {
|
|
|
331 timeplot.update();
|
|
|
332 }
|
|
|
333 }
|
|
|
334
|
|
|
335 for ( i = this._plots.length; i > 0; i--) {
|
|
|
336 this._plots[i - 1].opacityPlot.removeChild(this._plots[i - 1]._opacityCanvas);
|
|
|
337 this._plots[i - 1].dispose();
|
|
|
338 if (document.addEventListener) {
|
|
|
339 this._containerDiv.removeEventListener("mousemove", this._plots[i - 1].mousemove, false);
|
|
|
340 this._containerDiv.removeEventListener("mouseover", this._plots[i - 1].mouseover, false);
|
|
|
341 } else if (document.attachEvent) {
|
|
|
342 this._containerDiv.detachEvent("onmousemove", this._plots[i - 1].mousemove);
|
|
|
343 this._containerDiv.detachEvent("onmouseover", this._plots[i - 1].mouseover);
|
|
|
344 }
|
|
|
345 delete this._plots[i - 1];
|
|
|
346 }
|
|
|
347
|
|
|
348 this._plots = [];
|
|
|
349
|
|
|
350 for ( i = 0; i < this._plotInfos.length; i++) {
|
|
|
351 var plot = new Timeplot.Plot(this, this._plotInfos[i]);
|
|
|
352 var dataSource = plot.getDataSource();
|
|
|
353 if (dataSource) {
|
|
|
354 dataSource.addListener(painter);
|
|
|
355 }
|
|
|
356 this.addPainter("background", {
|
|
|
357 context : plot.getTimeGeometry(),
|
|
|
358 action : plot.getTimeGeometry().paint
|
|
|
359 });
|
|
|
360 this.addPainter("background", {
|
|
|
361 context : plot.getValueGeometry(),
|
|
|
362 action : plot.getValueGeometry().paint
|
|
|
363 });
|
|
|
364 this.addPainter("foreground", {
|
|
|
365 context : plot,
|
|
|
366 action : plot.paint
|
|
|
367 });
|
|
|
368 this._plots.push(plot);
|
|
|
369 plot.initialize();
|
|
|
370 }
|
|
|
371
|
|
|
372 };
|
|
|
373
|
|
|
374 Timeplot.DefaultTimeGeometry.prototype._calculateGrid = function() {
|
|
|
375 var grid = [];
|
|
|
376
|
|
|
377 var time = SimileAjax.DateTime;
|
|
|
378 var u = this._unit;
|
|
|
379 var p = this._period;
|
|
|
380
|
|
|
381 if (p == 0)
|
|
|
382 return grid;
|
|
|
383
|
|
|
384 var periodUnit = -1;
|
|
|
385 do {
|
|
|
386 periodUnit++;
|
|
|
387 } while (time.gregorianUnitLengths[periodUnit] < p);
|
|
|
388
|
|
|
389 periodUnit--;
|
|
|
390
|
|
|
391 var unit;
|
|
|
392 if (periodUnit < time.DAY) {
|
|
|
393 unit = time.HOUR;
|
|
|
394 } else if (periodUnit < time.WEEK) {
|
|
|
395 unit = time.DAY;
|
|
|
396 } else if (periodUnit < time.QUARTER) {
|
|
|
397 unit = time.WEEK;
|
|
|
398 } else if (periodUnit < time.YEAR) {
|
|
|
399 unit = time.MONTH;
|
|
|
400 } else if (periodUnit < time.DECADE) {
|
|
|
401 unit = time.YEAR;
|
|
|
402 } else if (periodUnit < time.CENTURY) {
|
|
|
403 unit = time.DECADE;
|
|
|
404 } else if (periodUnit < time.HALFMILLENNIUM) {
|
|
|
405 unit = time.CENTURY;
|
|
|
406 } else if (periodUnit < time.MILLENNIUM) {
|
|
|
407 unit = time.HALFMILLENNIUM;
|
|
|
408 } else {
|
|
|
409 unit = time.MILLENNIUM;
|
|
|
410 }
|
|
|
411
|
|
|
412 if (unit < this._granularity) {
|
|
|
413 unit = this._granularity;
|
|
|
414 }
|
|
|
415
|
|
|
416 var t = u.cloneValue(this._earliestDate);
|
|
|
417 var timeZone;
|
|
|
418 do {
|
|
|
419 time.roundDownToInterval(t, unit, timeZone, 1, 0);
|
|
|
420 var x = this.toScreen(u.toNumber(t));
|
|
|
421 var l = SimileAjax.DateTime.getTimeLabel(unit, t);
|
|
|
422 if (x > 0) {
|
|
|
423 grid.push({
|
|
|
424 x : x,
|
|
|
425 label : l
|
|
|
426 });
|
|
|
427 }
|
|
|
428 time.incrementByInterval(t, unit, timeZone);
|
|
|
429 } while (t.getTime() < this._latestDate.getTime());
|
|
|
430
|
|
|
431 return grid;
|
|
|
432
|
|
|
433 };
|
|
|
434
|
|
|
435 //modified function to prevent from drawing left and right axis
|
|
|
436 Timeplot.DefaultValueGeometry.prototype.paint = function() {
|
|
|
437 if (this._timeplot) {
|
|
|
438 var ctx = this._canvas.getContext('2d');
|
|
|
439
|
|
|
440 ctx.lineJoin = 'miter';
|
|
|
441
|
|
|
442 // paint grid
|
|
|
443 if (this._gridColor) {
|
|
|
444 var gridGradient = ctx.createLinearGradient(0, 0, 0, this._canvas.height);
|
|
|
445 gridGradient.addColorStop(0, this._gridColor.toHexString());
|
|
|
446 gridGradient.addColorStop(0.3, this._gridColor.toHexString());
|
|
|
447 gridGradient.addColorStop(1, "rgba(255,255,255,0.5)");
|
|
|
448
|
|
|
449 ctx.lineWidth = this._gridLineWidth;
|
|
|
450 ctx.strokeStyle = gridGradient;
|
|
|
451
|
|
|
452 for (var i = 0; i < this._grid.length; i++) {
|
|
|
453 var tick = this._grid[i];
|
|
|
454 var y = Math.floor(tick.y) + 0.5;
|
|
|
455 if ( typeof tick.label != "undefined") {
|
|
|
456 if (this._axisLabelsPlacement == "left") {
|
|
|
457 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label", {
|
|
|
458 left : 4,
|
|
|
459 bottom : y + 2,
|
|
|
460 color : this._gridColor.toHexString(),
|
|
|
461 visibility : "hidden"
|
|
|
462 });
|
|
|
463 this._labels.push(div);
|
|
|
464 } else if (this._axisLabelsPlacement == "right") {
|
|
|
465 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label", {
|
|
|
466 right : 4,
|
|
|
467 bottom : y + 2,
|
|
|
468 color : this._gridColor.toHexString(),
|
|
|
469 visibility : "hidden"
|
|
|
470 });
|
|
|
471 this._labels.push(div);
|
|
|
472 }
|
|
|
473 if (y + div.clientHeight < this._canvas.height + 10) {
|
|
|
474 div.style.visibility = "visible";
|
|
|
475 // avoid the labels that would overflow
|
|
|
476 }
|
|
|
477 }
|
|
|
478
|
|
|
479 // draw grid
|
|
|
480 ctx.beginPath();
|
|
|
481 if (this._gridType == "long" || tick.label == 0) {
|
|
|
482 ctx.moveTo(0, y);
|
|
|
483 ctx.lineTo(this._canvas.width, y);
|
|
|
484 } else if (this._gridType == "short") {
|
|
|
485 if (this._axisLabelsPlacement == "left") {
|
|
|
486 ctx.moveTo(0, y);
|
|
|
487 ctx.lineTo(this._gridShortSize, y);
|
|
|
488 } else if (this._axisLabelsPlacement == "right") {
|
|
|
489 ctx.moveTo(this._canvas.width, y);
|
|
|
490 ctx.lineTo(this._canvas.width - this._gridShortSize, y);
|
|
|
491 }
|
|
|
492 }
|
|
|
493 ctx.stroke();
|
|
|
494 }
|
|
|
495 }
|
|
|
496 }
|
|
|
497 };
|
|
|
498
|
|
|
499 //modified function to prevent from drawing hidden labels
|
|
|
500 Timeplot.DefaultTimeGeometry.prototype.paint = function() {
|
|
|
501 if (this._canvas) {
|
|
|
502 var unit = this._unit;
|
|
|
503 var ctx = this._canvas.getContext('2d');
|
|
|
504
|
|
|
505 var gradient = ctx.createLinearGradient(0, 0, 0, this._canvas.height);
|
|
|
506
|
|
|
507 ctx.strokeStyle = gradient;
|
|
|
508 ctx.lineWidth = this._gridLineWidth;
|
|
|
509 ctx.lineJoin = 'miter';
|
|
|
510
|
|
|
511 // paint grid
|
|
|
512 if (this._gridColor) {
|
|
|
513 gradient.addColorStop(0, this._gridColor.toString());
|
|
|
514 gradient.addColorStop(1, "rgba(255,255,255,0.9)");
|
|
|
515 for (var i = 0; i < this._grid.length; i++) {
|
|
|
516 var tick = this._grid[i];
|
|
|
517 var x = Math.floor(tick.x) + 0.5;
|
|
|
518 if (this._axisLabelsPlacement == "top") {
|
|
|
519 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label", {
|
|
|
520 left : x + 4,
|
|
|
521 top : 2,
|
|
|
522 visibility : "hidden"
|
|
|
523 });
|
|
|
524 this._labels.push(div);
|
|
|
525 } else if (this._axisLabelsPlacement == "bottom") {
|
|
|
526 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label", {
|
|
|
527 left : x + 4,
|
|
|
528 bottom : 2,
|
|
|
529 visibility : "hidden"
|
|
|
530 });
|
|
|
531 this._labels.push(div);
|
|
|
532 }
|
|
|
533 if (!this._hideLabels && x + div.clientWidth < this._canvas.width + 10) {
|
|
|
534 div.style.visibility = "visible";
|
|
|
535 // avoid the labels that would overflow
|
|
|
536 }
|
|
|
537
|
|
|
538 // draw separator
|
|
|
539 ctx.beginPath();
|
|
|
540 ctx.moveTo(x, 0);
|
|
|
541 ctx.lineTo(x, this._canvas.height);
|
|
|
542 ctx.stroke();
|
|
|
543 }
|
|
|
544 }
|
|
|
545 }
|
|
|
546 };
|
|
|
547
|
|
|
548 Timeplot.Plot.prototype.getSliceNumber = function() {
|
|
|
549 return this._dataSource.getData().times.length;
|
|
|
550 };
|
|
|
551
|
|
|
552 Timeplot.Plot.prototype.getSliceId = function(time) {
|
|
|
553 var data = this._dataSource.getData();
|
|
|
554 for (var k = 0; k < data.times.length; k++) {
|
|
|
555 if (data.times[k].getTime() == time.getTime()) {
|
|
|
556 return k;
|
|
|
557 }
|
|
|
558 }
|
|
|
559 return null;
|
|
|
560 };
|
|
|
561
|
|
|
562 Timeplot.Plot.prototype.getSliceTime = function(index) {
|
|
|
563 var data = this._dataSource.getData();
|
|
|
564 if (0 <= index && index < data.times.length) {
|
|
|
565 return data.times[index];
|
|
|
566 }
|
|
|
567 return null;
|
|
|
568 };
|
|
|
569
|
|
|
570 Timeplot.Plot.prototype.initialize = function() {
|
|
|
571 if (this._dataSource && this._dataSource.getValue) {
|
|
|
572 this._timeFlag = this._timeplot.putDiv("timeflag", "timeplot-timeflag");
|
|
|
573 this._valueFlag = this._timeplot.putDiv(this._id + "valueflag", "timeplot-valueflag");
|
|
|
574 this._pinValueFlag = this._timeplot.putDiv(this._id + "pinvalueflag", "timeplot-valueflag");
|
|
|
575 var pin = document.getElementById(this._timeplot._id + "-" + this._id + "pinvalueflag");
|
|
|
576 if (SimileAjax.Platform.browser.isIE && SimileAjax.Platform.browser.majorVersion < 9) {
|
|
|
577 var cssText = "border: 1px solid " + this._plotInfo.lineColor.toString() + "; background-color: " + this._plotInfo.fillColor.toString() + ";";
|
|
|
578 cssText = cssText.replace(/rgba\((\s*\d{1,3}),(\s*\d{1,3}),(\s*\d{1,3}),(\s*\d{1}|\s*\d{1}\.\d+)\)/g, 'rgb($1,$2,$3)');
|
|
|
579 pin.style.setAttribute("cssText", cssText);
|
|
|
580 } else {
|
|
|
581 pin.style.border = "1px solid " + this._plotInfo.lineColor.toString();
|
|
|
582 pin.style.backgroundColor = this._plotInfo.fillColor.toString();
|
|
|
583 }
|
|
|
584 this._valueFlagLineLeft = this._timeplot.putDiv(this._id + "valueflagLineLeft", "timeplot-valueflag-line");
|
|
|
585 this._valueFlagLineRight = this._timeplot.putDiv(this._id + "valueflagLineRight", "timeplot-valueflag-line");
|
|
|
586 this._pinValueFlagLineLeft = this._timeplot.putDiv(this._id + "pinValueflagLineLeft", "timeplot-valueflag-line");
|
|
|
587 this._pinValueFlagLineRight = this._timeplot.putDiv(this._id + "pinValueflagLineRight", "timeplot-valueflag-line");
|
|
|
588 if (!this._valueFlagLineLeft.firstChild) {
|
|
|
589 this._valueFlagLineLeft.appendChild(SimileAjax.Graphics.createTranslucentImage(Timeplot.urlPrefix + "images/line_left.png"));
|
|
|
590 this._valueFlagLineRight.appendChild(SimileAjax.Graphics.createTranslucentImage(Timeplot.urlPrefix + "images/line_right.png"));
|
|
|
591 }
|
|
|
592 if (!this._pinValueFlagLineLeft.firstChild) {
|
|
|
593 this._pinValueFlagLineLeft.appendChild(SimileAjax.Graphics.createTranslucentImage(GeoTemConfig.path + "plot-line_left.png"));
|
|
|
594 this._pinValueFlagLineRight.appendChild(SimileAjax.Graphics.createTranslucentImage(GeoTemConfig.path + "plot-line_right.png"));
|
|
|
595 }
|
|
|
596 this._valueFlagPole = this._timeplot.putDiv(this._id + "valuepole", "timeplot-valueflag-pole");
|
|
|
597
|
|
|
598 var opacity = this._plotInfo.valuesOpacity;
|
|
|
599
|
|
|
600 SimileAjax.Graphics.setOpacity(this._timeFlag, opacity);
|
|
|
601 SimileAjax.Graphics.setOpacity(this._valueFlag, opacity);
|
|
|
602 SimileAjax.Graphics.setOpacity(this._pinValueFlag, opacity);
|
|
|
603 SimileAjax.Graphics.setOpacity(this._valueFlagLineLeft, opacity);
|
|
|
604 SimileAjax.Graphics.setOpacity(this._valueFlagLineRight, opacity);
|
|
|
605 SimileAjax.Graphics.setOpacity(this._pinValueFlagLineLeft, opacity);
|
|
|
606 SimileAjax.Graphics.setOpacity(this._pinValueFlagLineRight, opacity);
|
|
|
607 SimileAjax.Graphics.setOpacity(this._valueFlagPole, opacity);
|
|
|
608
|
|
|
609 var plot = this;
|
|
|
610
|
|
|
611 var mouseOverHandler = function(elmt, evt, target) {
|
|
|
612 plot._timeFlag.style.visibility = "visible";
|
|
|
613 plot._valueFlag.style.visibility = "visible";
|
|
|
614 plot._pinValueFlag.style.visibility = "visible";
|
|
|
615 plot._valueFlagLineLeft.style.visibility = "visible";
|
|
|
616 plot._valueFlagLineRight.style.visibility = "visible";
|
|
|
617 plot._pinValueFlagLineLeft.style.visibility = "visible";
|
|
|
618 plot._pinValueFlagLineRight.style.visibility = "visible";
|
|
|
619 plot._valueFlagPole.style.visibility = "visible";
|
|
|
620 if (plot._plotInfo.showValues) {
|
|
|
621 plot._valueFlag.style.display = "block";
|
|
|
622 mouseMoveHandler(elmt, evt, target);
|
|
|
623 }
|
|
|
624 }
|
|
|
625 var mouseOutHandler = function(elmt, evt, target) {
|
|
|
626 plot._timeFlag.style.visibility = "hidden";
|
|
|
627 plot._valueFlag.style.visibility = "hidden";
|
|
|
628 plot._pinValueFlag.style.visibility = "hidden";
|
|
|
629 plot._valueFlagLineLeft.style.visibility = "hidden";
|
|
|
630 plot._valueFlagLineRight.style.visibility = "hidden";
|
|
|
631 plot._pinValueFlagLineLeft.style.visibility = "hidden";
|
|
|
632 plot._pinValueFlagLineRight.style.visibility = "hidden";
|
|
|
633 plot._valueFlagPole.style.visibility = "hidden";
|
|
|
634 }
|
|
|
635 var day = 24 * 60 * 60 * 1000;
|
|
|
636 var month = 30 * day;
|
|
|
637
|
|
|
638 var mouseMoveHandler = function(elmt, evt, target) {
|
|
|
639 if ( typeof SimileAjax != "undefined" && plot._plotInfo.showValues) {
|
|
|
640 var c = plot._canvas;
|
|
|
641 var x = Math.round(SimileAjax.DOM.getEventRelativeCoordinates(evt, plot._canvas).x);
|
|
|
642 if (x > c.width)
|
|
|
643 x = c.width;
|
|
|
644 if (isNaN(x) || x < 0)
|
|
|
645 x = 0;
|
|
|
646 var t = plot._timeGeometry.fromScreen(x);
|
|
|
647 if (t == 0) {// something is wrong
|
|
|
648 plot._valueFlag.style.display = "none";
|
|
|
649 return;
|
|
|
650 }
|
|
|
651
|
|
|
652 var v, validTime;
|
|
|
653 if (plot.style == 'bars') {
|
|
|
654 var time1 = plot._dataSource.getClosestValidTime(t);
|
|
|
655 var x1 = plot._timeGeometry.toScreen(time1);
|
|
|
656 var index_x1 = plot.getSliceId(time1);
|
|
|
657 var time2;
|
|
|
658 if (x < x1 && index_x1 > 0 || x >= x1 && index_x1 == plot.getSliceNumber() - 1) {
|
|
|
659 time2 = plot.getSliceTime(index_x1 - 1);
|
|
|
660 } else {
|
|
|
661 time2 = plot.getSliceTime(index_x1 + 1);
|
|
|
662 }
|
|
|
663 var x2 = plot._timeGeometry.toScreen(time2);
|
|
|
664
|
|
|
665 var t1 = new Date(time1);
|
|
|
666 var t2 = new Date(time2);
|
|
|
667 var unit = plot._timeGeometry.extendedDataSource.unit;
|
|
|
668 var l;
|
|
|
669 if (x1 < x2) {
|
|
|
670 l = SimileAjax.DateTime.getTimeLabel(unit, t1) + '-' + SimileAjax.DateTime.getTimeLabel(unit, t2);
|
|
|
671 validTime = time1;
|
|
|
672 } else {
|
|
|
673 l = SimileAjax.DateTime.getTimeLabel(unit, t2) + '-' + SimileAjax.DateTime.getTimeLabel(unit, t1);
|
|
|
674 validTime = time2;
|
|
|
675 }
|
|
|
676 v = plot._dataSource.getValue(validTime);
|
|
|
677 if (plot._plotInfo.roundValues)
|
|
|
678 v = Math.round(v);
|
|
|
679 plot._valueFlag.innerHTML = v;
|
|
|
680 plot._timeFlag.innerHTML = l;
|
|
|
681 x = (x1 + x2 ) / 2;
|
|
|
682 } else if (plot.style == 'graph') {
|
|
|
683 validTime = plot._dataSource.getClosestValidTime(t);
|
|
|
684 x = plot._timeGeometry.toScreen(validTime);
|
|
|
685 v = plot._dataSource.getValue(validTime);
|
|
|
686 if (plot._plotInfo.roundValues)
|
|
|
687 v = Math.round(v);
|
|
|
688 plot._valueFlag.innerHTML = v;
|
|
|
689 var t = new Date(validTime);
|
|
|
690 var unit = plot._timeGeometry.extendedDataSource.unit;
|
|
|
691 var l = SimileAjax.DateTime.getTimeLabel(unit, t);
|
|
|
692 plot._timeFlag.innerHTML = l;
|
|
|
693 }
|
|
|
694
|
|
|
695 var tw = plot._timeFlag.clientWidth;
|
|
|
696 var th = plot._timeFlag.clientHeight;
|
|
|
697 var tdw = Math.round(tw / 2);
|
|
|
698 var vw = plot._valueFlag.clientWidth;
|
|
|
699 var vh = plot._valueFlag.clientHeight;
|
|
|
700 var y = plot._valueGeometry.toScreen(v);
|
|
|
701
|
|
|
702 if (x + tdw > c.width) {
|
|
|
703 var tx = c.width - tdw;
|
|
|
704 } else if (x - tdw < 0) {
|
|
|
705 var tx = tdw;
|
|
|
706 } else {
|
|
|
707 var tx = x;
|
|
|
708 }
|
|
|
709
|
|
|
710 plot._timeplot.placeDiv(plot._valueFlagPole, {
|
|
|
711 left : x,
|
|
|
712 top : 0,
|
|
|
713 height : c.height,
|
|
|
714 display : "block"
|
|
|
715 });
|
|
|
716 plot._timeplot.placeDiv(plot._timeFlag, {
|
|
|
717 left : tx - tdw,
|
|
|
718 top : 0,
|
|
|
719 display : "block"
|
|
|
720 });
|
|
|
721
|
|
|
722 var sliceId = plot.getSliceId(validTime);
|
|
|
723 var pvw, pvh = 0, pinY;
|
|
|
724 if (plot.pins[sliceId].count > 0) {
|
|
|
725 plot._pinValueFlag.innerHTML = plot.pins[sliceId].count;
|
|
|
726 pvw = plot._pinValueFlag.clientWidth;
|
|
|
727 pvh = plot._pinValueFlag.clientHeight;
|
|
|
728 pinY = plot.pins[sliceId].height;
|
|
|
729 }
|
|
|
730 var rightOverflow = x + vw + 14 > c.width;
|
|
|
731 var leftOverflow = false;
|
|
|
732 if (plot.pins[sliceId].count > 0) {
|
|
|
733 if (x - pvw - 14 < 0) {
|
|
|
734 leftOverflow = true;
|
|
|
735 }
|
|
|
736 }
|
|
|
737 var shiftV, shiftP;
|
|
|
738 if (plot.pins[sliceId].count > 0) {
|
|
|
739 var cut = y - pinY < vh / 2 + pvh / 2;
|
|
|
740 if ((leftOverflow || rightOverflow ) && cut) {
|
|
|
741 shiftV = 0;
|
|
|
742 shiftP = pvh;
|
|
|
743 } else {
|
|
|
744 shiftV = vh / 2;
|
|
|
745 shiftP = pvh / 2;
|
|
|
746 }
|
|
|
747 } else {
|
|
|
748 shiftV = vh / 2;
|
|
|
749 }
|
|
|
750
|
|
|
751 if (x + vw + 14 > c.width && y + vh / 2 + 4 > c.height) {
|
|
|
752 plot._valueFlagLineLeft.style.display = "none";
|
|
|
753 plot._timeplot.placeDiv(plot._valueFlagLineRight, {
|
|
|
754 left : x - 14,
|
|
|
755 bottom : y - 14,
|
|
|
756 display : "block"
|
|
|
757 });
|
|
|
758 plot._timeplot.placeDiv(plot._valueFlag, {
|
|
|
759 left : x - vw - 13,
|
|
|
760 bottom : y - 13 - shiftV,
|
|
|
761 display : "block"
|
|
|
762 });
|
|
|
763 } else if (x + vw + 14 > c.width && y + vh / 2 + 4 < c.height) {
|
|
|
764 plot._valueFlagLineRight.style.display = "none";
|
|
|
765 plot._timeplot.placeDiv(plot._valueFlagLineLeft, {
|
|
|
766 left : x - 14,
|
|
|
767 bottom : y,
|
|
|
768 display : "block"
|
|
|
769 });
|
|
|
770 plot._timeplot.placeDiv(plot._valueFlag, {
|
|
|
771 left : x - vw - 13,
|
|
|
772 bottom : y + 13 - shiftV,
|
|
|
773 display : "block"
|
|
|
774 });
|
|
|
775 } else if (x + vw + 14 < c.width && y + vh / 2 + 4 > c.height) {
|
|
|
776 plot._valueFlagLineRight.style.display = "none";
|
|
|
777 plot._timeplot.placeDiv(plot._valueFlagLineLeft, {
|
|
|
778 left : x,
|
|
|
779 bottom : y - 13,
|
|
|
780 display : "block"
|
|
|
781 });
|
|
|
782 plot._timeplot.placeDiv(plot._valueFlag, {
|
|
|
783 left : x + 13,
|
|
|
784 bottom : y - 13 - shiftV,
|
|
|
785 display : "block"
|
|
|
786 });
|
|
|
787 } else {
|
|
|
788 plot._valueFlagLineLeft.style.display = "none";
|
|
|
789 plot._timeplot.placeDiv(plot._valueFlagLineRight, {
|
|
|
790 left : x,
|
|
|
791 bottom : y,
|
|
|
792 display : "block"
|
|
|
793 });
|
|
|
794 plot._timeplot.placeDiv(plot._valueFlag, {
|
|
|
795 left : x + 13,
|
|
|
796 bottom : y + 13 - shiftV,
|
|
|
797 display : "block"
|
|
|
798 });
|
|
|
799 }
|
|
|
800
|
|
|
801 if (plot.pins[sliceId].count > 0) {
|
|
|
802 if (x - pvw - 14 < 0 && pinY + pvh + 4 > c.height) {
|
|
|
803 plot._pinValueFlagLineLeft.style.display = "none";
|
|
|
804 plot._timeplot.placeDiv(plot._pinValueFlagLineRight, {
|
|
|
805 left : x,
|
|
|
806 bottom : pinY,
|
|
|
807 display : "block"
|
|
|
808 });
|
|
|
809 plot._timeplot.placeDiv(plot._pinValueFlag, {
|
|
|
810 left : x + 13,
|
|
|
811 bottom : pinY - 13 - shiftP,
|
|
|
812 display : "block"
|
|
|
813 });
|
|
|
814 } else if (x - pvw - 14 < 0 && pinY + pvh + 4 < c.height) {
|
|
|
815 plot._pinValueFlagLineLeft.style.display = "none";
|
|
|
816 plot._timeplot.placeDiv(plot._pinValueFlagLineRight, {
|
|
|
817 left : x,
|
|
|
818 bottom : pinY,
|
|
|
819 display : "block"
|
|
|
820 });
|
|
|
821 plot._timeplot.placeDiv(plot._pinValueFlag, {
|
|
|
822 left : x + 13,
|
|
|
823 bottom : pinY + 13 - shiftP,
|
|
|
824 display : "block"
|
|
|
825 });
|
|
|
826 } else if (x - pvw - 14 >= 0 && pinY + pvh + 4 > c.height) {
|
|
|
827 plot._pinValueFlagLineLeft.style.display = "none";
|
|
|
828 plot._timeplot.placeDiv(plot._pinValueFlagLineRight, {
|
|
|
829 left : x - 13,
|
|
|
830 bottom : pinY - 13,
|
|
|
831 display : "block"
|
|
|
832 });
|
|
|
833 plot._timeplot.placeDiv(plot._pinValueFlag, {
|
|
|
834 left : x - 15 - pvw,
|
|
|
835 bottom : pinY - 13 - shiftP,
|
|
|
836 display : "block"
|
|
|
837 });
|
|
|
838 } else {
|
|
|
839 plot._pinValueFlagLineRight.style.display = "none";
|
|
|
840 plot._timeplot.placeDiv(plot._pinValueFlagLineLeft, {
|
|
|
841 left : x - 14,
|
|
|
842 bottom : pinY,
|
|
|
843 display : "block"
|
|
|
844 });
|
|
|
845 plot._timeplot.placeDiv(plot._pinValueFlag, {
|
|
|
846 left : x - pvw - 15,
|
|
|
847 bottom : pinY + 13 - shiftP,
|
|
|
848 display : "block"
|
|
|
849 });
|
|
|
850 }
|
|
|
851 } else {
|
|
|
852 plot._pinValueFlagLineLeft.style.display = "none";
|
|
|
853 plot._pinValueFlagLineRight.style.display = "none";
|
|
|
854 plot._pinValueFlag.style.display = "none";
|
|
|
855 }
|
|
|
856
|
|
|
857 }
|
|
|
858
|
|
|
859 }
|
|
|
860 var timeplotElement = this._timeplot.getElement();
|
|
|
861 this.mouseover = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mouseover", mouseOverHandler);
|
|
|
862 this.mouseout = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mouseout", mouseOutHandler);
|
|
|
863 this.mousemove = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mousemove", mouseMoveHandler);
|
|
|
864
|
|
|
865 this.opacityPlot = this._timeplot.putDiv("opacityPlot" + this._timeplot._plots.length, "opacityPlot");
|
|
|
866 SimileAjax.Graphics.setOpacity(this.opacityPlot, 50);
|
|
|
867 // this.opacityPlot.style.zIndex = this._timeplot._plots.length;
|
|
|
868 this._timeplot.placeDiv(this.opacityPlot, {
|
|
|
869 left : 0,
|
|
|
870 bottom : 0,
|
|
|
871 width : this._canvas.width,
|
|
|
872 height : this._canvas.height
|
|
|
873 });
|
|
|
874 this._opacityCanvas = document.createElement("canvas");
|
|
|
875 this.opacityPlot.appendChild(this._opacityCanvas);
|
|
|
876 if (!this._opacityCanvas.getContext && G_vmlCanvasManager)
|
|
|
877 this._opacityCanvas = G_vmlCanvasManager.initElement(this._opacityCanvas);
|
|
|
878 this._opacityCanvas.width = this._canvas.width;
|
|
|
879 this._opacityCanvas.height = this._canvas.height;
|
|
|
880 this._opacityCanvas.style.position = 'absolute';
|
|
|
881 this._opacityCanvas.style.left = '0px';
|
|
|
882 this.opacityPlot.style.visibility = "hidden";
|
|
|
883
|
|
|
884 }
|
|
|
885 };
|
|
|
886
|
|
|
887 SimileAjax.DOM.registerPlotEvent = function(elmt, eventName, handler) {
|
|
|
888 var handler2 = function(evt) {
|
|
|
889 evt = (evt) ? evt : ((event) ? event : null);
|
|
|
890 if (evt) {
|
|
|
891 var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
|
|
|
892 if (target) {
|
|
|
893 target = (target.nodeType == 1 || target.nodeType == 9) ? target : target.parentNode;
|
|
|
894 }
|
|
|
895
|
|
|
896 return handler(elmt, evt, target);
|
|
|
897 }
|
|
|
898 return true;
|
|
|
899 }
|
|
|
900 if (SimileAjax.Platform.browser.isIE) {
|
|
|
901 elmt.attachEvent("on" + eventName, handler2);
|
|
|
902 } else {
|
|
|
903 elmt.addEventListener(eventName, handler2, false);
|
|
|
904 }
|
|
|
905
|
|
|
906 return handler2;
|
|
|
907 };
|
|
|
908
|
|
|
909 SimileAjax.DOM.getEventRelativeCoordinates = function(evt, elmt) {
|
|
|
910 if (SimileAjax.Platform.browser.isIE) {
|
|
|
911 var coords = SimileAjax.DOM.getPageCoordinates(elmt);
|
|
|
912 return {
|
|
|
913 x : evt.clientX - coords.left,
|
|
|
914 y : evt.clientY - coords.top
|
|
|
915 };
|
|
|
916 } else {
|
|
|
917 var coords = SimileAjax.DOM.getPageCoordinates(elmt);
|
|
|
918
|
|
|
919 if ((evt.type == "DOMMouseScroll") && SimileAjax.Platform.browser.isFirefox && (SimileAjax.Platform.browser.majorVersion == 2)) {
|
|
|
920 // Due to: https://bugzilla.mozilla.org/show_bug.cgi?id=352179
|
|
|
921
|
|
|
922 return {
|
|
|
923 x : evt.screenX - coords.left,
|
|
|
924 y : evt.screenY - coords.top
|
|
|
925 };
|
|
|
926 } else {
|
|
|
927 return {
|
|
|
928 x : evt.pageX - coords.left,
|
|
|
929 y : evt.pageY - coords.top
|
|
|
930 };
|
|
|
931 }
|
|
|
932 }
|
|
|
933 };
|
|
|
934
|
|
|
935 SimileAjax.Graphics.setOpacity = function(elmt, opacity) {
|
|
|
936 if (SimileAjax.Platform.browser.isIE) {
|
|
|
937 elmt.style.filter = "alpha(opacity = " + opacity + ")";
|
|
|
938 } else {
|
|
|
939 var o = (opacity / 100).toString();
|
|
|
940 elmt.style.opacity = o;
|
|
|
941 elmt.style.MozOpacity = o;
|
|
|
942 }
|
|
|
943 };
|
|
|
944
|
|
|
945 Timeplot.Plot.prototype.fullOpacityPlot = function(left, right, lp, rp, c) {
|
|
|
946
|
|
|
947 var ctx = this._opacityCanvas.getContext('2d');
|
|
|
948
|
|
|
949 ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
|
|
|
950 ctx.lineWidth = this._plotInfo.lineWidth;
|
|
|
951 ctx.lineJoin = 'miter';
|
|
|
952
|
|
|
953 var h = this._canvas.height;
|
|
|
954 ctx.fillStyle = this._plotInfo.lineColor.toString();
|
|
|
955
|
|
|
956 var data = this._dataSource.getData();
|
|
|
957 var times = data.times;
|
|
|
958 var values = data.values;
|
|
|
959
|
|
|
960 var first = true;
|
|
|
961 ctx.beginPath();
|
|
|
962 ctx.fillStyle = this._plotInfo.lineColor.toString();
|
|
|
963 var lastX = 0, lastY = 0;
|
|
|
964 for (var t = 0; t < times.length; t++) {
|
|
|
965 if (!(times[t].getTime() < left.getTime() || times[t].getTime() > right.getTime())) {
|
|
|
966 var x = this._timeGeometry.toScreen(times[t]);
|
|
|
967 var y = this._valueGeometry.toScreen(values[t]);
|
|
|
968 if (first) {
|
|
|
969 ctx.moveTo(x, h);
|
|
|
970 first = false;
|
|
|
971 }
|
|
|
972 if (this.style == 'bars') {
|
|
|
973 ctx.lineTo(x, h - lastY);
|
|
|
974 }
|
|
|
975 ctx.lineTo(x, h - y);
|
|
|
976 if (times[t].getTime() == right.getTime() || t == times.length - 1)
|
|
|
977 ctx.lineTo(x, h);
|
|
|
978 lastX = x;
|
|
|
979 lastY = y;
|
|
|
980 }
|
|
|
981 }
|
|
|
982 ctx.fill();
|
|
|
983
|
|
|
984 };
|
|
|
985
|
|
|
986 Timeplot._Impl.prototype.regularGrid = function() {
|
|
|
987
|
|
|
988 var canvas = this.getCanvas();
|
|
|
989 var ctx = canvas.getContext('2d');
|
|
|
990 var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
|
|
991 gradient.addColorStop(0, "rgb(0,0,0)");
|
|
|
992 gradient.addColorStop(1, "rgba(255,255,255,0.9)");
|
|
|
993 ctx.strokeStyle = gradient;
|
|
|
994 ctx.lineWidth = 0.5;
|
|
|
995 ctx.lineJoin = 'miter';
|
|
|
996
|
|
|
997 var xDist = canvas.width / 9;
|
|
|
998 var positions = [];
|
|
|
999 for (var i = 1; i < 9; i++) {
|
|
|
1000 var x = i * xDist;
|
|
|
1001 ctx.beginPath();
|
|
|
1002 ctx.moveTo(x, 0);
|
|
|
1003 ctx.lineTo(x, canvas.height);
|
|
|
1004
|
|
|
1005 ctx.stroke();
|
|
|
1006 positions.push({
|
|
|
1007 label : '',
|
|
|
1008 x : x
|
|
|
1009 });
|
|
|
1010 }
|
|
|
1011 return positions;
|
|
|
1012
|
|
|
1013 };
|
|
|
1014
|
|
|
1015 Timeplot.Plot.prototype._plot = function() {
|
|
|
1016 var ctx = this._canvas.getContext('2d');
|
|
|
1017 var data = this._dataSource.getData();
|
|
|
1018 if (data) {
|
|
|
1019 var times = data.times;
|
|
|
1020 var values = data.values;
|
|
|
1021 var T = times.length;
|
|
|
1022 ctx.moveTo(0, 0);
|
|
|
1023 var lastX = 0, lastY = 0;
|
|
|
1024 for (var t = 0; t < T; t++) {
|
|
|
1025 var x = this._timeGeometry.toScreen(times[t]);
|
|
|
1026 var y = this._valueGeometry.toScreen(values[t]);
|
|
|
1027 if (t > 0 && (values[t - 1] > 0 || values[t] > 0 )) {
|
|
|
1028 if (this.style == 'graph') {
|
|
|
1029 ctx.lineTo(x, y);
|
|
|
1030 }
|
|
|
1031 if (this.style == 'bars') {
|
|
|
1032 if (values[t - 1] > 0) {
|
|
|
1033 ctx.lineTo(x, lastY);
|
|
|
1034 } else {
|
|
|
1035 ctx.moveTo(x, lastY);
|
|
|
1036 }
|
|
|
1037 ctx.lineTo(x, y);
|
|
|
1038 }
|
|
|
1039 } else {
|
|
|
1040 ctx.moveTo(x, y);
|
|
|
1041 }
|
|
|
1042 lastX = x;
|
|
|
1043 lastY = y;
|
|
|
1044 }
|
|
|
1045 }
|
|
|
1046 };
|
|
|
1047
|
|
|
1048 SimileAjax.DOM.registerEvent = function(elmt, eventName, handler) {
|
|
|
1049 var handler2 = function(evt) {
|
|
|
1050 evt = (evt) ? evt : ((event) ? event : null);
|
|
|
1051 if (evt) {
|
|
|
1052 var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
|
|
|
1053 if (target) {
|
|
|
1054 target = (target.nodeType == 1 || target.nodeType == 9) ? target : target.parentNode;
|
|
|
1055 }
|
|
|
1056
|
|
|
1057 return handler(elmt, evt, target);
|
|
|
1058 }
|
|
|
1059 return true;
|
|
|
1060 }
|
|
|
1061 if (SimileAjax.Platform.browser.isIE) {
|
|
|
1062 elmt.attachEvent("on" + eventName, handler2);
|
|
|
1063 } else {
|
|
|
1064 if (eventName == "mousewheel") {
|
|
|
1065 eventName = "DOMMouseScroll";
|
|
|
1066 }
|
|
|
1067 elmt.addEventListener(eventName, handler2, false);
|
|
|
1068 }
|
|
|
1069 };
|
|
|
1070
|
|
|
1071 Timeplot._Impl.prototype._setUpright = function(ctx, canvas) {
|
|
|
1072 // excanvas+IE requires this to be done only once, ever; actual canvas
|
|
|
1073 // implementations reset and require this for each call to re-layout
|
|
|
1074 // modified: problem does not exist for IE9
|
|
|
1075 if (!SimileAjax.Platform.browser.isIE)
|
|
|
1076 this._upright = false;
|
|
|
1077 else if (SimileAjax.Platform.browser.majorVersion > 8)
|
|
|
1078 this._upright = false;
|
|
|
1079 if (!this._upright) {
|
|
|
1080 this._upright = true;
|
|
|
1081 ctx.translate(0, canvas.height);
|
|
|
1082 ctx.scale(1, -1);
|
|
|
1083 }
|
|
|
1084 };
|
|
|
1085
|
|
|
1086 Timeplot._Impl.prototype._resizeCanvas = function() {
|
|
|
1087 var canvas = this.getCanvas();
|
|
|
1088 if (canvas.firstChild) {
|
|
|
1089 canvas.firstChild.style.width = canvas.clientWidth + 'px';
|
|
|
1090 canvas.firstChild.style.height = canvas.clientHeight + 'px';
|
|
|
1091 }
|
|
|
1092 for (var i = 0; i < this._plots.length; i++) {
|
|
|
1093 var opacityCanvas = this._plots[i]._opacityCanvas;
|
|
|
1094 if (opacityCanvas.firstChild) {
|
|
|
1095 opacityCanvas.firstChild.style.width = opacityCanvas.clientWidth + 'px';
|
|
|
1096 opacityCanvas.firstChild.style.height = opacityCanvas.clientHeight + 'px';
|
|
|
1097 }
|
|
|
1098 }
|
|
|
1099 };
|
|
|
1100
|
|
|
1101 Timeplot._Impl.prototype.getWidth = function() {
|
|
|
1102 var canvas = this.getCanvas();
|
|
|
1103 if ( typeof canvas.width != 'undefined' && this._containerDiv.clientWidth == 0) {
|
|
|
1104 return canvas.width;
|
|
|
1105 }
|
|
|
1106 return this._containerDiv.clientWidth;
|
|
|
1107 };
|
|
|
1108
|
|
|
1109 Timeplot._Impl.prototype.getHeight = function() {
|
|
|
1110 var canvas = this.getCanvas();
|
|
|
1111 if ( typeof canvas.height != 'undefined' && this._containerDiv.clientHeight == 0) {
|
|
|
1112 return canvas.height;
|
|
|
1113 }
|
|
|
1114 return this._containerDiv.clientHeight;
|
|
|
1115 };
|
|
|
1116
|
|
|
1117 Timeplot._Impl.prototype._prepareCanvas = function() {
|
|
|
1118 var canvas = this.getCanvas();
|
|
|
1119
|
|
|
1120 // using jQuery. note we calculate the average padding; if your
|
|
|
1121 // padding settings are not symmetrical, the labels will be off
|
|
|
1122 // since they expect to be centered on the canvas.
|
|
|
1123 var con = SimileAjax.jQuery(this._containerDiv);
|
|
|
1124 this._paddingX = (parseInt(con.css('paddingLeft')) + parseInt(con.css('paddingRight'))) / 2;
|
|
|
1125 this._paddingY = (parseInt(con.css('paddingTop')) + parseInt(con.css('paddingBottom'))) / 2;
|
|
|
1126
|
|
|
1127 if (isNaN(this._paddingX)) {
|
|
|
1128 this._paddingX = 0;
|
|
|
1129 }
|
|
|
1130 if (isNaN(this._paddingY)) {
|
|
|
1131 this._paddingY = 0;
|
|
|
1132 }
|
|
|
1133
|
|
|
1134 canvas.width = this.getWidth() - (this._paddingX * 2);
|
|
|
1135 canvas.height = this.getHeight() - (this._paddingY * 2);
|
|
|
1136
|
|
|
1137 var ctx = canvas.getContext('2d');
|
|
|
1138 this._setUpright(ctx, canvas);
|
|
|
1139 ctx.globalCompositeOperation = 'source-over';
|
|
|
1140 };
|
