X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Frange-selector.js;h=6819eea30cea7fbb8cc4f35bee5a6b1f3562c441;hb=79cb28dd681a26f9e7824f61d95c7458ca5104e7;hp=797140cd0fa0810076f7def64672fe33b2f79785;hpb=0cd1ad15aefb3bd6507886e4cbba0d7587a56610;p=dygraphs.git diff --git a/plugins/range-selector.js b/plugins/range-selector.js index 797140c..6819eea 100644 --- a/plugins/range-selector.js +++ b/plugins/range-selector.js @@ -12,20 +12,14 @@ Dygraph.Plugins.RangeSelector = (function() { -/*jshint globalstrict: true */ /*global Dygraph:false */ "use strict"; -// Range selector status values -var NOT_CREATED = 0; // Range selector interface has not been created -var CREATED = 1 << 0; // Range selector interface has been created -var ADDED_TO_GRAPH = 1 << 1; // Range selector elements have been added to the graph - var rangeSelector = function() { this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera; this.hasTouchInterface_ = typeof(TouchEvent) != 'undefined'; this.isMobileDevice_ = /mobile|android/gi.test(navigator.appVersion); - this.status_ = NOT_CREATED; + this.interfaceCreated_ = false; }; rangeSelector.prototype.toString = function() { @@ -34,9 +28,6 @@ rangeSelector.prototype.toString = function() { rangeSelector.prototype.activate = function(dygraph) { this.dygraph_ = dygraph; - this.layout_ = dygraph.layout_; - this.graphDiv_ = dygraph.graphDiv; - this.isUsingExcanvas_ = dygraph.isUsingExcanvas_; if (this.getOption_('showRangeSelector')) { this.createInterface_(); } @@ -52,19 +43,18 @@ rangeSelector.prototype.destroy = function() { this.fgcanvas_ = null; this.leftZoomHandle_ = null; this.rightZoomHandle_ = null; - this.iePanOverlay_ = null; }; //------------------------------------------------------------------ // Private methods //------------------------------------------------------------------ -rangeSelector.prototype.getOption_ = function(name) { - return this.dygraph_.getOption(name); +rangeSelector.prototype.getOption_ = function(name, opt_series) { + return this.dygraph_.getOption(name, opt_series); }; rangeSelector.prototype.setDefaultOption_ = function(name, value) { - return this.dygraph_.attrs_[name] = value; + this.dygraph_.attrs_[name] = value; }; /** @@ -73,20 +63,17 @@ rangeSelector.prototype.setDefaultOption_ = function(name, value) { */ rangeSelector.prototype.createInterface_ = function() { this.createCanvases_(); - if (this.isUsingExcanvas_) { - this.createIEPanOverlay_(); - } this.createZoomHandles_(); this.initInteraction_(); // Range selector and animatedZooms have a bad interaction. See issue 359. if (this.getOption_('animatedZooms')) { - this.dygraph_.warn('Animated zooms and range selector are not compatible; disabling animatedZooms.'); + console.warn('Animated zooms and range selector are not compatible; disabling animatedZooms.'); this.dygraph_.updateOptions({animatedZooms: false}, true); } + this.interfaceCreated_ = true; this.addToGraph_(); - this.status_ = CREATED; }; /** @@ -94,12 +81,11 @@ rangeSelector.prototype.createInterface_ = function() { * Adds the range selector to the graph. */ rangeSelector.prototype.addToGraph_ = function() { - var graphDiv = this.graphDiv_; + var graphDiv = this.graphDiv_ = this.dygraph_.graphDiv; graphDiv.appendChild(this.bgcanvas_); graphDiv.appendChild(this.fgcanvas_); graphDiv.appendChild(this.leftZoomHandle_); graphDiv.appendChild(this.rightZoomHandle_); - this.status_ |= ADDED_TO_GRAPH; }; /** @@ -112,7 +98,7 @@ rangeSelector.prototype.removeFromGraph_ = function() { graphDiv.removeChild(this.fgcanvas_); graphDiv.removeChild(this.leftZoomHandle_); graphDiv.removeChild(this.rightZoomHandle_); - this.status_ ^= ADDED_TO_GRAPH; + this.graphDiv_ = null; }; /** @@ -130,7 +116,7 @@ rangeSelector.prototype.reserveSpace_ = function(e) { * Renders the static portion of the range selector at the predraw stage. */ rangeSelector.prototype.renderStaticLayer_ = function() { - if (!this.updateInterfaceStatus_()) { + if (!this.updateVisibility_()) { return; } this.resize_(); @@ -142,7 +128,7 @@ rangeSelector.prototype.renderStaticLayer_ = function() { * Renders the interactive portion of the range selector after the chart has been drawn. */ rangeSelector.prototype.renderInteractiveLayer_ = function() { - if (!this.updateInterfaceStatus_() || this.isChangingRange_) { + if (!this.updateVisibility_() || this.isChangingRange_) { return; } this.placeZoomHandles_(); @@ -151,17 +137,17 @@ rangeSelector.prototype.renderInteractiveLayer_ = function() { /** * @private - * Check to see if the range selector is enabled/disabled and update interface accordingly. + * Check to see if the range selector is enabled/disabled and update visibility accordingly. */ -rangeSelector.prototype.updateInterfaceStatus_ = function() { +rangeSelector.prototype.updateVisibility_ = function() { var enabled = this.getOption_('showRangeSelector'); if (enabled) { - if (!(this.status_ & CREATED)) { + if (!this.interfaceCreated_) { this.createInterface_(); - } else if (!(this.status_ & ADDED_TO_GRAPH)) { + } else if (!this.graphDiv_ || !this.graphDiv_.parentNode) { this.addToGraph_(); } - } else if (this.status_ & ADDED_TO_GRAPH) { + } else if (this.graphDiv_) { this.removeFromGraph_(); var dygraph = this.dygraph_; setTimeout(function() { dygraph.width_ = 0; dygraph.resize(); }, 1); @@ -174,17 +160,27 @@ rangeSelector.prototype.updateInterfaceStatus_ = function() { * Resizes the range selector. */ rangeSelector.prototype.resize_ = function() { - function setElementRect(canvas, rect) { + function setElementRect(canvas, context, rect) { + var canvasScale = Dygraph.getContextPixelRatio(context); + 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 + canvas.width = rect.w * canvasScale; + canvas.height = rect.h * canvasScale; + canvas.style.width = rect.w + 'px'; + canvas.style.height = rect.h + 'px'; + + if(canvasScale != 1) { + context.scale(canvasScale, canvasScale); + } } - var plotArea = this.layout_.getPlotArea(); - var xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); + var plotArea = this.dygraph_.layout_.getPlotArea(); + + var xAxisLabelHeight = 0; + if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) { + xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); + } this.canvasRect_ = { x: plotArea.x, y: plotArea.y + plotArea.h + xAxisLabelHeight + 4, @@ -192,8 +188,8 @@ rangeSelector.prototype.resize_ = function() { h: this.getOption_('rangeSelectorHeight') }; - setElementRect(this.bgcanvas_, this.canvasRect_); - setElementRect(this.fgcanvas_, this.canvasRect_); + setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_); + setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_); }; /** @@ -217,20 +213,6 @@ rangeSelector.prototype.createCanvases_ = function() { /** * @private - * Creates overlay divs for IE/Excanvas so that mouse events are handled properly. - */ -rangeSelector.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. */ rangeSelector.prototype.createZoomHandles_ = function() { @@ -272,12 +254,12 @@ rangeSelector.prototype.createZoomHandles_ = function() { */ rangeSelector.prototype.initInteraction_ = function() { var self = this; - var topElem = this.isIE_ ? document : window; - var xLast = 0; + var topElem = document; + var clientXLast = 0; var handle = null; var isZooming = false; var isPanning = false; - var dynamic = !this.isMobileDevice_ && !this.isUsingExcanvas_; + var dynamic = !this.isMobileDevice_; // We cover iframes during mouse interactions. See comments in // dygraph-utils.js for more info on why this is a good idea. @@ -286,7 +268,7 @@ rangeSelector.prototype.initInteraction_ = function() { // 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, applyBrowserZoomLevel; + onPanStart, onPan, onPanEnd, doPan, onCanvasHover; // Touch event functions var onZoomHandleTouchEvent, onCanvasTouchEvent, addTouchEvents; @@ -299,22 +281,16 @@ rangeSelector.prototype.initInteraction_ = function() { return [xDataMin, xDataMax]; }; - applyBrowserZoomLevel = function(delX) { - var zoom = window.outerWidth/document.documentElement.clientWidth; - if (!isNaN(zoom)) { - return delX/zoom; - } else { - return delX; - } - }; - onZoomStart = function(e) { Dygraph.cancelEvent(e); isZooming = true; - xLast = e.screenX; + clientXLast = e.clientX; handle = e.target ? e.target : e.srcElement; - self.dygraph_.addEvent(topElem, 'mousemove', onZoom); - self.dygraph_.addEvent(topElem, 'mouseup', onZoomEnd); + if (e.type === 'mousedown' || e.type === 'dragstart') { + // These events are removed manually. + Dygraph.addEvent(topElem, 'mousemove', onZoom); + Dygraph.addEvent(topElem, 'mouseup', onZoomEnd); + } self.fgcanvas_.style.cursor = 'col-resize'; tarp.cover(); return true; @@ -325,13 +301,12 @@ rangeSelector.prototype.initInteraction_ = function() { return false; } Dygraph.cancelEvent(e); - var delX = e.screenX - xLast; - if (Math.abs(delX) < 4 || e.screenX === 0) { - // First iPad move event seems to have screenX = 0 + + var delX = e.clientX - clientXLast; + if (Math.abs(delX) < 4) { return true; } - xLast = e.screenX; - delX = applyBrowserZoomLevel(delX); + clientXLast = e.clientX; // Move handle. var zoomHandleStatus = self.getZoomHandleStatus_(); @@ -349,7 +324,7 @@ rangeSelector.prototype.initInteraction_ = function() { handle.style.left = (newPos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); - // Zoom on the fly (if not using excanvas). + // Zoom on the fly. if (dynamic) { doZoom(); } @@ -366,7 +341,7 @@ rangeSelector.prototype.initInteraction_ = function() { Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd); self.fgcanvas_.style.cursor = 'default'; - // If using excanvas, Zoom now. + // If on a slower device, zoom now. if (!dynamic) { doZoom(); } @@ -389,24 +364,23 @@ rangeSelector.prototype.initInteraction_ = function() { }; isMouseInPanZone = function(e) { - if (self.isUsingExcanvas_) { - return e.srcElement == self.iePanOverlay_; - } else { - var rect = self.leftZoomHandle_.getBoundingClientRect(); - var leftHandleClientX = rect.left + rect.width/2; - rect = self.rightZoomHandle_.getBoundingClientRect(); - var rightHandleClientX = rect.left + rect.width/2; - return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX); - } + var rect = self.leftZoomHandle_.getBoundingClientRect(); + var leftHandleClientX = rect.left + rect.width/2; + rect = self.rightZoomHandle_.getBoundingClientRect(); + var rightHandleClientX = rect.left + rect.width/2; + return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX); }; onPanStart = function(e) { if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) { Dygraph.cancelEvent(e); isPanning = true; - xLast = e.screenX; - self.dygraph_.addEvent(topElem, 'mousemove', onPan); - self.dygraph_.addEvent(topElem, 'mouseup', onPanEnd); + clientXLast = e.clientX; + if (e.type === 'mousedown') { + // These events are removed manually. + Dygraph.addEvent(topElem, 'mousemove', onPan); + Dygraph.addEvent(topElem, 'mouseup', onPanEnd); + } return true; } return false; @@ -418,12 +392,11 @@ rangeSelector.prototype.initInteraction_ = function() { } Dygraph.cancelEvent(e); - var delX = e.screenX - xLast; + var delX = e.clientX - clientXLast; if (Math.abs(delX) < 4) { return true; } - xLast = e.screenX; - delX = applyBrowserZoomLevel(delX); + clientXLast = e.clientX; // Move range view var zoomHandleStatus = self.getZoomHandleStatus_(); @@ -445,7 +418,7 @@ rangeSelector.prototype.initInteraction_ = function() { self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); - // Do pan on the fly (if not using excanvas). + // Do pan on the fly. if (dynamic) { doPan(); } @@ -459,7 +432,7 @@ rangeSelector.prototype.initInteraction_ = function() { isPanning = false; Dygraph.removeEvent(topElem, 'mousemove', onPan); Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); - // If using excanvas, do pan now. + // If on a slower device, do pan now. if (!dynamic) { doPan(); } @@ -476,7 +449,7 @@ rangeSelector.prototype.initInteraction_ = function() { } }; - onCanvasMouseMove = function(e) { + onCanvasHover = function(e) { if (isZooming || isPanning) { return; } @@ -517,7 +490,7 @@ rangeSelector.prototype.initInteraction_ = function() { addTouchEvents = function(elem, fn) { var types = ['touchstart', 'touchend', 'touchmove', 'touchcancel']; for (var i = 0; i < types.length; i++) { - self.dygraph_.addEvent(elem, types[i], fn); + self.dygraph_.addAndTrackEvent(elem, types[i], fn); } }; @@ -525,15 +498,11 @@ rangeSelector.prototype.initInteraction_ = function() { this.setDefaultOption_('panEdgeFraction', 0.0001); var dragStartEvent = window.opera ? 'mousedown' : 'dragstart'; - this.dygraph_.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart); - this.dygraph_.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart); + this.dygraph_.addAndTrackEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart); + this.dygraph_.addAndTrackEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart); - if (this.isUsingExcanvas_) { - this.dygraph_.addEvent(this.iePanOverlay_, 'mousedown', onPanStart); - } else { - this.dygraph_.addEvent(this.fgcanvas_, 'mousedown', onPanStart); - this.dygraph_.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove); - } + this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousedown', onPanStart); + this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousemove', onCanvasHover); // Touch events if (this.hasTouchInterface_) { @@ -553,7 +522,7 @@ rangeSelector.prototype.drawStaticLayer_ = function() { try { this.drawMiniPlot_(); } catch(ex) { - Dygraph.warn(ex); + console.warn(ex); } var margin = 0.5; @@ -574,6 +543,7 @@ rangeSelector.prototype.drawStaticLayer_ = function() { */ rangeSelector.prototype.drawMiniPlot_ = function() { var fillStyle = this.getOption_('rangeSelectorPlotFillColor'); + var fillGradientStyle = this.getOption_('rangeSelectorPlotFillGradientColor'); var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor'); if (!fillStyle && !strokeStyle) { return; @@ -603,6 +573,13 @@ rangeSelector.prototype.drawMiniPlot_ = function() { var dataPoint = combinedSeriesData.data[i]; var x = ((dataPoint[0] !== null) ? ((dataPoint[0] - xExtremes[0])*xFact) : NaN); var y = ((dataPoint[1] !== null) ? (canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact) : NaN); + + // Skip points that don't change the x-value. Overly fine-grained points + // can cause major slowdowns with the ctx.fill() call below. + if (!stepPlot && prevX !== null && Math.round(x) == Math.round(prevX)) { + continue; + } + if (isFinite(x) && isFinite(y)) { if(prevX === null) { ctx.lineTo(x, canvasHeight); @@ -632,7 +609,9 @@ rangeSelector.prototype.drawMiniPlot_ = function() { if (fillStyle) { var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight); - lingrad.addColorStop(0, 'white'); + if (fillGradientStyle) { + lingrad.addColorStop(0, fillGradientStyle); + } lingrad.addColorStop(1, fillStyle); this.bgcanvas_ctx_.fillStyle = lingrad; ctx.fill(); @@ -647,96 +626,63 @@ rangeSelector.prototype.drawMiniPlot_ = function() { /** * @private - * Computes and returns the combinded series data along with min/max for the mini plot. - * @return {Object} An object containing combinded series array, ymin, ymax. + * Computes and returns the combined series data along with min/max for the mini plot. + * The combined series consists of averaged values for all series. + * When series have error bars, the error bars are ignored. + * @return {Object} An object containing combined series array, ymin, ymax. */ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { - var data = this.dygraph_.rawData_; + var g = this.dygraph_; var logscale = this.getOption_('logscale'); - - // Create a combined series (average of all series values). - var combinedSeries = []; - var sum; - var count; - var mutipleValues; - var i, j, k; - var xVal, yVal; - - // Find out if data has multiple values per datapoint. - // Go to first data point that actually has values (see http://code.google.com/p/dygraphs/issues/detail?id=246) - for (i = 0; i < data.length; i++) { - if (data[i].length > 1 && data[i][1] !== null) { - mutipleValues = typeof data[i][1] != 'number'; - if (mutipleValues) { - sum = []; - count = []; - for (k = 0; k < data[i][1].length; k++) { - sum.push(0); - count.push(0); - } - } - break; - } + var i; + + // Select series to combine. By default, all series are combined. + var numColumns = g.numColumns(); + var labels = g.getLabels(); + var includeSeries = new Array(numColumns); + var anySet = false; + for (i = 1; i < numColumns; i++) { + var include = this.getOption_('showInRangeSelector', labels[i]); + includeSeries[i] = include; + if (include !== null) anySet = true; // it's set explicitly for this series + } + if (!anySet) { + for (i = 0; i < includeSeries.length; i++) includeSeries[i] = true; } - for (i = 0; i < data.length; i++) { - var dataPoint = data[i]; - xVal = dataPoint[0]; - - if (mutipleValues) { - for (k = 0; k < sum.length; k++) { - sum[k] = count[k] = 0; - } - } else { - sum = count = 0; - } - - for (j = 1; j < dataPoint.length; j++) { - if (this.dygraph_.visibility()[j-1]) { - var y; - if (mutipleValues) { - for (k = 0; k < sum.length; k++) { - y = dataPoint[j][k]; - if (y === null || isNaN(y)) continue; - sum[k] += y; - count[k]++; - } - } else { - y = dataPoint[j]; - if (y === null || isNaN(y)) continue; - sum += y; - count++; - } - } - } - - if (mutipleValues) { - for (k = 0; k < sum.length; k++) { - sum[k] /= count[k]; - } - yVal = sum.slice(0); - } else { - yVal = sum/count; + // Create a combined series (average of selected series values). + // TODO(danvk): short-circuit if there's only one series. + var rolledSeries = []; + var dataHandler = g.dataHandler_; + var options = g.attributes_; + for (i = 1; i < g.numColumns(); i++) { + if (!includeSeries[i]) continue; + var series = dataHandler.extractSeries(g.rawData_, i, options); + if (g.rollPeriod() > 1) { + series = dataHandler.rollingAverage(series, g.rollPeriod(), options); } - combinedSeries.push([xVal, yVal]); + rolledSeries.push(series); } - // Account for roll period, fractions. - combinedSeries = this.dygraph_.rollingAverage(combinedSeries, this.dygraph_.rollPeriod_); - - if (typeof combinedSeries[0][1] != 'number') { - for (i = 0; i < combinedSeries.length; i++) { - yVal = combinedSeries[i][1]; - combinedSeries[i][1] = yVal[0]; - } + var combinedSeries = []; + for (i = 0; i < rolledSeries[0].length; i++) { + var sum = 0; + var count = 0; + for (var j = 0; j < rolledSeries.length; j++) { + var y = rolledSeries[j][i][1]; + if (y === null || isNaN(y)) continue; + count++; + sum += y; + } + combinedSeries.push([rolledSeries[0][i][0], sum / count]); } // Compute the y range. var yMin = Number.MAX_VALUE; var yMax = -Number.MAX_VALUE; for (i = 0; i < combinedSeries.length; i++) { - yVal = combinedSeries[i][1]; + var yVal = combinedSeries[i][1]; if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) { yMin = Math.min(yMin, yVal); yMax = Math.max(yMax, yVal); @@ -811,9 +757,6 @@ rangeSelector.prototype.drawInteractiveLayer_ = function() { ctx.lineTo(width, height); ctx.lineTo(width, margin); ctx.stroke(); - if (this.iePanOverlay_) { - this.iePanOverlay_.style.display = 'none'; - } } else { var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); @@ -830,13 +773,6 @@ rangeSelector.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'; - } } };