X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-range-selector.js;h=18eeee03f29ee4d7e931d1a68a692bd82e9573a7;hb=758a629f806fa73483f730fb343013acd0ace078;hp=05a5c6577f323f9dceba16f906cc132b2a4f822e;hpb=88c4a47e1ffbb16fa7abf7425c8a4b92f42cf3cd;p=dygraphs.git diff --git a/dygraph-range-selector.js b/dygraph-range-selector.js index 05a5c65..18eeee0 100644 --- a/dygraph-range-selector.js +++ b/dygraph-range-selector.js @@ -6,16 +6,23 @@ * a timeline range selector widget for dygraphs. */ +/*jshint globalstrict: true */ +/*global Dygraph:false */ +"use strict"; + /** * The DygraphRangeSelector class provides a timeline range selector widget. * @param {Dygraph} dygraph The dygraph object * @constructor */ -DygraphRangeSelector = function(dygraph) { +var DygraphRangeSelector = function(dygraph) { this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera; - this.isUsingExcanvas = typeof(G_vmlCanvasManager) != 'undefined'; + this.isUsingExcanvas_ = dygraph.isUsingExcanvas_; this.dygraph_ = dygraph; this.createCanvases_(); + if (this.isUsingExcanvas_) { + this.createIEPanOverlay_(); + } this.createZoomHandles_(); this.initInteraction_(); }; @@ -49,16 +56,6 @@ DygraphRangeSelector.prototype.renderInteractiveLayer = function() { if (this.isChangingRange_) { return; } - - // The zoom handle image may not be loaded yet. May need to try again later. - if (this.leftZoomHandle_.height == 0 && this.leftZoomHandle_.retryCount != 5) { - var self = this; - setTimeout(function() { self.renderInteractiveLayer(); }, 300); - var retryCount = this.leftZoomHandle_.retryCount; - this.leftZoomHandle_.retryCount = retryCount == undefined ? 1 : retryCount+1; - return; - } - this.placeZoomHandles_(); this.drawInteractiveLayer_(); }; @@ -68,16 +65,16 @@ DygraphRangeSelector.prototype.renderInteractiveLayer = function() { * Resizes the range selector. */ DygraphRangeSelector.prototype.resize_ = function() { - function setCanvasRect(canvas, rect) { + function setElementRect(canvas, rect) { canvas.style.top = rect.y + 'px'; canvas.style.left = rect.x + 'px'; canvas.width = rect.w; canvas.height = rect.h; canvas.style.width = canvas.width + 'px'; // for IE canvas.style.height = canvas.height + 'px'; // for IE - }; + } - var plotArea = this.layout_.plotArea; + var plotArea = this.layout_.getPlotArea(); var xAxisLabelHeight = this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize'); this.canvasRect_ = { x: plotArea.x, @@ -86,8 +83,8 @@ DygraphRangeSelector.prototype.resize_ = function() { h: this.attr_('rangeSelectorHeight') }; - setCanvasRect(this.bgcanvas_, this.canvasRect_); - setCanvasRect(this.fgcanvas_, this.canvasRect_); + setElementRect(this.bgcanvas_, this.canvasRect_); + setElementRect(this.fgcanvas_, this.canvasRect_); }; DygraphRangeSelector.prototype.attr_ = function(name) { @@ -102,31 +99,57 @@ DygraphRangeSelector.prototype.createCanvases_ = function() { this.bgcanvas_ = Dygraph.createCanvas(); this.bgcanvas_.className = 'dygraph-rangesel-bgcanvas'; this.bgcanvas_.style.position = 'absolute'; + this.bgcanvas_.style.zIndex = 9; this.bgcanvas_ctx_ = Dygraph.getContext(this.bgcanvas_); this.fgcanvas_ = Dygraph.createCanvas(); this.fgcanvas_.className = 'dygraph-rangesel-fgcanvas'; this.fgcanvas_.style.position = 'absolute'; + this.fgcanvas_.style.zIndex = 9; this.fgcanvas_.style.cursor = 'default'; this.fgcanvas_ctx_ = Dygraph.getContext(this.fgcanvas_); }; /** * @private + * Creates overlay divs for IE/Excanvas so that mouse events are handled properly. + */ +DygraphRangeSelector.prototype.createIEPanOverlay_ = function() { + this.iePanOverlay_ = document.createElement("div"); + this.iePanOverlay_.style.position = 'absolute'; + this.iePanOverlay_.style.backgroundColor = 'white'; + this.iePanOverlay_.style.filter = 'alpha(opacity=0)'; + this.iePanOverlay_.style.display = 'none'; + this.iePanOverlay_.style.cursor = 'move'; + this.fgcanvas_.appendChild(this.iePanOverlay_); +}; + +/** + * @private * Creates the zoom handle elements. */ DygraphRangeSelector.prototype.createZoomHandles_ = function() { var img = new Image(); img.className = 'dygraph-rangesel-zoomhandle'; img.style.position = 'absolute'; + img.style.zIndex = 10; img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place. img.style.cursor = 'col-resize'; - img.src = 'data:image/png;base64,\ -iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA\ -zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv\ -bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl\ -6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s\ -qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII='; + if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data. + img.width = 7; + img.height = 14; + img.style.backgroundColor = 'white'; + img.style.border = '1px solid #333333'; // Just show box in IE7. + } else { + img.width = 9; + img.height = 16; + img.src = 'data:image/png;base64,' + +'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' + +'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' + +'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' + +'6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' + +'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII='; + } this.leftZoomHandle_ = img; this.rightZoomHandle_ = img.cloneNode(false); @@ -144,7 +167,12 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { var isZooming = false; var isPanning = false; - function toXDataWindow(zoomHandleStatus) { + // functions, defined below. Defining them this way (rather than with + // "function foo() {...}" makes JSHint happy. + var toXDataWindow, onZoomStart, onZoom, onZoomEnd, doZoom, isMouseInPanZone, + onPanStart, onPan, onPanEnd, doPan, onCanvasMouseMove; + + toXDataWindow = function(zoomHandleStatus) { var xDataLimits = self.dygraph_.xAxisExtremes(); var fact = (xDataLimits[1] - xDataLimits[0])/self.canvasRect_.w; var xDataMin = xDataLimits[0] + (zoomHandleStatus.leftHandlePos - self.canvasRect_.x)*fact; @@ -152,7 +180,7 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { return [xDataMin, xDataMax]; }; - function onZoomStart(e) { + onZoomStart = function(e) { Dygraph.cancelEvent(e); isZooming = true; xLast = e.screenX; @@ -162,7 +190,7 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { self.fgcanvas_.style.cursor = 'col-resize'; }; - function onZoom(e) { + onZoom = function(e) { if (!isZooming) { return; } @@ -172,26 +200,27 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { } xLast = e.screenX; var zoomHandleStatus = self.getZoomHandleStatus_(); - var halfHandleWidth = Math.round(handle.width/2); + var newPos; if (handle == self.leftZoomHandle_) { - var newPos = zoomHandleStatus.leftHandlePos + delX; + newPos = zoomHandleStatus.leftHandlePos + delX; newPos = Math.min(newPos, zoomHandleStatus.rightHandlePos - handle.width - 3); newPos = Math.max(newPos, self.canvasRect_.x); } else { - var newPos = zoomHandleStatus.rightHandlePos + delX; + newPos = zoomHandleStatus.rightHandlePos + delX; newPos = Math.min(newPos, self.canvasRect_.x + self.canvasRect_.w); newPos = Math.max(newPos, zoomHandleStatus.leftHandlePos + handle.width + 3); } + var halfHandleWidth = handle.width/2; handle.style.left = (newPos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); // Zoom on the fly (if not using excanvas). - if (!self.isUsingExcanvas) { + if (!self.isUsingExcanvas_) { doZoom(); } }; - function onZoomEnd(e) { + onZoomEnd = function(e) { if (!isZooming) { return; } @@ -201,12 +230,12 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { self.fgcanvas_.style.cursor = 'default'; // If using excanvas, Zoom now. - if (self.isUsingExcanvas) { + if (self.isUsingExcanvas_) { doZoom(); } }; - function doZoom() { + doZoom = function() { try { var zoomHandleStatus = self.getZoomHandleStatus_(); self.isChangingRange_ = true; @@ -221,14 +250,18 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { } }; - function isMouseInPanZone(e) { - // Getting clientX directly from the event is not accurate enough :( - var clientX = self.canvasRect_.x + (e.layerX != undefined ? e.layerX : e.offsetX); - var zoomHandleStatus = self.getZoomHandleStatus_(); - return (clientX > zoomHandleStatus.leftHandlePos && clientX < zoomHandleStatus.rightHandlePos); + isMouseInPanZone = function(e) { + if (self.isUsingExcanvas_) { + return e.srcElement == self.iePanOverlay_; + } else { + // Getting clientX directly from the event is not accurate enough :( + var clientX = self.canvasRect_.x + (e.layerX !== undefined ? e.layerX : e.offsetX); + var zoomHandleStatus = self.getZoomHandleStatus_(); + return (clientX > zoomHandleStatus.leftHandlePos && clientX < zoomHandleStatus.rightHandlePos); + } }; - function onPanStart(e) { + onPanStart = function(e) { if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) { Dygraph.cancelEvent(e); isPanning = true; @@ -238,10 +271,11 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { } }; - function onPan(e) { + onPan = function(e) { if (!isPanning) { return; } + Dygraph.cancelEvent(e); var delX = e.screenX - xLast; if (Math.abs(delX) < 4) { @@ -264,18 +298,18 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { leftHandlePos += delX; rightHandlePos += delX; } - var halfHandleWidth = Math.round(self.leftZoomHandle_.width/2); + var halfHandleWidth = self.leftZoomHandle_.width/2; self.leftZoomHandle_.style.left = (leftHandlePos - halfHandleWidth) + 'px'; self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); // Do pan on the fly (if not using excanvas). - if (!self.isUsingExcanvas) { + if (!self.isUsingExcanvas_) { doPan(); } }; - function onPanEnd(e) { + onPanEnd = function(e) { if (!isPanning) { return; } @@ -283,12 +317,12 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { Dygraph.removeEvent(topElem, 'mousemove', onPan); Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); // If using excanvas, do pan now. - if (self.isUsingExcanvas) { + if (self.isUsingExcanvas_) { doPan(); } }; - function doPan() { + doPan = function() { try { self.isChangingRange_ = true; self.dygraph_.dateWindow_ = toXDataWindow(self.getZoomHandleStatus_()); @@ -298,7 +332,7 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { } }; - function onCanvasMouseMove(e) { + onCanvasMouseMove = function(e) { if (isZooming || isPanning) { return; } @@ -326,12 +360,18 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { }; this.dygraph_.attrs_.interactionModel = interactionModel; - this.dygraph_.attrs_.panEdgeFraction = .0001; + this.dygraph_.attrs_.panEdgeFraction = 0.0001; + + var dragStartEvent = window.opera ? 'mousedown' : 'dragstart'; + Dygraph.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart); + Dygraph.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart); - Dygraph.addEvent(this.leftZoomHandle_, 'dragstart', onZoomStart); - Dygraph.addEvent(this.rightZoomHandle_, 'dragstart', onZoomStart); - Dygraph.addEvent(this.fgcanvas_, 'mousedown', onPanStart); - Dygraph.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove); + if (this.isUsingExcanvas_) { + Dygraph.addEvent(this.iePanOverlay_, 'mousedown', onPanStart); + } else { + Dygraph.addEvent(this.fgcanvas_, 'mousedown', onPanStart); + Dygraph.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove); + } }; /** @@ -341,22 +381,21 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { DygraphRangeSelector.prototype.drawStaticLayer_ = function() { var ctx = this.bgcanvas_ctx_; ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h); - var margin = .5; try { this.drawMiniPlot_(); } catch(ex) { + Dygraph.warn(ex); } - ctx.strokeStyle = 'lightgray'; - if (false) { - ctx.strokeRect(margin, margin, this.canvasRect_.w-margin, this.canvasRect_.h-margin); - } else { - ctx.beginPath(); - ctx.moveTo(margin, margin); - ctx.lineTo(margin, this.canvasRect_.h-margin); - ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin); - ctx.lineTo(this.canvasRect_.w-margin, margin); - ctx.stroke(); - } + + var margin = 0.5; + this.bgcanvas_ctx_.lineWidth = 1; + ctx.strokeStyle = 'gray'; + ctx.beginPath(); + ctx.moveTo(margin, margin); + ctx.lineTo(margin, this.canvasRect_.h-margin); + ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin); + ctx.lineTo(this.canvasRect_.w-margin, margin); + ctx.stroke(); }; @@ -376,7 +415,7 @@ DygraphRangeSelector.prototype.drawMiniPlot_ = function() { // Draw the mini plot. var ctx = this.bgcanvas_ctx_; - var margin = .5; + var margin = 0.5; var xExtremes = this.dygraph_.xAxisExtremes(); var xRange = Math.max(xExtremes[1] - xExtremes[0], 1.e-30); @@ -426,43 +465,44 @@ DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { var combinedSeries = []; var sum; var count; + var yVal, y; var mutipleValues = typeof data[0][1] != 'number'; + var i, j, k; if (mutipleValues) { sum = []; count = []; - for (var k = 0; k < data[0][1].length; k++) { + for (k = 0; k < data[0][1].length; k++) { sum.push(0); count.push(0); } mutipleValues = true; } - for (var i = 0; i < data.length; i++) { + for (i = 0; i < data.length; i++) { var dataPoint = data[i]; var xVal = dataPoint[0]; - var yVal; if (mutipleValues) { - for (var k = 0; k < sum.length; k++) { + for (k = 0; k < sum.length; k++) { sum[k] = count[k] = 0; } } else { sum = count = 0; } - for (var j = 1; j < dataPoint.length; j++) { + for (j = 1; j < dataPoint.length; j++) { if (this.dygraph_.visibility()[j-1]) { if (mutipleValues) { - for (var k = 0; k < sum.length; k++) { - var y = dataPoint[j][k]; - if (y == null || isNaN(y)) continue; + for (k = 0; k < sum.length; k++) { + y = dataPoint[j][k]; + if (y === null || isNaN(y)) continue; sum[k] += y; count[k]++; } } else { - var y = dataPoint[j]; - if (y == null || isNaN(y)) continue; + y = dataPoint[j]; + if (y === null || isNaN(y)) continue; sum += y; count++; } @@ -470,7 +510,7 @@ DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { } if (mutipleValues) { - for (var k = 0; k < sum.length; k++) { + for (k = 0; k < sum.length; k++) { sum[k] /= count[k]; } yVal = sum.slice(0); @@ -485,8 +525,8 @@ DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { combinedSeries = this.dygraph_.rollingAverage(combinedSeries, this.dygraph_.rollPeriod_); if (typeof combinedSeries[0][1] != 'number') { - for (var i = 0; i < combinedSeries.length; i++) { - var yVal = combinedSeries[i][1]; + for (i = 0; i < combinedSeries.length; i++) { + yVal = combinedSeries[i][1]; combinedSeries[i][1] = yVal[0]; } } @@ -494,9 +534,9 @@ DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { // Compute the y range. var yMin = Number.MAX_VALUE; var yMax = -Number.MAX_VALUE; - for (var i = 0; i < combinedSeries.length; i++) { - var yVal = combinedSeries[i][1]; - if (!logscale || yVal > 0) { + for (i = 0; i < combinedSeries.length; i++) { + yVal = combinedSeries[i][1]; + if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) { yMin = Math.min(yMin, yVal); yMax = Math.max(yMax, yVal); } @@ -504,17 +544,17 @@ DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { // Convert Y data to log scale if needed. // Also, expand the Y range to compress the mini plot a little. - var extraPercent = .25; + var extraPercent = 0.25; if (logscale) { yMax = Dygraph.log10(yMax); yMax += yMax*extraPercent; yMin = Dygraph.log10(yMin); - for (var i = 0; i < combinedSeries.length; i++) { + for (i = 0; i < combinedSeries.length; i++) { combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]); } } else { var yExtra; - yRange = yMax - yMin; + var yRange = yMax - yMin; if (yRange <= Number.MIN_VALUE) { yExtra = yMax*extraPercent; } else { @@ -539,11 +579,11 @@ DygraphRangeSelector.prototype.placeZoomHandles_ = function() { var rightPercent = Math.max(0, (xExtremes[1] - xWindowLimits[1])/xRange); var leftCoord = this.canvasRect_.x + this.canvasRect_.w*leftPercent; var rightCoord = this.canvasRect_.x + this.canvasRect_.w*(1 - rightPercent); - var handleTop = Math.round(Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2)); - var halfHandleWidth = Math.round(this.leftZoomHandle_.width/2); - this.leftZoomHandle_.style.left = Math.round(leftCoord - halfHandleWidth) + 'px'; + var handleTop = Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2); + var halfHandleWidth = this.leftZoomHandle_.width/2; + this.leftZoomHandle_.style.left = (leftCoord - halfHandleWidth) + 'px'; this.leftZoomHandle_.style.top = handleTop + 'px'; - this.rightZoomHandle_.style.left = Math.round(rightCoord - halfHandleWidth) + 'px'; + this.rightZoomHandle_.style.left = (rightCoord - halfHandleWidth) + 'px'; this.rightZoomHandle_.style.top = this.leftZoomHandle_.style.top; this.leftZoomHandle_.style.visibility = 'visible'; @@ -570,13 +610,16 @@ DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() { ctx.lineTo(width, height); ctx.lineTo(width, margin); ctx.stroke(); + if (this.iePanOverlay_) { + this.iePanOverlay_.style.display = 'none'; + } } else { - leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); - rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); + var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); + var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); ctx.fillStyle = 'rgba(240, 240, 240, 0.6)'; - ctx.fillRect(margin, margin, leftHandleCanvasPos, height - margin); - ctx.fillRect(rightHandleCanvasPos, margin, width - rightHandleCanvasPos, height - margin); + ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h); + ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h); ctx.beginPath(); ctx.moveTo(margin, margin); @@ -586,6 +629,13 @@ DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() { ctx.lineTo(rightHandleCanvasPos, margin); ctx.lineTo(width, margin); ctx.stroke(); + + if (this.isUsingExcanvas_) { + this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px'; + this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px'; + this.iePanOverlay_.style.height = height + 'px'; + this.iePanOverlay_.style.display = 'inline'; + } } }; @@ -595,9 +645,9 @@ DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() { * @return {Object} The zoom handle status. */ DygraphRangeSelector.prototype.getZoomHandleStatus_ = function() { - var halfHandleWidth = Math.round(this.leftZoomHandle_.width/2); - var leftHandlePos = parseInt(this.leftZoomHandle_.style.left) + halfHandleWidth; - var rightHandlePos = parseInt(this.rightZoomHandle_.style.left) + halfHandleWidth; + var halfHandleWidth = this.leftZoomHandle_.width/2; + var leftHandlePos = parseInt(this.leftZoomHandle_.style.left, 10) + halfHandleWidth; + var rightHandlePos = parseInt(this.rightZoomHandle_.style.left, 10) + halfHandleWidth; return { leftHandlePos: leftHandlePos, rightHandlePos: rightHandlePos,