3 * Copyright 2011 Paul Felix (paul.eric.felix@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
6 /*global Dygraph:false,TouchEvent:false */
9 * @fileoverview This file contains the RangeSelector plugin used to provide
10 * a timeline range selector widget for dygraphs.
13 /*global Dygraph:false */
16 import * as utils from
'../dygraph-utils';
17 import DygraphInteraction from
'../dygraph-interaction-model';
18 import IFrameTarp from
'../iframe-tarp';
20 var rangeSelector
= function() {
21 this.hasTouchInterface_
= typeof(TouchEvent
) != 'undefined';
22 this.isMobileDevice_
= /mobile|android/gi.test(navigator
.appVersion
);
23 this.interfaceCreated_
= false;
26 rangeSelector
.prototype.toString
= function() {
27 return "RangeSelector Plugin";
30 rangeSelector
.prototype.activate
= function(dygraph
) {
31 this.dygraph_
= dygraph
;
32 if (this.getOption_('showRangeSelector')) {
33 this.createInterface_();
36 layout
: this.reserveSpace_
,
37 predraw
: this.renderStaticLayer_
,
38 didDrawChart
: this.renderInteractiveLayer_
42 rangeSelector
.prototype.destroy
= function() {
43 this.bgcanvas_
= null;
44 this.fgcanvas_
= null;
45 this.leftZoomHandle_
= null;
46 this.rightZoomHandle_
= null;
49 //------------------------------------------------------------------
51 //------------------------------------------------------------------
53 rangeSelector
.prototype.getOption_
= function(name
, opt_series
) {
54 return this.dygraph_
.getOption(name
, opt_series
);
57 rangeSelector
.prototype.setDefaultOption_
= function(name
, value
) {
58 this.dygraph_
.attrs_
[name
] = value
;
63 * Creates the range selector elements and adds them to the graph.
65 rangeSelector
.prototype.createInterface_
= function() {
66 this.createCanvases_();
67 this.createZoomHandles_();
68 this.initInteraction_();
70 // Range selector and animatedZooms have a bad interaction. See issue 359.
71 if (this.getOption_('animatedZooms')) {
72 console
.warn('Animated zooms and range selector are not compatible; disabling animatedZooms.');
73 this.dygraph_
.updateOptions({animatedZooms
: false}, true);
76 this.interfaceCreated_
= true;
82 * Adds the range selector to the graph.
84 rangeSelector
.prototype.addToGraph_
= function() {
85 var graphDiv
= this.graphDiv_
= this.dygraph_
.graphDiv
;
86 graphDiv
.appendChild(this.bgcanvas_
);
87 graphDiv
.appendChild(this.fgcanvas_
);
88 graphDiv
.appendChild(this.leftZoomHandle_
);
89 graphDiv
.appendChild(this.rightZoomHandle_
);
94 * Removes the range selector from the graph.
96 rangeSelector
.prototype.removeFromGraph_
= function() {
97 var graphDiv
= this.graphDiv_
;
98 graphDiv
.removeChild(this.bgcanvas_
);
99 graphDiv
.removeChild(this.fgcanvas_
);
100 graphDiv
.removeChild(this.leftZoomHandle_
);
101 graphDiv
.removeChild(this.rightZoomHandle_
);
102 this.graphDiv_
= null;
107 * Called by Layout to allow range selector to reserve its space.
109 rangeSelector
.prototype.reserveSpace_
= function(e
) {
110 if (this.getOption_('showRangeSelector')) {
111 e
.reserveSpaceBottom(this.getOption_('rangeSelectorHeight') + 4);
117 * Renders the static portion of the range selector at the predraw stage.
119 rangeSelector
.prototype.renderStaticLayer_
= function() {
120 if (!this.updateVisibility_()) {
124 this.drawStaticLayer_();
129 * Renders the interactive portion of the range selector after the chart has been drawn.
131 rangeSelector
.prototype.renderInteractiveLayer_
= function() {
132 if (!this.updateVisibility_() || this.isChangingRange_
) {
135 this.placeZoomHandles_();
136 this.drawInteractiveLayer_();
141 * Check to see if the range selector is enabled/disabled and update visibility accordingly.
143 rangeSelector
.prototype.updateVisibility_
= function() {
144 var enabled
= this.getOption_('showRangeSelector');
146 if (!this.interfaceCreated_
) {
147 this.createInterface_();
148 } else if (!this.graphDiv_
|| !this.graphDiv_
.parentNode
) {
151 } else if (this.graphDiv_
) {
152 this.removeFromGraph_();
153 var dygraph
= this.dygraph_
;
154 setTimeout(function() { dygraph
.width_
= 0; dygraph
.resize(); }, 1);
161 * Resizes the range selector.
163 rangeSelector
.prototype.resize_
= function() {
164 function setElementRect(canvas
, context
, rect
) {
165 var canvasScale
= utils
.getContextPixelRatio(context
);
167 canvas
.style
.top
= rect
.y
+ 'px';
168 canvas
.style
.left
= rect
.x
+ 'px';
169 canvas
.width
= rect
.w
* canvasScale
;
170 canvas
.height
= rect
.h
* canvasScale
;
171 canvas
.style
.width
= rect
.w
+ 'px';
172 canvas
.style
.height
= rect
.h
+ 'px';
174 if(canvasScale
!= 1) {
175 context
.scale(canvasScale
, canvasScale
);
179 var plotArea
= this.dygraph_
.layout_
.getPlotArea();
181 var xAxisLabelHeight
= 0;
182 if (this.dygraph_
.getOptionForAxis('drawAxis', 'x')) {
183 xAxisLabelHeight
= this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
187 y
: plotArea
.y
+ plotArea
.h
+ xAxisLabelHeight
+ 4,
189 h
: this.getOption_('rangeSelectorHeight')
192 setElementRect(this.bgcanvas_
, this.bgcanvas_ctx_
, this.canvasRect_
);
193 setElementRect(this.fgcanvas_
, this.fgcanvas_ctx_
, this.canvasRect_
);
198 * Creates the background and foreground canvases.
200 rangeSelector
.prototype.createCanvases_
= function() {
201 this.bgcanvas_
= utils
.createCanvas();
202 this.bgcanvas_
.className
= 'dygraph-rangesel-bgcanvas';
203 this.bgcanvas_
.style
.position
= 'absolute';
204 this.bgcanvas_
.style
.zIndex
= 9;
205 this.bgcanvas_ctx_
= utils
.getContext(this.bgcanvas_
);
207 this.fgcanvas_
= utils
.createCanvas();
208 this.fgcanvas_
.className
= 'dygraph-rangesel-fgcanvas';
209 this.fgcanvas_
.style
.position
= 'absolute';
210 this.fgcanvas_
.style
.zIndex
= 9;
211 this.fgcanvas_
.style
.cursor
= 'default';
212 this.fgcanvas_ctx_
= utils
.getContext(this.fgcanvas_
);
217 * Creates the zoom handle elements.
219 rangeSelector
.prototype.createZoomHandles_
= function() {
220 var img
= new Image();
221 img
.className
= 'dygraph-rangesel-zoomhandle';
222 img
.style
.position
= 'absolute';
223 img
.style
.zIndex
= 10;
224 img
.style
.visibility
= 'hidden'; // Initially hidden so they don't show up in the wrong place.
225 img
.style
.cursor
= 'col-resize';
226 // TODO: change image to more options
229 img
.src
= 'data:image/png;base64,' +
230 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' +
231 'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' +
232 'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' +
233 '6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' +
234 'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=';
236 if (this.isMobileDevice_
) {
241 this.leftZoomHandle_
= img
;
242 this.rightZoomHandle_
= img
.cloneNode(false);
247 * Sets up the interaction for the range selector.
249 rangeSelector
.prototype.initInteraction_
= function() {
251 var topElem
= document
;
254 var isZooming
= false;
255 var isPanning
= false;
256 var dynamic
= !this.isMobileDevice_
;
258 // We cover iframes during mouse interactions. See comments in
259 // dygraph-utils.js for more info on why this is a good idea.
260 var tarp
= new IFrameTarp();
262 // functions, defined below. Defining them this way (rather than with
263 // "function foo() {...}" makes JSHint happy.
264 var toXDataWindow
, onZoomStart
, onZoom
, onZoomEnd
, doZoom
, isMouseInPanZone
,
265 onPanStart
, onPan
, onPanEnd
, doPan
, onCanvasHover
;
267 // Touch event functions
268 var onZoomHandleTouchEvent
, onCanvasTouchEvent
, addTouchEvents
;
270 toXDataWindow
= function(zoomHandleStatus
) {
271 var xDataLimits
= self
.dygraph_
.xAxisExtremes();
272 var fact
= (xDataLimits
[1] - xDataLimits
[0])/self
.canvasRect_
.w
;
273 var xDataMin
= xDataLimits
[0] + (zoomHandleStatus
.leftHandlePos
- self
.canvasRect_
.x
)*fact
;
274 var xDataMax
= xDataLimits
[0] + (zoomHandleStatus
.rightHandlePos
- self
.canvasRect_
.x
)*fact
;
275 return [xDataMin
, xDataMax
];
278 onZoomStart
= function(e
) {
279 utils
.cancelEvent(e
);
281 clientXLast
= e
.clientX
;
282 handle
= e
.target
? e
.target
: e
.srcElement
;
283 if (e
.type
=== 'mousedown' || e
.type
=== 'dragstart') {
284 // These events are removed manually.
285 utils
.addEvent(topElem
, 'mousemove', onZoom
);
286 utils
.addEvent(topElem
, 'mouseup', onZoomEnd
);
288 self
.fgcanvas_
.style
.cursor
= 'col-resize';
293 onZoom
= function(e
) {
297 utils
.cancelEvent(e
);
299 var delX
= e
.clientX
- clientXLast
;
300 if (Math
.abs(delX
) < 4) {
303 clientXLast
= e
.clientX
;
306 var zoomHandleStatus
= self
.getZoomHandleStatus_();
308 if (handle
== self
.leftZoomHandle_
) {
309 newPos
= zoomHandleStatus
.leftHandlePos
+ delX
;
310 newPos
= Math
.min(newPos
, zoomHandleStatus
.rightHandlePos
- handle
.width
- 3);
311 newPos
= Math
.max(newPos
, self
.canvasRect_
.x
);
313 newPos
= zoomHandleStatus
.rightHandlePos
+ delX
;
314 newPos
= Math
.min(newPos
, self
.canvasRect_
.x
+ self
.canvasRect_
.w
);
315 newPos
= Math
.max(newPos
, zoomHandleStatus
.leftHandlePos
+ handle
.width
+ 3);
317 var halfHandleWidth
= handle
.width
/2;
318 handle
.style
.left
= (newPos
- halfHandleWidth
) + 'px';
319 self
.drawInteractiveLayer_();
328 onZoomEnd
= function(e
) {
334 utils
.removeEvent(topElem
, 'mousemove', onZoom
);
335 utils
.removeEvent(topElem
, 'mouseup', onZoomEnd
);
336 self
.fgcanvas_
.style
.cursor
= 'default';
338 // If on a slower device, zoom now.
345 doZoom
= function() {
347 var zoomHandleStatus
= self
.getZoomHandleStatus_();
348 self
.isChangingRange_
= true;
349 if (!zoomHandleStatus
.isZoomed
) {
350 self
.dygraph_
.resetZoom();
352 var xDataWindow
= toXDataWindow(zoomHandleStatus
);
353 self
.dygraph_
.doZoomXDates_(xDataWindow
[0], xDataWindow
[1]);
356 self
.isChangingRange_
= false;
360 isMouseInPanZone
= function(e
) {
361 var rect
= self
.leftZoomHandle_
.getBoundingClientRect();
362 var leftHandleClientX
= rect
.left
+ rect
.width
/2;
363 rect
= self
.rightZoomHandle_
.getBoundingClientRect();
364 var rightHandleClientX
= rect
.left
+ rect
.width
/2;
365 return (e
.clientX
> leftHandleClientX
&& e
.clientX
< rightHandleClientX
);
368 onPanStart
= function(e
) {
369 if (!isPanning
&& isMouseInPanZone(e
) && self
.getZoomHandleStatus_().isZoomed
) {
370 utils
.cancelEvent(e
);
372 clientXLast
= e
.clientX
;
373 if (e
.type
=== 'mousedown') {
374 // These events are removed manually.
375 utils
.addEvent(topElem
, 'mousemove', onPan
);
376 utils
.addEvent(topElem
, 'mouseup', onPanEnd
);
383 onPan
= function(e
) {
387 utils
.cancelEvent(e
);
389 var delX
= e
.clientX
- clientXLast
;
390 if (Math
.abs(delX
) < 4) {
393 clientXLast
= e
.clientX
;
396 var zoomHandleStatus
= self
.getZoomHandleStatus_();
397 var leftHandlePos
= zoomHandleStatus
.leftHandlePos
;
398 var rightHandlePos
= zoomHandleStatus
.rightHandlePos
;
399 var rangeSize
= rightHandlePos
- leftHandlePos
;
400 if (leftHandlePos
+ delX
<= self
.canvasRect_
.x
) {
401 leftHandlePos
= self
.canvasRect_
.x
;
402 rightHandlePos
= leftHandlePos
+ rangeSize
;
403 } else if (rightHandlePos
+ delX
>= self
.canvasRect_
.x
+ self
.canvasRect_
.w
) {
404 rightHandlePos
= self
.canvasRect_
.x
+ self
.canvasRect_
.w
;
405 leftHandlePos
= rightHandlePos
- rangeSize
;
407 leftHandlePos
+= delX
;
408 rightHandlePos
+= delX
;
410 var halfHandleWidth
= self
.leftZoomHandle_
.width
/2;
411 self
.leftZoomHandle_
.style
.left
= (leftHandlePos
- halfHandleWidth
) + 'px';
412 self
.rightZoomHandle_
.style
.left
= (rightHandlePos
- halfHandleWidth
) + 'px';
413 self
.drawInteractiveLayer_();
415 // Do pan on the fly.
422 onPanEnd
= function(e
) {
427 utils
.removeEvent(topElem
, 'mousemove', onPan
);
428 utils
.removeEvent(topElem
, 'mouseup', onPanEnd
);
429 // If on a slower device, do pan now.
438 self
.isChangingRange_
= true;
439 self
.dygraph_
.dateWindow_
= toXDataWindow(self
.getZoomHandleStatus_());
440 self
.dygraph_
.drawGraph_(false);
442 self
.isChangingRange_
= false;
446 onCanvasHover
= function(e
) {
447 if (isZooming
|| isPanning
) {
450 var cursor
= isMouseInPanZone(e
) ? 'move' : 'default';
451 if (cursor
!= self
.fgcanvas_
.style
.cursor
) {
452 self
.fgcanvas_
.style
.cursor
= cursor
;
456 onZoomHandleTouchEvent
= function(e
) {
457 if (e
.type
== 'touchstart' && e
.targetTouches
.length
== 1) {
458 if (onZoomStart(e
.targetTouches
[0])) {
459 utils
.cancelEvent(e
);
461 } else if (e
.type
== 'touchmove' && e
.targetTouches
.length
== 1) {
462 if (onZoom(e
.targetTouches
[0])) {
463 utils
.cancelEvent(e
);
470 onCanvasTouchEvent
= function(e
) {
471 if (e
.type
== 'touchstart' && e
.targetTouches
.length
== 1) {
472 if (onPanStart(e
.targetTouches
[0])) {
473 utils
.cancelEvent(e
);
475 } else if (e
.type
== 'touchmove' && e
.targetTouches
.length
== 1) {
476 if (onPan(e
.targetTouches
[0])) {
477 utils
.cancelEvent(e
);
484 addTouchEvents
= function(elem
, fn
) {
485 var types
= ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
486 for (var i
= 0; i
< types
.length
; i
++) {
487 self
.dygraph_
.addAndTrackEvent(elem
, types
[i
], fn
);
491 this.setDefaultOption_('interactionModel', DygraphInteraction
.dragIsPanInteractionModel
);
492 this.setDefaultOption_('panEdgeFraction', 0.0001);
494 var dragStartEvent
= window
.opera
? 'mousedown' : 'dragstart';
495 this.dygraph_
.addAndTrackEvent(this.leftZoomHandle_
, dragStartEvent
, onZoomStart
);
496 this.dygraph_
.addAndTrackEvent(this.rightZoomHandle_
, dragStartEvent
, onZoomStart
);
498 this.dygraph_
.addAndTrackEvent(this.fgcanvas_
, 'mousedown', onPanStart
);
499 this.dygraph_
.addAndTrackEvent(this.fgcanvas_
, 'mousemove', onCanvasHover
);
502 if (this.hasTouchInterface_
) {
503 addTouchEvents(this.leftZoomHandle_
, onZoomHandleTouchEvent
);
504 addTouchEvents(this.rightZoomHandle_
, onZoomHandleTouchEvent
);
505 addTouchEvents(this.fgcanvas_
, onCanvasTouchEvent
);
511 * Draws the static layer in the background canvas.
513 rangeSelector
.prototype.drawStaticLayer_
= function() {
514 var ctx
= this.bgcanvas_ctx_
;
515 ctx
.clearRect(0, 0, this.canvasRect_
.w
, this.canvasRect_
.h
);
517 this.drawMiniPlot_();
523 this.bgcanvas_ctx_
.lineWidth
= this.getOption_('rangeSelectorBackgroundLineWidth');
524 ctx
.strokeStyle
= this.getOption_('rangeSelectorBackgroundStrokeColor');
526 ctx
.moveTo(margin
, margin
);
527 ctx
.lineTo(margin
, this.canvasRect_
.h
-margin
);
528 ctx
.lineTo(this.canvasRect_
.w
-margin
, this.canvasRect_
.h
-margin
);
529 ctx
.lineTo(this.canvasRect_
.w
-margin
, margin
);
536 * Draws the mini plot in the background canvas.
538 rangeSelector
.prototype.drawMiniPlot_
= function() {
539 var fillStyle
= this.getOption_('rangeSelectorPlotFillColor');
540 var fillGradientStyle
= this.getOption_('rangeSelectorPlotFillGradientColor');
541 var strokeStyle
= this.getOption_('rangeSelectorPlotStrokeColor');
542 if (!fillStyle
&& !strokeStyle
) {
546 var stepPlot
= this.getOption_('stepPlot');
548 var combinedSeriesData
= this.computeCombinedSeriesAndLimits_();
549 var yRange
= combinedSeriesData
.yMax
- combinedSeriesData
.yMin
;
551 // Draw the mini plot.
552 var ctx
= this.bgcanvas_ctx_
;
555 var xExtremes
= this.dygraph_
.xAxisExtremes();
556 var xRange
= Math
.max(xExtremes
[1] - xExtremes
[0], 1.e
-30);
557 var xFact
= (this.canvasRect_
.w
- margin
)/xRange
;
558 var yFact
= (this.canvasRect_
.h
- margin
)/yRange
;
559 var canvasWidth
= this.canvasRect_
.w
- margin
;
560 var canvasHeight
= this.canvasRect_
.h
- margin
;
562 var prevX
= null, prevY
= null;
565 ctx
.moveTo(margin
, canvasHeight
);
566 for (var i
= 0; i
< combinedSeriesData
.data
.length
; i
++) {
567 var dataPoint
= combinedSeriesData
.data
[i
];
568 var x
= ((dataPoint
[0] !== null) ? ((dataPoint
[0] - xExtremes
[0])*xFact
) : NaN
);
569 var y
= ((dataPoint
[1] !== null) ? (canvasHeight
- (dataPoint
[1] - combinedSeriesData
.yMin
)*yFact
) : NaN
);
571 // Skip points that don't change the x-value. Overly fine-grained points
572 // can cause major slowdowns with the ctx.fill() call below.
573 if (!stepPlot
&& prevX
!== null && Math
.round(x
) == Math
.round(prevX
)) {
577 if (isFinite(x
) && isFinite(y
)) {
579 ctx
.lineTo(x
, canvasHeight
);
582 ctx
.lineTo(x
, prevY
);
591 ctx
.lineTo(x
, prevY
);
592 ctx
.lineTo(x
, canvasHeight
);
595 ctx
.lineTo(prevX
, canvasHeight
);
598 prevX
= prevY
= null;
601 ctx
.lineTo(canvasWidth
, canvasHeight
);
605 var lingrad
= this.bgcanvas_ctx_
.createLinearGradient(0, 0, 0, canvasHeight
);
606 if (fillGradientStyle
) {
607 lingrad
.addColorStop(0, fillGradientStyle
);
609 lingrad
.addColorStop(1, fillStyle
);
610 this.bgcanvas_ctx_
.fillStyle
= lingrad
;
615 this.bgcanvas_ctx_
.strokeStyle
= strokeStyle
;
616 this.bgcanvas_ctx_
.lineWidth
= this.getOption_('rangeSelectorPlotLineWidth');
623 * Computes and returns the combined series data along with min/max for the mini plot.
624 * The combined series consists of averaged values for all series.
625 * When series have error bars, the error bars are ignored.
626 * @return {Object} An object containing combined series array, ymin, ymax.
628 rangeSelector
.prototype.computeCombinedSeriesAndLimits_
= function() {
629 var g
= this.dygraph_
;
630 var logscale
= this.getOption_('logscale');
633 // Select series to combine. By default, all series are combined.
634 var numColumns
= g
.numColumns();
635 var labels
= g
.getLabels();
636 var includeSeries
= new Array(numColumns
);
638 var visibility
= g
.visibility();
641 for (i
= 1; i
< numColumns
; i
++) {
642 var include
= this.getOption_('showInRangeSelector', labels
[i
]);
643 inclusion
.push(include
);
644 if (include
!== null) anySet
= true; // it's set explicitly for this series
648 for (i
= 1; i
< numColumns
; i
++) {
649 includeSeries
[i
] = inclusion
[i
- 1];
652 for (i
= 1; i
< numColumns
; i
++) {
653 includeSeries
[i
] = visibility
[i
- 1];
657 // Create a combined series (average of selected series values).
658 // TODO(danvk): short-circuit if there's only one series.
659 var rolledSeries
= [];
660 var dataHandler
= g
.dataHandler_
;
661 var options
= g
.attributes_
;
662 for (i
= 1; i
< g
.numColumns(); i
++) {
663 if (!includeSeries
[i
]) continue;
664 var series
= dataHandler
.extractSeries(g
.rawData_
, i
, options
);
665 if (g
.rollPeriod() > 1) {
666 series
= dataHandler
.rollingAverage(series
, g
.rollPeriod(), options
);
669 rolledSeries
.push(series
);
672 var combinedSeries
= [];
673 for (i
= 0; i
< rolledSeries
[0].length
; i
++) {
676 for (var j
= 0; j
< rolledSeries
.length
; j
++) {
677 var y
= rolledSeries
[j
][i
][1];
678 if (y
=== null || isNaN(y
)) continue;
682 combinedSeries
.push([rolledSeries
[0][i
][0], sum
/ count
]);
685 // Compute the y range.
686 var yMin
= Number
.MAX_VALUE
;
687 var yMax
= -Number
.MAX_VALUE
;
688 for (i
= 0; i
< combinedSeries
.length
; i
++) {
689 var yVal
= combinedSeries
[i
][1];
690 if (yVal
!== null && isFinite(yVal
) && (!logscale
|| yVal
> 0)) {
691 yMin
= Math
.min(yMin
, yVal
);
692 yMax
= Math
.max(yMax
, yVal
);
696 // Convert Y data to log scale if needed.
697 // Also, expand the Y range to compress the mini plot a little.
698 var extraPercent
= 0.25;
700 yMax
= utils
.log10(yMax
);
701 yMax
+= yMax
*extraPercent
;
702 yMin
= utils
.log10(yMin
);
703 for (i
= 0; i
< combinedSeries
.length
; i
++) {
704 combinedSeries
[i
][1] = utils
.log10(combinedSeries
[i
][1]);
708 var yRange
= yMax
- yMin
;
709 if (yRange
<= Number
.MIN_VALUE
) {
710 yExtra
= yMax
*extraPercent
;
712 yExtra
= yRange
*extraPercent
;
718 return {data
: combinedSeries
, yMin
: yMin
, yMax
: yMax
};
723 * Places the zoom handles in the proper position based on the current X data window.
725 rangeSelector
.prototype.placeZoomHandles_
= function() {
726 var xExtremes
= this.dygraph_
.xAxisExtremes();
727 var xWindowLimits
= this.dygraph_
.xAxisRange();
728 var xRange
= xExtremes
[1] - xExtremes
[0];
729 var leftPercent
= Math
.max(0, (xWindowLimits
[0] - xExtremes
[0])/xRange
);
730 var rightPercent
= Math
.max(0, (xExtremes
[1] - xWindowLimits
[1])/xRange
);
731 var leftCoord
= this.canvasRect_
.x
+ this.canvasRect_
.w
*leftPercent
;
732 var rightCoord
= this.canvasRect_
.x
+ this.canvasRect_
.w
*(1 - rightPercent
);
733 var handleTop
= Math
.max(this.canvasRect_
.y
, this.canvasRect_
.y
+ (this.canvasRect_
.h
- this.leftZoomHandle_
.height
)/2);
734 var halfHandleWidth
= this.leftZoomHandle_
.width
/2;
735 this.leftZoomHandle_
.style
.left
= (leftCoord
- halfHandleWidth
) + 'px';
736 this.leftZoomHandle_
.style
.top
= handleTop
+ 'px';
737 this.rightZoomHandle_
.style
.left
= (rightCoord
- halfHandleWidth
) + 'px';
738 this.rightZoomHandle_
.style
.top
= this.leftZoomHandle_
.style
.top
;
740 this.leftZoomHandle_
.style
.visibility
= 'visible';
741 this.rightZoomHandle_
.style
.visibility
= 'visible';
746 * Draws the interactive layer in the foreground canvas.
748 rangeSelector
.prototype.drawInteractiveLayer_
= function() {
749 var ctx
= this.fgcanvas_ctx_
;
750 ctx
.clearRect(0, 0, this.canvasRect_
.w
, this.canvasRect_
.h
);
752 var width
= this.canvasRect_
.w
- margin
;
753 var height
= this.canvasRect_
.h
- margin
;
754 var zoomHandleStatus
= this.getZoomHandleStatus_();
756 ctx
.strokeStyle
= this.getOption_('rangeSelectorForegroundStrokeColor');
757 ctx
.lineWidth
= this.getOption_('rangeSelectorForegroundLineWidth');
758 if (!zoomHandleStatus
.isZoomed
) {
760 ctx
.moveTo(margin
, margin
);
761 ctx
.lineTo(margin
, height
);
762 ctx
.lineTo(width
, height
);
763 ctx
.lineTo(width
, margin
);
766 var leftHandleCanvasPos
= Math
.max(margin
, zoomHandleStatus
.leftHandlePos
- this.canvasRect_
.x
);
767 var rightHandleCanvasPos
= Math
.min(width
, zoomHandleStatus
.rightHandlePos
- this.canvasRect_
.x
);
769 ctx
.fillStyle
= 'rgba(240, 240, 240, ' + this.getOption_('rangeSelectorAlpha').toString() + ')';
770 ctx
.fillRect(0, 0, leftHandleCanvasPos
, this.canvasRect_
.h
);
771 ctx
.fillRect(rightHandleCanvasPos
, 0, this.canvasRect_
.w
- rightHandleCanvasPos
, this.canvasRect_
.h
);
774 ctx
.moveTo(margin
, margin
);
775 ctx
.lineTo(leftHandleCanvasPos
, margin
);
776 ctx
.lineTo(leftHandleCanvasPos
, height
);
777 ctx
.lineTo(rightHandleCanvasPos
, height
);
778 ctx
.lineTo(rightHandleCanvasPos
, margin
);
779 ctx
.lineTo(width
, margin
);
786 * Returns the current zoom handle position information.
787 * @return {Object} The zoom handle status.
789 rangeSelector
.prototype.getZoomHandleStatus_
= function() {
790 var halfHandleWidth
= this.leftZoomHandle_
.width
/2;
791 var leftHandlePos
= parseFloat(this.leftZoomHandle_
.style
.left
) + halfHandleWidth
;
792 var rightHandlePos
= parseFloat(this.rightZoomHandle_
.style
.left
) + halfHandleWidth
;
794 leftHandlePos
: leftHandlePos
,
795 rightHandlePos
: rightHandlePos
,
796 isZoomed
: (leftHandlePos
- 1 > this.canvasRect_
.x
|| rightHandlePos
+ 1 < this.canvasRect_
.x
+this.canvasRect_
.w
)
800 export default rangeSelector
;