add plugins to jsTestDriver.conf
[dygraphs.git] / dygraph-range-selector.js
CommitLineData
41da6a86
DV
1/*
2 * @license
3 * Copyright 2011 Paul Felix (paul.eric.felix@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
ccd9d7c2
PF
6
7/**
8 * @fileoverview This file contains the DygraphRangeSelector class used to provide
9 * a timeline range selector widget for dygraphs.
10 */
11
758a629f
DV
12/*jshint globalstrict: true */
13/*global Dygraph:false */
c0f54d4f
DV
14"use strict";
15
ccd9d7c2
PF
16/**
17 * The DygraphRangeSelector class provides a timeline range selector widget.
18 * @param {Dygraph} dygraph The dygraph object
19 * @constructor
20 */
c0f54d4f 21var DygraphRangeSelector = function(dygraph) {
ccd9d7c2 22 this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera;
920208fb 23 this.isUsingExcanvas_ = dygraph.isUsingExcanvas_;
ccd9d7c2 24 this.dygraph_ = dygraph;
73c5deff
PF
25 this.hasTouchInterface_ = typeof(TouchEvent) != 'undefined';
26 this.isMobileDevice_ = Math.min(screen.width, screen.height) < 480;
ccd9d7c2 27 this.createCanvases_();
920208fb
PF
28 if (this.isUsingExcanvas_) {
29 this.createIEPanOverlay_();
30 }
ccd9d7c2
PF
31 this.createZoomHandles_();
32 this.initInteraction_();
33};
34
35/**
36 * Adds the range selector to the dygraph.
37 * @param {Object} graphDiv The container div for the range selector.
38 * @param {DygraphLayout} layout The DygraphLayout object for this graph.
39 */
40DygraphRangeSelector.prototype.addToGraph = function(graphDiv, layout) {
41 this.layout_ = layout;
42 this.resize_();
43 graphDiv.appendChild(this.bgcanvas_);
44 graphDiv.appendChild(this.fgcanvas_);
45 graphDiv.appendChild(this.leftZoomHandle_);
46 graphDiv.appendChild(this.rightZoomHandle_);
47};
48
49/**
50 * Renders the static background portion of the range selector.
51 */
52DygraphRangeSelector.prototype.renderStaticLayer = function() {
53 this.resize_();
54 this.drawStaticLayer_();
55};
56
57/**
58 * Renders the interactive foreground portion of the range selector.
59 */
60DygraphRangeSelector.prototype.renderInteractiveLayer = function() {
61 if (this.isChangingRange_) {
62 return;
63 }
ccd9d7c2
PF
64 this.placeZoomHandles_();
65 this.drawInteractiveLayer_();
66};
67
68/**
69 * @private
70 * Resizes the range selector.
71 */
72DygraphRangeSelector.prototype.resize_ = function() {
920208fb 73 function setElementRect(canvas, rect) {
ccd9d7c2
PF
74 canvas.style.top = rect.y + 'px';
75 canvas.style.left = rect.x + 'px';
76 canvas.width = rect.w;
77 canvas.height = rect.h;
78 canvas.style.width = canvas.width + 'px'; // for IE
79 canvas.style.height = canvas.height + 'px'; // for IE
758a629f 80 }
ccd9d7c2 81
70be5ed1 82 var plotArea = this.layout_.getPlotArea();
ccd9d7c2
PF
83 var xAxisLabelHeight = this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize');
84 this.canvasRect_ = {
85 x: plotArea.x,
86 y: plotArea.y + plotArea.h + xAxisLabelHeight + 4,
87 w: plotArea.w,
88 h: this.attr_('rangeSelectorHeight')
89 };
90
920208fb
PF
91 setElementRect(this.bgcanvas_, this.canvasRect_);
92 setElementRect(this.fgcanvas_, this.canvasRect_);
ccd9d7c2
PF
93};
94
95DygraphRangeSelector.prototype.attr_ = function(name) {
96 return this.dygraph_.attr_(name);
97};
98
99/**
100 * @private
101 * Creates the background and foreground canvases.
102 */
103DygraphRangeSelector.prototype.createCanvases_ = function() {
104 this.bgcanvas_ = Dygraph.createCanvas();
88c4a47e 105 this.bgcanvas_.className = 'dygraph-rangesel-bgcanvas';
ccd9d7c2 106 this.bgcanvas_.style.position = 'absolute';
920208fb 107 this.bgcanvas_.style.zIndex = 9;
ccd9d7c2
PF
108 this.bgcanvas_ctx_ = Dygraph.getContext(this.bgcanvas_);
109
110 this.fgcanvas_ = Dygraph.createCanvas();
88c4a47e 111 this.fgcanvas_.className = 'dygraph-rangesel-fgcanvas';
ccd9d7c2 112 this.fgcanvas_.style.position = 'absolute';
920208fb 113 this.fgcanvas_.style.zIndex = 9;
ccd9d7c2
PF
114 this.fgcanvas_.style.cursor = 'default';
115 this.fgcanvas_ctx_ = Dygraph.getContext(this.fgcanvas_);
116};
117
118/**
119 * @private
920208fb
PF
120 * Creates overlay divs for IE/Excanvas so that mouse events are handled properly.
121 */
122DygraphRangeSelector.prototype.createIEPanOverlay_ = function() {
123 this.iePanOverlay_ = document.createElement("div");
124 this.iePanOverlay_.style.position = 'absolute';
125 this.iePanOverlay_.style.backgroundColor = 'white';
126 this.iePanOverlay_.style.filter = 'alpha(opacity=0)';
127 this.iePanOverlay_.style.display = 'none';
128 this.iePanOverlay_.style.cursor = 'move';
129 this.fgcanvas_.appendChild(this.iePanOverlay_);
130};
131
132/**
133 * @private
ccd9d7c2
PF
134 * Creates the zoom handle elements.
135 */
136DygraphRangeSelector.prototype.createZoomHandles_ = function() {
137 var img = new Image();
88c4a47e 138 img.className = 'dygraph-rangesel-zoomhandle';
ccd9d7c2 139 img.style.position = 'absolute';
920208fb 140 img.style.zIndex = 10;
ccd9d7c2
PF
141 img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place.
142 img.style.cursor = 'col-resize';
73c5deff 143
920208fb 144 if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data.
73c5deff
PF
145 img.width = 7;
146 img.height = 14;
147 img.style.backgroundColor = 'white';
148 img.style.border = '1px solid #333333'; // Just show box in IE7.
920208fb 149 } else {
73c5deff
PF
150 img.width = 9;
151 img.height = 16;
152 img.src = 'data:image/png;base64,' +
758a629f
DV
153'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' +
154'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' +
155'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' +
156'6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' +
157'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=';
920208fb 158 }
ccd9d7c2 159
73c5deff
PF
160 var minScreenDim = Math.min(screen.width, screen.height);
161 if (minScreenDim < 480) {
162 img.width *= 3;
163 img.height *= 3;
164 } else if (minScreenDim < 768) {
165 img.width *= 2;
166 img.height *= 2;
167 }
168
ccd9d7c2
PF
169 this.leftZoomHandle_ = img;
170 this.rightZoomHandle_ = img.cloneNode(false);
171};
172
173/**
174 * @private
175 * Sets up the interaction for the range selector.
176 */
177DygraphRangeSelector.prototype.initInteraction_ = function() {
178 var self = this;
179 var topElem = this.isIE_ ? document : window;
180 var xLast = 0;
181 var handle = null;
182 var isZooming = false;
183 var isPanning = false;
73c5deff 184 var dynamic = !this.isMobileDevice_ && !this.isUsingExcanvas_;
ccd9d7c2 185
758a629f
DV
186 // functions, defined below. Defining them this way (rather than with
187 // "function foo() {...}" makes JSHint happy.
188 var toXDataWindow, onZoomStart, onZoom, onZoomEnd, doZoom, isMouseInPanZone,
189 onPanStart, onPan, onPanEnd, doPan, onCanvasMouseMove;
190
73c5deff
PF
191 // Touch event functions
192 var onZoomHandleTouchEvent, onCanvasTouchEvent, addTouchEvents;
193
758a629f 194 toXDataWindow = function(zoomHandleStatus) {
ccd9d7c2
PF
195 var xDataLimits = self.dygraph_.xAxisExtremes();
196 var fact = (xDataLimits[1] - xDataLimits[0])/self.canvasRect_.w;
197 var xDataMin = xDataLimits[0] + (zoomHandleStatus.leftHandlePos - self.canvasRect_.x)*fact;
198 var xDataMax = xDataLimits[0] + (zoomHandleStatus.rightHandlePos - self.canvasRect_.x)*fact;
199 return [xDataMin, xDataMax];
200 };
201
758a629f 202 onZoomStart = function(e) {
ccd9d7c2
PF
203 Dygraph.cancelEvent(e);
204 isZooming = true;
205 xLast = e.screenX;
206 handle = e.target ? e.target : e.srcElement;
6a4587ac
RK
207 self.dygraph_.addEvent(topElem, 'mousemove', onZoom);
208 self.dygraph_.addEvent(topElem, 'mouseup', onZoomEnd);
ccd9d7c2
PF
209 self.fgcanvas_.style.cursor = 'col-resize';
210 };
211
758a629f 212 onZoom = function(e) {
ccd9d7c2
PF
213 if (!isZooming) {
214 return;
215 }
216 var delX = e.screenX - xLast;
217 if (Math.abs(delX) < 4) {
218 return;
219 }
220 xLast = e.screenX;
221 var zoomHandleStatus = self.getZoomHandleStatus_();
758a629f 222 var newPos;
ccd9d7c2 223 if (handle == self.leftZoomHandle_) {
758a629f 224 newPos = zoomHandleStatus.leftHandlePos + delX;
ccd9d7c2
PF
225 newPos = Math.min(newPos, zoomHandleStatus.rightHandlePos - handle.width - 3);
226 newPos = Math.max(newPos, self.canvasRect_.x);
227 } else {
758a629f 228 newPos = zoomHandleStatus.rightHandlePos + delX;
ccd9d7c2
PF
229 newPos = Math.min(newPos, self.canvasRect_.x + self.canvasRect_.w);
230 newPos = Math.max(newPos, zoomHandleStatus.leftHandlePos + handle.width + 3);
231 }
920208fb 232 var halfHandleWidth = handle.width/2;
ccd9d7c2
PF
233 handle.style.left = (newPos - halfHandleWidth) + 'px';
234 self.drawInteractiveLayer_();
235
236 // Zoom on the fly (if not using excanvas).
73c5deff 237 if (dynamic) {
ccd9d7c2
PF
238 doZoom();
239 }
240 };
241
758a629f 242 onZoomEnd = function(e) {
ccd9d7c2
PF
243 if (!isZooming) {
244 return;
245 }
246 isZooming = false;
247 Dygraph.removeEvent(topElem, 'mousemove', onZoom);
248 Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd);
249 self.fgcanvas_.style.cursor = 'default';
250
251 // If using excanvas, Zoom now.
73c5deff 252 if (!dynamic) {
ccd9d7c2
PF
253 doZoom();
254 }
255 };
256
758a629f 257 doZoom = function() {
ccd9d7c2
PF
258 try {
259 var zoomHandleStatus = self.getZoomHandleStatus_();
260 self.isChangingRange_ = true;
261 if (!zoomHandleStatus.isZoomed) {
262 self.dygraph_.doUnzoom_();
263 } else {
264 var xDataWindow = toXDataWindow(zoomHandleStatus);
265 self.dygraph_.doZoomXDates_(xDataWindow[0], xDataWindow[1]);
266 }
267 } finally {
268 self.isChangingRange_ = false;
269 }
270 };
271
758a629f 272 isMouseInPanZone = function(e) {
920208fb
PF
273 if (self.isUsingExcanvas_) {
274 return e.srcElement == self.iePanOverlay_;
275 } else {
73c5deff
PF
276 var rect = self.leftZoomHandle_.getBoundingClientRect();
277 var leftHandleClientX = rect.left + rect.width/2;
278 rect = self.rightZoomHandle_.getBoundingClientRect();
279 var rightHandleClientX = rect.left + rect.width/2;
280 return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX);
920208fb 281 }
ccd9d7c2
PF
282 };
283
758a629f 284 onPanStart = function(e) {
ccd9d7c2
PF
285 if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) {
286 Dygraph.cancelEvent(e);
287 isPanning = true;
288 xLast = e.screenX;
6a4587ac
RK
289 self.dygraph_.addEvent(topElem, 'mousemove', onPan);
290 self.dygraph_.addEvent(topElem, 'mouseup', onPanEnd);
ccd9d7c2
PF
291 }
292 };
293
758a629f 294 onPan = function(e) {
ccd9d7c2
PF
295 if (!isPanning) {
296 return;
297 }
920208fb 298 Dygraph.cancelEvent(e);
ccd9d7c2
PF
299
300 var delX = e.screenX - xLast;
301 if (Math.abs(delX) < 4) {
302 return;
303 }
304 xLast = e.screenX;
305
306 // Move range view
307 var zoomHandleStatus = self.getZoomHandleStatus_();
308 var leftHandlePos = zoomHandleStatus.leftHandlePos;
309 var rightHandlePos = zoomHandleStatus.rightHandlePos;
310 var rangeSize = rightHandlePos - leftHandlePos;
311 if (leftHandlePos + delX <= self.canvasRect_.x) {
312 leftHandlePos = self.canvasRect_.x;
313 rightHandlePos = leftHandlePos + rangeSize;
314 } else if (rightHandlePos + delX >= self.canvasRect_.x + self.canvasRect_.w) {
315 rightHandlePos = self.canvasRect_.x + self.canvasRect_.w;
316 leftHandlePos = rightHandlePos - rangeSize;
317 } else {
318 leftHandlePos += delX;
319 rightHandlePos += delX;
320 }
920208fb 321 var halfHandleWidth = self.leftZoomHandle_.width/2;
ccd9d7c2
PF
322 self.leftZoomHandle_.style.left = (leftHandlePos - halfHandleWidth) + 'px';
323 self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px';
324 self.drawInteractiveLayer_();
325
326 // Do pan on the fly (if not using excanvas).
73c5deff 327 if (dynamic) {
ccd9d7c2
PF
328 doPan();
329 }
330 };
331
758a629f 332 onPanEnd = function(e) {
ccd9d7c2
PF
333 if (!isPanning) {
334 return;
335 }
336 isPanning = false;
337 Dygraph.removeEvent(topElem, 'mousemove', onPan);
338 Dygraph.removeEvent(topElem, 'mouseup', onPanEnd);
339 // If using excanvas, do pan now.
73c5deff 340 if (!dynamic) {
ccd9d7c2
PF
341 doPan();
342 }
343 };
344
758a629f 345 doPan = function() {
ccd9d7c2
PF
346 try {
347 self.isChangingRange_ = true;
348 self.dygraph_.dateWindow_ = toXDataWindow(self.getZoomHandleStatus_());
349 self.dygraph_.drawGraph_(false);
350 } finally {
351 self.isChangingRange_ = false;
352 }
353 };
354
758a629f 355 onCanvasMouseMove = function(e) {
ccd9d7c2
PF
356 if (isZooming || isPanning) {
357 return;
358 }
359 var cursor = isMouseInPanZone(e) ? 'move' : 'default';
360 if (cursor != self.fgcanvas_.style.cursor) {
361 self.fgcanvas_.style.cursor = cursor;
362 }
363 };
364
73c5deff
PF
365 onZoomHandleTouchEvent = function(e) {
366 e.preventDefault();
367 if (e.type == 'touchstart') {
368 onZoomStart(e.targetTouches[0]);
369 } else if (e.type == 'touchmove') {
370 onZoom(e.targetTouches[0]);
371 } else {
372 onZoomEnd(e);
373 }
374 };
375
376 onCanvasTouchEvent = function(e) {
377 e.preventDefault();
378 if (e.type == 'touchstart') {
379 onPanStart(e.targetTouches[0]);
380 } else if (e.type == 'touchmove') {
381 onPan(e.targetTouches[0]);
382 } else {
383 onPanEnd(e);
384 }
385 };
386
387 addTouchEvents = function(elem, fn) {
6a4587ac
RK
388 var types = ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
389 for (var i = 0; i < types.length; i++) {
390 self.dygraph_.addEvent(elem, types[i], fn);
391 }
73c5deff
PF
392 };
393
3417f017
DV
394 this.dygraph_.attrs_.interactionModel =
395 Dygraph.Interaction.dragIsPanInteractionModel;
758a629f 396 this.dygraph_.attrs_.panEdgeFraction = 0.0001;
ccd9d7c2 397
920208fb 398 var dragStartEvent = window.opera ? 'mousedown' : 'dragstart';
6a4587ac
RK
399 this.dygraph_.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
400 this.dygraph_.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
920208fb
PF
401
402 if (this.isUsingExcanvas_) {
6a4587ac 403 this.dygraph_.addEvent(this.iePanOverlay_, 'mousedown', onPanStart);
920208fb 404 } else {
6a4587ac
RK
405 this.dygraph_.addEvent(this.fgcanvas_, 'mousedown', onPanStart);
406 this.dygraph_.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove);
920208fb 407 }
73c5deff
PF
408
409 // Touch events
410 if (this.hasTouchInterface_) {
411 addTouchEvents(this.leftZoomHandle_, onZoomHandleTouchEvent);
412 addTouchEvents(this.rightZoomHandle_, onZoomHandleTouchEvent);
413 addTouchEvents(this.fgcanvas_, onCanvasTouchEvent);
414 }
ccd9d7c2
PF
415};
416
417/**
418 * @private
419 * Draws the static layer in the background canvas.
420 */
421DygraphRangeSelector.prototype.drawStaticLayer_ = function() {
422 var ctx = this.bgcanvas_ctx_;
423 ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);
ccd9d7c2
PF
424 try {
425 this.drawMiniPlot_();
426 } catch(ex) {
5061b42f 427 Dygraph.warn(ex);
ccd9d7c2 428 }
920208fb 429
758a629f 430 var margin = 0.5;
920208fb
PF
431 this.bgcanvas_ctx_.lineWidth = 1;
432 ctx.strokeStyle = 'gray';
433 ctx.beginPath();
434 ctx.moveTo(margin, margin);
435 ctx.lineTo(margin, this.canvasRect_.h-margin);
436 ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin);
437 ctx.lineTo(this.canvasRect_.w-margin, margin);
438 ctx.stroke();
ccd9d7c2
PF
439};
440
441
442/**
443 * @private
444 * Draws the mini plot in the background canvas.
445 */
446DygraphRangeSelector.prototype.drawMiniPlot_ = function() {
447 var fillStyle = this.attr_('rangeSelectorPlotFillColor');
448 var strokeStyle = this.attr_('rangeSelectorPlotStrokeColor');
449 if (!fillStyle && !strokeStyle) {
450 return;
451 }
452
453 var combinedSeriesData = this.computeCombinedSeriesAndLimits_();
454 var yRange = combinedSeriesData.yMax - combinedSeriesData.yMin;
455
456 // Draw the mini plot.
457 var ctx = this.bgcanvas_ctx_;
758a629f 458 var margin = 0.5;
ccd9d7c2
PF
459
460 var xExtremes = this.dygraph_.xAxisExtremes();
461 var xRange = Math.max(xExtremes[1] - xExtremes[0], 1.e-30);
462 var xFact = (this.canvasRect_.w - margin)/xRange;
463 var yFact = (this.canvasRect_.h - margin)/yRange;
464 var canvasWidth = this.canvasRect_.w - margin;
465 var canvasHeight = this.canvasRect_.h - margin;
466
467 ctx.beginPath();
468 ctx.moveTo(margin, canvasHeight);
469 for (var i = 0; i < combinedSeriesData.data.length; i++) {
470 var dataPoint = combinedSeriesData.data[i];
471 var x = (dataPoint[0] - xExtremes[0])*xFact;
472 var y = canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact;
473 if (isFinite(x) && isFinite(y)) {
474 ctx.lineTo(x, y);
475 }
476 }
477 ctx.lineTo(canvasWidth, canvasHeight);
478 ctx.closePath();
479
480 if (fillStyle) {
481 var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
482 lingrad.addColorStop(0, 'white');
483 lingrad.addColorStop(1, fillStyle);
484 this.bgcanvas_ctx_.fillStyle = lingrad;
485 ctx.fill();
486 }
487
488 if (strokeStyle) {
489 this.bgcanvas_ctx_.strokeStyle = strokeStyle;
490 this.bgcanvas_ctx_.lineWidth = 1.5;
491 ctx.stroke();
492 }
493};
494
495/**
496 * @private
497 * Computes and returns the combinded series data along with min/max for the mini plot.
498 * @return {Object} An object containing combinded series array, ymin, ymax.
499 */
500DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() {
501 var data = this.dygraph_.rawData_;
502 var logscale = this.attr_('logscale');
503
504 // Create a combined series (average of all series values).
505 var combinedSeries = [];
506 var sum;
507 var count;
3810c27a 508 var mutipleValues;
758a629f 509 var i, j, k;
73c5deff 510 var xVal, yVal;
ccd9d7c2 511
3810c27a
PF
512 // Find out if data has multiple values per datapoint.
513 // Go to first data point that actually has values (see http://code.google.com/p/dygraphs/issues/detail?id=246)
514 for (i = 0; i < data.length; i++) {
73c5deff 515 if (data[i].length > 1 && data[i][1] !== null) {
3810c27a
PF
516 mutipleValues = typeof data[i][1] != 'number';
517 if (mutipleValues) {
518 sum = [];
519 count = [];
0826981a 520 for (k = 0; k < data[i][1].length; k++) {
3810c27a
PF
521 sum.push(0);
522 count.push(0);
523 }
524 }
525 break;
ccd9d7c2 526 }
ccd9d7c2
PF
527 }
528
758a629f 529 for (i = 0; i < data.length; i++) {
ccd9d7c2 530 var dataPoint = data[i];
73c5deff 531 xVal = dataPoint[0];
ccd9d7c2
PF
532
533 if (mutipleValues) {
758a629f 534 for (k = 0; k < sum.length; k++) {
ccd9d7c2
PF
535 sum[k] = count[k] = 0;
536 }
537 } else {
538 sum = count = 0;
539 }
540
758a629f 541 for (j = 1; j < dataPoint.length; j++) {
ccd9d7c2 542 if (this.dygraph_.visibility()[j-1]) {
73c5deff 543 var y;
ccd9d7c2 544 if (mutipleValues) {
758a629f
DV
545 for (k = 0; k < sum.length; k++) {
546 y = dataPoint[j][k];
547 if (y === null || isNaN(y)) continue;
ccd9d7c2
PF
548 sum[k] += y;
549 count[k]++;
550 }
551 } else {
758a629f
DV
552 y = dataPoint[j];
553 if (y === null || isNaN(y)) continue;
ccd9d7c2
PF
554 sum += y;
555 count++;
556 }
557 }
558 }
559
560 if (mutipleValues) {
758a629f 561 for (k = 0; k < sum.length; k++) {
ccd9d7c2
PF
562 sum[k] /= count[k];
563 }
564 yVal = sum.slice(0);
565 } else {
566 yVal = sum/count;
567 }
568
569 combinedSeries.push([xVal, yVal]);
570 }
571
572 // Account for roll period, fractions.
573 combinedSeries = this.dygraph_.rollingAverage(combinedSeries, this.dygraph_.rollPeriod_);
574
575 if (typeof combinedSeries[0][1] != 'number') {
758a629f
DV
576 for (i = 0; i < combinedSeries.length; i++) {
577 yVal = combinedSeries[i][1];
ccd9d7c2
PF
578 combinedSeries[i][1] = yVal[0];
579 }
580 }
581
582 // Compute the y range.
583 var yMin = Number.MAX_VALUE;
584 var yMax = -Number.MAX_VALUE;
758a629f
DV
585 for (i = 0; i < combinedSeries.length; i++) {
586 yVal = combinedSeries[i][1];
587 if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) {
ccd9d7c2
PF
588 yMin = Math.min(yMin, yVal);
589 yMax = Math.max(yMax, yVal);
590 }
591 }
592
593 // Convert Y data to log scale if needed.
594 // Also, expand the Y range to compress the mini plot a little.
758a629f 595 var extraPercent = 0.25;
ccd9d7c2
PF
596 if (logscale) {
597 yMax = Dygraph.log10(yMax);
598 yMax += yMax*extraPercent;
599 yMin = Dygraph.log10(yMin);
758a629f 600 for (i = 0; i < combinedSeries.length; i++) {
ccd9d7c2
PF
601 combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]);
602 }
603 } else {
604 var yExtra;
5061b42f 605 var yRange = yMax - yMin;
ccd9d7c2
PF
606 if (yRange <= Number.MIN_VALUE) {
607 yExtra = yMax*extraPercent;
608 } else {
609 yExtra = yRange*extraPercent;
610 }
611 yMax += yExtra;
612 yMin -= yExtra;
613 }
614
615 return {data: combinedSeries, yMin: yMin, yMax: yMax};
616};
617
618/**
619 * @private
620 * Places the zoom handles in the proper position based on the current X data window.
621 */
622DygraphRangeSelector.prototype.placeZoomHandles_ = function() {
623 var xExtremes = this.dygraph_.xAxisExtremes();
624 var xWindowLimits = this.dygraph_.xAxisRange();
625 var xRange = xExtremes[1] - xExtremes[0];
626 var leftPercent = Math.max(0, (xWindowLimits[0] - xExtremes[0])/xRange);
627 var rightPercent = Math.max(0, (xExtremes[1] - xWindowLimits[1])/xRange);
628 var leftCoord = this.canvasRect_.x + this.canvasRect_.w*leftPercent;
629 var rightCoord = this.canvasRect_.x + this.canvasRect_.w*(1 - rightPercent);
920208fb
PF
630 var handleTop = Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2);
631 var halfHandleWidth = this.leftZoomHandle_.width/2;
632 this.leftZoomHandle_.style.left = (leftCoord - halfHandleWidth) + 'px';
ccd9d7c2 633 this.leftZoomHandle_.style.top = handleTop + 'px';
920208fb 634 this.rightZoomHandle_.style.left = (rightCoord - halfHandleWidth) + 'px';
ccd9d7c2
PF
635 this.rightZoomHandle_.style.top = this.leftZoomHandle_.style.top;
636
637 this.leftZoomHandle_.style.visibility = 'visible';
638 this.rightZoomHandle_.style.visibility = 'visible';
639};
640
641/**
642 * @private
643 * Draws the interactive layer in the foreground canvas.
644 */
645DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() {
646 var ctx = this.fgcanvas_ctx_;
647 ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);
648 var margin = 1;
649 var width = this.canvasRect_.w - margin;
650 var height = this.canvasRect_.h - margin;
651 var zoomHandleStatus = this.getZoomHandleStatus_();
652
653 ctx.strokeStyle = 'black';
654 if (!zoomHandleStatus.isZoomed) {
655 ctx.beginPath();
656 ctx.moveTo(margin, margin);
657 ctx.lineTo(margin, height);
658 ctx.lineTo(width, height);
659 ctx.lineTo(width, margin);
660 ctx.stroke();
920208fb
PF
661 if (this.iePanOverlay_) {
662 this.iePanOverlay_.style.display = 'none';
663 }
ccd9d7c2 664 } else {
5061b42f
DV
665 var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x);
666 var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x);
ccd9d7c2
PF
667
668 ctx.fillStyle = 'rgba(240, 240, 240, 0.6)';
920208fb
PF
669 ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h);
670 ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h);
ccd9d7c2
PF
671
672 ctx.beginPath();
673 ctx.moveTo(margin, margin);
674 ctx.lineTo(leftHandleCanvasPos, margin);
675 ctx.lineTo(leftHandleCanvasPos, height);
676 ctx.lineTo(rightHandleCanvasPos, height);
677 ctx.lineTo(rightHandleCanvasPos, margin);
678 ctx.lineTo(width, margin);
679 ctx.stroke();
920208fb
PF
680
681 if (this.isUsingExcanvas_) {
682 this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px';
683 this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px';
684 this.iePanOverlay_.style.height = height + 'px';
685 this.iePanOverlay_.style.display = 'inline';
686 }
ccd9d7c2
PF
687 }
688};
689
690/**
691 * @private
692 * Returns the current zoom handle position information.
693 * @return {Object} The zoom handle status.
694 */
695DygraphRangeSelector.prototype.getZoomHandleStatus_ = function() {
920208fb 696 var halfHandleWidth = this.leftZoomHandle_.width/2;
758a629f
DV
697 var leftHandlePos = parseInt(this.leftZoomHandle_.style.left, 10) + halfHandleWidth;
698 var rightHandlePos = parseInt(this.rightZoomHandle_.style.left, 10) + halfHandleWidth;
ccd9d7c2
PF
699 return {
700 leftHandlePos: leftHandlePos,
701 rightHandlePos: rightHandlePos,
702 isZoomed: (leftHandlePos - 1 > this.canvasRect_.x || rightHandlePos + 1 < this.canvasRect_.x+this.canvasRect_.w)
703 };
704};