Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/platin/js/Time/SimileTimeplotModify.js @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
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 };