X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=0989a1d8e6f46da8bde56533fcb033dc5a3f3460;hb=ab51ff66f384a53fa8757833c3c95047123ad216;hp=a16d2a0ed6324240b91517604a225a51862a012c;hpb=885c13e45bc329818d56d375b8cac6a5a40d7c5a;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index a16d2a0..0989a1d 100644 --- a/dygraph.js +++ b/dygraph.js @@ -80,52 +80,6 @@ Dygraph.DEFAULT_HEIGHT = 320; Dygraph.AXIS_LINE_WIDTH = 0.3; -Dygraph.DEFAULT_INTERACTION_MODEL = { - // Track the beginning of drag events - 'mousedown' : function(event, g, context) { - context.initializeMouseDown(event, g, context); - - if (event.altKey || event.shiftKey) { - Dygraph.startPan(event, g, context); - } else { - Dygraph.startZoom(event, g, context); - } - }, - - // Draw zoom rectangles when the mouse is down and the user moves around - 'mousemove' : function(event, g, context) { - if (context.isZooming) { - Dygraph.moveZoom(event, g, context); - } else if (context.isPanning) { - Dygraph.movePan(event, g, context); - } - }, - - 'mouseup' : function(event, g, context) { - if (context.isZooming) { - Dygraph.endZoom(event, g, context); - } else if (context.isPanning) { - Dygraph.endPan(event, g, context); - } - }, - - // Temporarily cancel the dragging event when the mouse leaves the graph - 'mouseout' : function(event, g, context) { - if (context.isZooming) { - context.dragEndX = null; - context.dragEndY = null; - } - }, - - // Disable zooming out if panning. - 'dblclick' : function(event, g, context) { - if (event.altKey || event.shiftKey) { - return; - } - g.doUnzoom_(); - } -}; - // Default attribute values. Dygraph.DEFAULT_ATTRS = { highlightCircleSize: 3, @@ -175,8 +129,8 @@ Dygraph.DEFAULT_ATTRS = { stepPlot: false, avoidMinZero: false, - - interactionModel: Dygraph.DEFAULT_INTERACTION_MODEL + + interactionModel: null // will be set to Dygraph.defaultInteractionModel. }; // Various logging levels. @@ -844,19 +798,11 @@ Dygraph.prototype.dragGetY_ = function(e, context) { // panning behavior. // Dygraph.startPan = function(event, g, context) { - // have to be zoomed in to pan. - var zoomedY = false; - for (var i = 0; i < g.axes_.length; i++) { - if (g.axes_[i].valueWindow || g.axes_[i].valueRange) { - zoomedY = true; - break; - } - } - if (!g.dateWindow_ && !zoomedY) return; - context.isPanning = true; var xRange = g.xAxisRange(); context.dateRange = xRange[1] - xRange[0]; + context.initialLeftmostDate = xRange[0]; + context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1); // Record the range of each y-axis at the start of the drag. // If any axis has a valueRange or valueWindow, then we want a 2D pan. @@ -864,15 +810,12 @@ Dygraph.startPan = function(event, g, context) { for (var i = 0; i < g.axes_.length; i++) { var axis = g.axes_[i]; var yRange = g.yAxisRange(i); + // TODO(konigsberg): These values should be in |context|. axis.dragValueRange = yRange[1] - yRange[0]; - var r = g.toDataCoords(null, context.dragStartY, i); - axis.draggingValue = r[1]; + axis.initialTopValue = yRange[1]; + axis.unitsPerPixel = axis.dragValueRange / (g.plotter_.area.h - 1); if (axis.valueWindow || axis.valueRange) context.is2DPan = true; } - - // TODO(konigsberg): Switch from all this math to toDataCoords? - // Seems to work for the dragging value. - context.draggingDate = (context.dragStartX / g.width_) * context.dateRange + xRange[0]; }; // Called in response to an interaction model operation that @@ -886,24 +829,18 @@ Dygraph.movePan = function(event, g, context) { context.dragEndX = g.dragGetX_(event, context); context.dragEndY = g.dragGetY_(event, context); - // TODO(danvk): update this comment - // Want to have it so that: - // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY. - // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered. - // 3. draggingValue appears at dragEndY. - // 4. valueRange is unaltered. - - var minDate = context.draggingDate - (context.dragEndX / g.width_) * context.dateRange; + var minDate = context.initialLeftmostDate - + (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel; var maxDate = minDate + context.dateRange; g.dateWindow_ = [minDate, maxDate]; // y-axis scaling is automatic unless this is a full 2D pan. if (context.is2DPan) { // Adjust each axis appropriately. - var y_frac = context.dragEndY / g.height_; for (var i = 0; i < g.axes_.length; i++) { var axis = g.axes_[i]; - var maxValue = axis.draggingValue + y_frac * axis.dragValueRange; + var maxValue = axis.initialTopValue + + (context.dragEndY - context.dragStartY) * axis.unitsPerPixel; var minValue = maxValue - axis.dragValueRange; axis.valueWindow = [ minValue, maxValue ]; } @@ -920,9 +857,12 @@ Dygraph.movePan = function(event, g, context) { // panning behavior. // Dygraph.endPan = function(event, g, context) { + // TODO(konigsberg): Clear the context data from the axis. + // TODO(konigsberg): mouseup should just delete the + // context object, and mousedown should create a new one. context.isPanning = false; context.is2DPan = false; - context.draggingDate = null; + context.initialLeftmostDate = null; context.dateRange = null; context.valueRange = null; } @@ -1028,6 +968,55 @@ Dygraph.endZoom = function(event, g, context) { context.dragStartY = null; } +Dygraph.defaultInteractionModel = { + // Track the beginning of drag events + mousedown: function(event, g, context) { + context.initializeMouseDown(event, g, context); + + if (event.altKey || event.shiftKey) { + Dygraph.startPan(event, g, context); + } else { + Dygraph.startZoom(event, g, context); + } + }, + + // Draw zoom rectangles when the mouse is down and the user moves around + mousemove: function(event, g, context) { + if (context.isZooming) { + Dygraph.moveZoom(event, g, context); + } else if (context.isPanning) { + Dygraph.movePan(event, g, context); + } + }, + + mouseup: function(event, g, context) { + if (context.isZooming) { + Dygraph.endZoom(event, g, context); + } else if (context.isPanning) { + Dygraph.endPan(event, g, context); + } + }, + + // Temporarily cancel the dragging event when the mouse leaves the graph + mouseout: function(event, g, context) { + if (context.isZooming) { + context.dragEndX = null; + context.dragEndY = null; + } + }, + + // Disable zooming out if panning. + dblclick: function(event, g, context) { + if (event.altKey || event.shiftKey) { + return; + } + // TODO(konigsberg): replace g.doUnzoom()_ with something that is + // friendlier to public use. + g.doUnzoom_(); + } +}; + +Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.defaultInteractionModel; /** * Set up all the mouse handlers needed to capture dragging behavior for zoom @@ -1037,43 +1026,43 @@ Dygraph.endZoom = function(event, g, context) { Dygraph.prototype.createDragInterface_ = function() { var context = { // Tracks whether the mouse is down right now - isZooming : false, - isPanning : false, // is this drag part of a pan? - is2DPan : false, // if so, is that pan 1- or 2-dimensional? - dragStartX : null, - dragStartY : null, - dragEndX : null, - dragEndY : null, - dragDirection : null, - prevEndX : null, - prevEndY : null, - prevDragDirection : null, - - // TODO(danvk): update this comment - // draggingDate and draggingValue represent the [date,value] point on the - // graph at which the mouse was pressed. As the mouse moves while panning, - // the viewport must pan so that the mouse position points to - // [draggingDate, draggingValue] - draggingDate : null, + isZooming: false, + isPanning: false, // is this drag part of a pan? + is2DPan: false, // if so, is that pan 1- or 2-dimensional? + dragStartX: null, + dragStartY: null, + dragEndX: null, + dragEndY: null, + dragDirection: null, + prevEndX: null, + prevEndY: null, + prevDragDirection: null, + + // The value on the left side of the graph when a pan operation starts. + initialLeftmostDate: null, + + // The number of units each pixel spans. (This won't be valid for log + // scales) + xUnitsPerPixel: null, // TODO(danvk): update this comment // The range in second/value units that the viewport encompasses during a // panning operation. - dateRange : null, + dateRange: null, // Utility function to convert page-wide coordinates to canvas coords - px : 0, - py : 0, + px: 0, + py: 0, - initializeMouseDown : function(event, g, context) { + initializeMouseDown: function(event, g, context) { // prevents mouse drags from selecting page text. if (event.preventDefault) { event.preventDefault(); // Firefox, Chrome, etc. } else { event.returnValue = false; // IE - event.cancelBubble = true; + event.cancelBubble = true; } - + context.px = Dygraph.findPosX(g.canvas_); context.py = Dygraph.findPosY(g.canvas_); context.dragStartX = g.dragGetX_(event, context); @@ -1083,23 +1072,22 @@ Dygraph.prototype.createDragInterface_ = function() { var interactionModel = this.attr_("interactionModel"); + // Self is the graph. + var self = this; - // Function that binds g and context to the handler. - var bindHandler = function(handler, g) { + // Function that binds the graph and context to the handler. + var bindHandler = function(handler) { return function(event) { - handler(event, g, context); + handler(event, self, context); }; }; for (var eventName in interactionModel) { if (!interactionModel.hasOwnProperty(eventName)) continue; Dygraph.addEvent(this.mouseEventElement_, eventName, - bindHandler(interactionModel[eventName], this)); + bindHandler(interactionModel[eventName])); } - // Self is the graph. - var self = this; - // If the user releases the mouse button during a drag, but not over the // canvas, then it doesn't count as a zooming action. Dygraph.addEvent(document, 'mouseup', function(event) { @@ -1545,7 +1533,9 @@ Dygraph.hmsString_ = function(date) { * @private */ Dygraph.dateAxisFormatter = function(date, granularity) { - if (granularity >= Dygraph.MONTHLY) { + if (granularity >= Dygraph.DECADAL) { + return date.strftime('%Y'); + } else if (granularity >= Dygraph.MONTHLY) { return date.strftime('%b %y'); } else { var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds(); @@ -1647,7 +1637,8 @@ Dygraph.QUARTERLY = 16; Dygraph.BIANNUAL = 17; Dygraph.ANNUAL = 18; Dygraph.DECADAL = 19; -Dygraph.NUM_GRANULARITIES = 20; +Dygraph.CENTENNIAL = 20; +Dygraph.NUM_GRANULARITIES = 21; Dygraph.SHORT_SPACINGS = []; Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1; @@ -1683,6 +1674,7 @@ Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) { if (granularity == Dygraph.BIANNUAL) num_months = 2; if (granularity == Dygraph.ANNUAL) num_months = 1; if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; } + if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; } var msInYear = 365.2524 * 24 * 3600 * 1000; var num_years = 1.0 * (end_time - start_time) / msInYear; @@ -1755,6 +1747,11 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) { } else if (granularity == Dygraph.DECADAL) { months = [ 0 ]; year_mod = 10; + } else if (granularity == Dygraph.CENTENNIAL) { + months = [ 0 ]; + year_mod = 100; + } else { + this.warn("Span of dates is too long"); } var start_year = new Date(start_time).getFullYear(); @@ -2120,7 +2117,7 @@ Dygraph.prototype.drawGraph_ = function() { * indices are into the axes_ array. */ Dygraph.prototype.computeYAxes_ = function() { - this.axes_ = [{}]; // always have at least one y-axis. + this.axes_ = [{ yAxisId: 0 }]; // always have at least one y-axis. this.seriesToAxisMap_ = {}; // Get a list of series names. @@ -2160,9 +2157,11 @@ Dygraph.prototype.computeYAxes_ = function() { var opts = {}; Dygraph.update(opts, this.axes_[0]); Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this. + var yAxisId = this.axes_.length; + opts.yAxisId = yAxisId; Dygraph.update(opts, axis); this.axes_.push(opts); - this.seriesToAxisMap_[seriesName] = this.axes_.length - 1; + this.seriesToAxisMap_[seriesName] = yAxisId; } }