X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=3a8cd3232cfd70f73c744970e2d5fec2b16f99d6;hb=42a9ebb8f492d2541a3904894447a7c74ba4cfd5;hp=601967a9d92eb12f49bc084ca28f8ae37a390786;hpb=5829af3d787ba109c25f45fa8af125bb0cac046e;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 601967a..3a8cd32 100644 --- a/dygraph.js +++ b/dygraph.js @@ -61,17 +61,15 @@ * whether the input data contains error ranges. For a complete list of * options, see http://dygraphs.com/options.html. */ -var Dygraph = function(div, data, opts) { - if (arguments.length > 0) { - if (arguments.length == 4) { - // Old versions of dygraphs took in the series labels as a constructor - // parameter. This doesn't make sense anymore, but it's easy to continue - // to support this usage. - this.warn("Using deprecated four-argument dygraph constructor"); - this.__old_init__(div, data, arguments[2], arguments[3]); - } else { - this.__init__(div, data, opts); - } +var Dygraph = function(div, data, opts, opt_fourth_param) { + if (opt_fourth_param !== undefined) { + // Old versions of dygraphs took in the series labels as a constructor + // parameter. This doesn't make sense anymore, but it's easy to continue + // to support this usage. + this.warn("Using deprecated four-argument dygraph constructor"); + this.__old_init__(div, data, opts, opt_fourth_param); + } else { + this.__init__(div, data, opts); } }; @@ -182,10 +180,24 @@ Dygraph.dateAxisFormatter = function(date, granularity) { } }; +/** + * Standard plotters. These may be used by clients. + * Available plotters are: + * - Dygraph.Plotters.linePlotter: draws central lines (most common) + * - Dygraph.Plotters.errorPlotter: draws error bars + * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph) + * + * By default, the plotter is [fillPlotter, errorPlotter, linePlotter]. + * This causes all the lines to be drawn over all the fills/error bars. + */ +Dygraph.Plotters = DygraphCanvasRenderer._Plotters; + // Default attribute values. Dygraph.DEFAULT_ATTRS = { highlightCircleSize: 3, + highlightSeriesOpts: null, + highlightSeriesBackgroundAlpha: 0.5, labelsDivWidth: 250, labelsDivStyles: { @@ -202,6 +214,8 @@ Dygraph.DEFAULT_ATTRS = { sigFigs: null, strokeWidth: 1.0, + strokeBorderWidth: 0, + strokeBorderColor: "white", axisTickSize: 3, axisLabelFontSize: 14, @@ -231,6 +245,7 @@ Dygraph.DEFAULT_ATTRS = { stepPlot: false, avoidMinZero: false, + drawAxesAtZero: false, // Sizes of the various chart labels. titleHeight: 28, @@ -258,6 +273,14 @@ Dygraph.DEFAULT_ATTRS = { rangeSelectorPlotStrokeColor: "#808FAB", rangeSelectorPlotFillColor: "#A7B1C4", + // The ordering here ensures that central lines always appear above any + // fill bars/error bars. + plotter: [ + Dygraph.Plotters.fillPlotter, + Dygraph.Plotters.errorPlotter, + Dygraph.Plotters.linePlotter + ], + // per-axis options axes: { x: { @@ -286,6 +309,11 @@ Dygraph.DEFAULT_ATTRS = { Dygraph.HORIZONTAL = 1; Dygraph.VERTICAL = 2; +// Installed plugins, in order of precedence (most-general to most-specific). +// Plugins are installed after they are defined, in plugins/install.js. +Dygraph.PLUGINS = [ +]; + // Used for initializing annotation CSS rules only once. Dygraph.addedAnnotationCSS = false; @@ -397,24 +425,106 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { Dygraph.updateDeep(this.attrs_, Dygraph.DEFAULT_ATTRS); this.boundaryIds_ = []; + this.setIndexByName_ = {}; + this.datasetIndex_ = []; + + this.registeredEvents_ = []; + this.eventListeners_ = {}; // Create the containing DIV and other interactive elements this.createInterface_(); + // Activate plugins. + this.plugins_ = []; + for (var i = 0; i < Dygraph.PLUGINS.length; i++) { + var Plugin = Dygraph.PLUGINS[i]; + var pluginInstance = new Plugin(); + var pluginDict = { + plugin: pluginInstance, + events: {}, + options: {}, + pluginOptions: {} + }; + + var handlers = pluginInstance.activate(this); + for (var eventName in handlers) { + // TODO(danvk): validate eventName. + pluginDict.events[eventName] = handlers[eventName]; + } + + this.plugins_.push(pluginDict); + } + + // At this point, plugins can no longer register event handlers. + // Construct a map from event -> ordered list of [callback, plugin]. + for (var i = 0; i < this.plugins_.length; i++) { + var plugin_dict = this.plugins_[i]; + for (var eventName in plugin_dict.events) { + if (!plugin_dict.events.hasOwnProperty(eventName)) continue; + var callback = plugin_dict.events[eventName]; + + var pair = [plugin_dict.plugin, callback]; + if (!(eventName in this.eventListeners_)) { + this.eventListeners_[eventName] = [pair]; + } else { + this.eventListeners_[eventName].push(pair); + } + } + } + this.start_(); }; /** + * Triggers a cascade of events to the various plugins which are interested in them. + * Returns true if the "default behavior" should be performed, i.e. if none of + * the event listeners called event.preventDefault(). + * @private + */ +Dygraph.prototype.cascadeEvents_ = function(name, extra_props) { + if (!(name in this.eventListeners_)) return true; + + // QUESTION: can we use objects & prototypes to speed this up? + var e = { + dygraph: this, + cancelable: false, + defaultPrevented: false, + preventDefault: function() { + if (!e.cancelable) throw "Cannot call preventDefault on non-cancelable event."; + e.defaultPrevented = true; + }, + propagationStopped: false, + stopPropagation: function() { + e.propagationStopped = true; + } + }; + Dygraph.update(e, extra_props); + + var callback_plugin_pairs = this.eventListeners_[name]; + if (callback_plugin_pairs) { + for (var i = callback_plugin_pairs.length - 1; i >= 0; i--) { + var plugin = callback_plugin_pairs[i][0]; + var callback = callback_plugin_pairs[i][1]; + callback.call(plugin, e); + if (e.propagationStopped) break; + } + } + return e.defaultPrevented; +}; + +/** * Returns the zoomed status of the chart for one or both axes. * * Axis is an optional parameter. Can be set to 'x' or 'y'. * * The zoomed status for an axis is set whenever a user zooms using the mouse - * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom - * option is also specified). + * or when the dateWindow or valueRange are updated (unless the + * isZoomedIgnoreProgrammaticZoom option is also specified). */ Dygraph.prototype.isZoomed = function(axis) { - if (axis == null) return this.zoomed_x_ || this.zoomed_y_; + if (axis === null || axis === undefined) { + return this.zoomed_x_ || this.zoomed_y_; + } if (axis === 'x') return this.zoomed_x_; if (axis === 'y') return this.zoomed_y_; throw "axis parameter is [" + axis + "] must be null, 'x' or 'y'."; @@ -451,18 +561,49 @@ Dygraph.prototype.attr_ = function(name, seriesName) { Dygraph.OPTIONS_REFERENCE[name] = true; } // - if (seriesName && - typeof(this.user_attrs_[seriesName]) != 'undefined' && - this.user_attrs_[seriesName] !== null && - typeof(this.user_attrs_[seriesName][name]) != 'undefined') { - return this.user_attrs_[seriesName][name]; - } else if (typeof(this.user_attrs_[name]) != 'undefined') { - return this.user_attrs_[name]; - } else if (typeof(this.attrs_[name]) != 'undefined') { - return this.attrs_[name]; - } else { - return null; + + var sources = []; + sources.push(this.attrs_); + if (this.user_attrs_) { + sources.push(this.user_attrs_); + if (seriesName) { + if (this.user_attrs_.hasOwnProperty(seriesName)) { + sources.push(this.user_attrs_[seriesName]); + } + if (seriesName === this.highlightSet_ && + this.user_attrs_.hasOwnProperty('highlightSeriesOpts')) { + sources.push(this.user_attrs_.highlightSeriesOpts); + } + } + } + + var ret = null; + for (var i = sources.length - 1; i >= 0; --i) { + var source = sources[i]; + if (source.hasOwnProperty(name)) { + ret = source[name]; + break; + } } + return ret; +}; + +/** + * Returns the current value for an option, as set in the constructor or via + * updateOptions. You may pass in an (optional) series name to get per-series + * values for the option. + * + * All values returned by this method should be considered immutable. If you + * modify them, there is no guarantee that the changes will be honored or that + * dygraphs will remain in a consistent state. If you want to modify an option, + * use updateOptions() instead. + * + * @param { String } name The name of the option (e.g. 'strokeWidth') + * @param { String } [opt_seriesName] Series name to get per-series values. + * @return { ... } The value of the option. + */ +Dygraph.prototype.getOption = function(name, opt_seriesName) { + return this.attr_(name, opt_seriesName); }; /** @@ -812,7 +953,6 @@ Dygraph.prototype.createInterface_ = function() { if (this.attr_('showRangeSelector')) { // The range selector must be created here so that its canvases and contexts get created here. // For some reason, if the canvases and contexts don't get created here, things don't work in IE. - // The range selector also sets xAxisHeight in order to reserve space. this.rangeSelector_ = new DygraphRangeSelector(this); } @@ -830,21 +970,26 @@ Dygraph.prototype.createInterface_ = function() { } var dygraph = this; - Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) { + + this.mouseMoveHandler = function(e) { dygraph.mouseMove_(e); - }); - Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) { + }; + this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler); + + this.mouseOutHandler = function(e) { dygraph.mouseOut_(e); - }); + }; + this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler); - this.createStatusMessage_(); this.createDragInterface_(); + this.resizeHandler = function(e) { + dygraph.resize(); + }; + // Update when the window is resized. // TODO(danvk): drop frames depending on complexity of the chart. - Dygraph.addEvent(window, 'resize', function(e) { - dygraph.resize(); - }); + this.addEvent(window, 'resize', this.resizeHandler); }; /** @@ -859,6 +1004,17 @@ Dygraph.prototype.destroy = function() { node.removeChild(node.firstChild); } }; + + for (var idx = 0; idx < this.registeredEvents_.length; idx++) { + var reg = this.registeredEvents_[idx]; + Dygraph.removeEvent(reg.elem, reg.type, reg.fn); + } + this.registeredEvents_ = []; + + // remove mouse event handlers (This may not be necessary anymore) + Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler); + Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler); + Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseUpHandler_); removeRecursive(this.maindiv_); var nullOut = function(obj) { @@ -868,7 +1024,9 @@ Dygraph.prototype.destroy = function() { } } }; - + // remove event handlers + Dygraph.removeEvent(window,'resize',this.resizeHandler); + this.resizeHandler = null; // These may not all be necessary, but it can't hurt... nullOut(this.layout_); nullOut(this.plotter_); @@ -926,8 +1084,10 @@ Dygraph.prototype.createMouseEventElement_ = function() { * @private */ Dygraph.prototype.setColors_ = function() { - var num = this.attr_("labels").length - 1; + var labels = this.getLabels(); + var num = labels.length - 1; this.colors_ = []; + this.colorsMap_ = {}; var colors = this.attr_('colors'); var i; if (!colors) { @@ -939,22 +1099,24 @@ Dygraph.prototype.setColors_ = function() { // alternate colors for high contrast. var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2); var hue = (1.0 * idx/ (1 + num)); - this.colors_.push(Dygraph.hsvToRGB(hue, sat, val)); + var colorStr = Dygraph.hsvToRGB(hue, sat, val); + this.colors_.push(colorStr); + this.colorsMap_[labels[i]] = colorStr; } } else { for (i = 0; i < num; i++) { if (!this.visibility()[i]) continue; var colorStr = colors[i % colors.length]; this.colors_.push(colorStr); + this.colorsMap_[labels[1 + i]] = colorStr; } } - - this.plotter_.setColors(this.colors_); }; /** * Return the list of colors. This is either the list of colors passed in the * attributes or the autogenerated list of rgb(r,g,b) strings. + * This does not return colors for invisible series. * @return {Array} The list of colors. */ Dygraph.prototype.getColors = function() { @@ -962,56 +1124,32 @@ Dygraph.prototype.getColors = function() { }; /** - * Create the div that contains information on the selected point(s) - * This goes in the top right of the canvas, unless an external div has already - * been specified. - * @private + * Returns a few attributes of a series, i.e. its color, its visibility, which + * axis it's assigned to, and its column in the original data. + * Returns null if the series does not exist. + * Otherwise, returns an object with column, visibility, color and axis properties. + * The "axis" property will be set to 1 for y1 and 2 for y2. + * The "column" property can be fed back into getValue(row, column) to get + * values for this series. */ -Dygraph.prototype.createStatusMessage_ = function() { - var userLabelsDiv = this.user_attrs_.labelsDiv; - if (userLabelsDiv && null !== userLabelsDiv && - (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) { - this.user_attrs_.labelsDiv = document.getElementById(userLabelsDiv); - } - if (!this.attr_("labelsDiv")) { - var divWidth = this.attr_('labelsDivWidth'); - var messagestyle = { - "position": "absolute", - "fontSize": "14px", - "zIndex": 10, - "width": divWidth + "px", - "top": "0px", - "left": (this.width_ - divWidth - 2) + "px", - "background": "white", - "textAlign": "left", - "overflow": "hidden"}; - Dygraph.update(messagestyle, this.attr_('labelsDivStyles')); - var div = document.createElement("div"); - div.className = "dygraph-legend"; - for (var name in messagestyle) { - if (messagestyle.hasOwnProperty(name)) { - div.style[name] = messagestyle[name]; - } +Dygraph.prototype.getPropertiesForSeries = function(series_name) { + var idx = -1; + var labels = this.getLabels(); + for (var i = 1; i < labels.length; i++) { + if (labels[i] == series_name) { + idx = i; + break; } - this.graphDiv.appendChild(div); - this.attrs_.labelsDiv = div; } -}; - -/** - * Position the labels div so that: - * - its right edge is flush with the right edge of the charting area - * - its top edge is flush with the top edge of the charting area - * @private - */ -Dygraph.prototype.positionLabelsDiv_ = function() { - // Don't touch a user-specified labelsDiv. - if (this.user_attrs_.hasOwnProperty("labelsDiv")) return; + if (idx == -1) return null; - var area = this.plotter_.area; - var div = this.attr_("labelsDiv"); - div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px"; - div.style.top = area.y + "px"; + return { + name: series_name, + column: idx, + visible: this.visibility()[idx - 1], + color: this.colorsMap_[series_name], + axis: 1 + this.seriesToAxisMap_[series_name] + }; }; /** @@ -1085,6 +1223,7 @@ Dygraph.prototype.createDragInterface_ = function() { prevEndX: null, // pixel coordinates prevEndY: null, // pixel coordinates prevDragDirection: null, + cancelNextDblclick: false, // see comment in dygraph-interaction-model.js // The value on the left side of the graph when a pan operation starts. initialLeftmostDate: null, @@ -1108,7 +1247,8 @@ Dygraph.prototype.createDragInterface_ = function() { boundedDates: null, // [minDate, maxDate] boundedValues: null, // [[minValue, maxValue] ...] - initializeMouseDown: function(event, g, context) { + // contextB is the same thing as this context object but renamed. + initializeMouseDown: function(event, g, contextB) { // prevents mouse drags from selecting page text. if (event.preventDefault) { event.preventDefault(); // Firefox, Chrome, etc. @@ -1117,10 +1257,11 @@ Dygraph.prototype.createDragInterface_ = function() { event.cancelBubble = true; } - context.px = Dygraph.findPosX(g.canvas_); - context.py = Dygraph.findPosY(g.canvas_); - context.dragStartX = g.dragGetX_(event, context); - context.dragStartY = g.dragGetY_(event, context); + contextB.px = Dygraph.findPosX(g.canvas_); + contextB.py = Dygraph.findPosY(g.canvas_); + contextB.dragStartX = g.dragGetX_(event, contextB); + contextB.dragStartY = g.dragGetY_(event, contextB); + contextB.cancelNextDblclick = false; } }; @@ -1138,13 +1279,13 @@ Dygraph.prototype.createDragInterface_ = function() { for (var eventName in interactionModel) { if (!interactionModel.hasOwnProperty(eventName)) continue; - Dygraph.addEvent(this.mouseEventElement_, eventName, + this.addEvent(this.mouseEventElement_, eventName, bindHandler(interactionModel[eventName])); } // 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) { + this.mouseUpHandler_ = function(event) { if (context.isZooming || context.isPanning) { context.isZooming = false; context.dragStartX = null; @@ -1160,7 +1301,9 @@ Dygraph.prototype.createDragInterface_ = function() { delete self.axes_[i].dragValueRange; } } - }); + }; + + this.addEvent(document, 'mouseup', this.mouseUpHandler_); }; /** @@ -1327,7 +1470,7 @@ Dygraph.prototype.doUnzoom_ = function() { } for (var i = 0; i < this.axes_.length; i++) { - if (this.axes_[i].valueWindow !== null) { + if (typeof(this.axes_[i].valueWindow) !== 'undefined' && this.axes_[i].valueWindow !== null) { dirty = true; dirtyY = true; } @@ -1379,7 +1522,9 @@ Dygraph.prototype.doUnzoom_ = function() { newValueRanges = []; for (i = 0; i < this.axes_.length; i++) { - newValueRanges.push(this.axes_[i].extremeRange); + var axis = this.axes_[i]; + newValueRanges.push(axis.valueRange !== null ? + axis.valueRange : axis.extremeRange); } } @@ -1447,172 +1592,253 @@ Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, ne }; /** - * When the mouse moves in the canvas, display information about a nearby data - * point and draw dots over those points in the data series. This function - * takes care of cleanup of previously-drawn dots. - * @param {Object} event The mousemove event from the browser. - * @private + * Get the current graph's area object. + * + * Returns: {x, y, w, h} */ -Dygraph.prototype.mouseMove_ = function(event) { - // This prevents JS errors when mousing over the canvas before data loads. - var points = this.layout_.points; - if (points === undefined) return; +Dygraph.prototype.getArea = function() { + return this.plotter_.area; +}; +/** + * Convert a mouse event to DOM coordinates relative to the graph origin. + * + * Returns a two-element array: [X, Y]. + */ +Dygraph.prototype.eventToDomCoords = function(event) { var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_); + var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(this.mouseEventElement_); + return [canvasx, canvasy]; +}; - var lastx = -1; - var i; - - // Loop through all the points and find the date nearest to our current - // location. - var minDist = 1e+100; - var idx = -1; - for (i = 0; i < points.length; i++) { - var point = points[i]; - if (point === null) continue; - var dist = Math.abs(point.canvasx - canvasx); - if (dist > minDist) continue; - minDist = dist; - idx = i; - } - if (idx >= 0) lastx = points[idx].xval; - - // Extract the points we've selected - this.selPoints_ = []; - var l = points.length; - if (!this.attr_("stackedGraph")) { - for (i = 0; i < l; i++) { - if (points[i].xval == lastx) { - this.selPoints_.push(points[i]); - } - } - } else { - // Need to 'unstack' points starting from the bottom - var cumulative_sum = 0; - for (i = l - 1; i >= 0; i--) { - if (points[i].xval == lastx) { - var p = {}; // Clone the point since we modify it - for (var k in points[i]) { - p[k] = points[i][k]; - } - p.yval -= cumulative_sum; - cumulative_sum += p.yval; - this.selPoints_.push(p); +/** + * Given a canvas X coordinate, find the closest row. + * @param {Number} domX graph-relative DOM X coordinate + * Returns: row number, integer + * @private + */ +Dygraph.prototype.findClosestRow = function(domX) { + var minDistX = Infinity; + var pointIdx = -1, setIdx = -1; + var sets = this.layout_.points; + for (var i = 0; i < sets.length; i++) { + var points = sets[i]; + var len = points.length; + for (var j = 0; j < len; j++) { + var point = points[j]; + if (!Dygraph.isValidPoint(point, true)) continue; + var dist = Math.abs(point.canvasx - domX); + if (dist < minDistX) { + minDistX = dist; + setIdx = i; + pointIdx = j; } } - this.selPoints_.reverse(); } - if (this.attr_("highlightCallback")) { - var px = this.lastx_; - if (px !== null && lastx != px) { - // only fire if the selected point has changed. - this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx)); + // TODO(danvk): remove this function; it's trivial and has only one use. + return this.idxToRow_(setIdx, pointIdx); +}; + +/** + * Given canvas X,Y coordinates, find the closest point. + * + * This finds the individual data point across all visible series + * that's closest to the supplied DOM coordinates using the standard + * Euclidean X,Y distance. + * + * @param {Number} domX graph-relative DOM X coordinate + * @param {Number} domY graph-relative DOM Y coordinate + * Returns: {row, seriesName, point} + * @private + */ +Dygraph.prototype.findClosestPoint = function(domX, domY) { + var minDist = Infinity; + var idx = -1; + var dist, dx, dy, point, closestPoint, closestSeries; + for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) { + var points = this.layout_.points[setIdx]; + for (var i = 0; i < points.length; ++i) { + var point = points[i]; + if (!Dygraph.isValidPoint(point)) continue; + dx = point.canvasx - domX; + dy = point.canvasy - domY; + dist = dx * dx + dy * dy; + if (dist < minDist) { + minDist = dist; + closestPoint = point; + closestSeries = setIdx; + idx = i; + } } } - - // Save last x position for callbacks. - this.lastx_ = lastx; - - this.updateSelection_(); + var name = this.layout_.setNames[closestSeries]; + return { + row: idx + this.getLeftBoundary_(), + seriesName: name, + point: closestPoint + }; }; /** - * Transforms layout_.points index into data row number. - * @param int layout_.points index - * @return int row number, or -1 if none could be found. + * Given canvas X,Y coordinates, find the touched area in a stacked graph. + * + * This first finds the X data point closest to the supplied DOM X coordinate, + * then finds the series which puts the Y coordinate on top of its filled area, + * using linear interpolation between adjacent point pairs. + * + * @param {Number} domX graph-relative DOM X coordinate + * @param {Number} domY graph-relative DOM Y coordinate + * Returns: {row, seriesName, point} * @private */ -Dygraph.prototype.idxToRow_ = function(idx) { - if (idx < 0) return -1; - - for (var i in this.layout_.datasets) { - if (idx < this.layout_.datasets[i].length) { - return this.boundaryIds_[0][0]+idx; +Dygraph.prototype.findStackedPoint = function(domX, domY) { + var row = this.findClosestRow(domX); + var boundary = this.getLeftBoundary_(); + var rowIdx = row - boundary; + var sets = this.layout_.points; + var closestPoint, closestSeries; + for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) { + var points = this.layout_.points[setIdx]; + if (rowIdx >= points.length) continue; + var p1 = points[rowIdx]; + if (!Dygraph.isValidPoint(p1)) continue; + var py = p1.canvasy; + if (domX > p1.canvasx && rowIdx + 1 < points.length) { + // interpolate series Y value using next point + var p2 = points[rowIdx + 1]; + if (Dygraph.isValidPoint(p2)) { + var dx = p2.canvasx - p1.canvasx; + if (dx > 0) { + var r = (domX - p1.canvasx) / dx; + py += r * (p2.canvasy - p1.canvasy); + } + } + } else if (domX < p1.canvasx && rowIdx > 0) { + // interpolate series Y value using previous point + var p0 = points[rowIdx - 1]; + if (Dygraph.isValidPoint(p0)) { + var dx = p1.canvasx - p0.canvasx; + if (dx > 0) { + var r = (p1.canvasx - domX) / dx; + py += r * (p0.canvasy - p1.canvasy); + } + } + } + // Stop if the point (domX, py) is above this series' upper edge + if (setIdx === 0 || py < domY) { + closestPoint = p1; + closestSeries = setIdx; } - idx -= this.layout_.datasets[i].length; } - return -1; + var name = this.layout_.setNames[closestSeries]; + return { + row: row, + seriesName: name, + point: closestPoint + }; }; /** + * When the mouse moves in the canvas, display information about a nearby data + * point and draw dots over those points in the data series. This function + * takes care of cleanup of previously-drawn dots. + * @param {Object} event The mousemove event from the browser. * @private - * Generates HTML for the legend which is displayed when hovering over the - * chart. If no selected points are specified, a default legend is returned - * (this may just be the empty string). - * @param { Number } [x] The x-value of the selected points. - * @param { [Object] } [sel_points] List of selected points for the given - * x-value. Should have properties like 'name', 'yval' and 'canvasy'. - */ -Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) { - // If no points are selected, we display a default legend. Traditionally, - // this has been blank. But a better default would be a conventional legend, - // which provides essential information for a non-interactive chart. - var html, sepLines, i, c; - if (typeof(x) === 'undefined') { - if (this.attr_('legend') != 'always') return ''; - - sepLines = this.attr_('labelsSeparateLines'); - var labels = this.attr_('labels'); - html = ''; - for (i = 1; i < labels.length; i++) { - if (!this.visibility()[i - 1]) continue; - c = this.plotter_.colors[labels[i]]; - if (html !== '') html += (sepLines ? '
' : ' '); - html += "—" + labels[i] + - ""; + */ +Dygraph.prototype.mouseMove_ = function(event) { + // This prevents JS errors when mousing over the canvas before data loads. + var points = this.layout_.points; + if (points === undefined || points === null) return; + + var canvasCoords = this.eventToDomCoords(event); + var canvasx = canvasCoords[0]; + var canvasy = canvasCoords[1]; + + var highlightSeriesOpts = this.attr_("highlightSeriesOpts"); + var selectionChanged = false; + if (highlightSeriesOpts && !this.lockedSet_) { + var closest; + if (this.attr_("stackedGraph")) { + closest = this.findStackedPoint(canvasx, canvasy); + } else { + closest = this.findClosestPoint(canvasx, canvasy); } - return html; + selectionChanged = this.setSelection(closest.row, closest.seriesName); + } else { + var idx = this.findClosestRow(canvasx); + selectionChanged = this.setSelection(idx); } - var xOptView = this.optionsViewForAxis_('x'); - var xvf = xOptView('valueFormatter'); - html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":"; - - var yOptViews = []; - var num_axes = this.numAxes(); - for (i = 0; i < num_axes; i++) { - yOptViews[i] = this.optionsViewForAxis_('y' + (i ? 1 + i : '')); + var callback = this.attr_("highlightCallback"); + if (callback && selectionChanged) { + callback(event, this.lastx_, this.selPoints_, this.lastRow_, this.highlightSet_); } - var showZeros = this.attr_("labelsShowZeroValues"); - sepLines = this.attr_("labelsSeparateLines"); - for (i = 0; i < this.selPoints_.length; i++) { - var pt = this.selPoints_[i]; - if (pt.yval === 0 && !showZeros) continue; - if (!Dygraph.isOK(pt.canvasy)) continue; - if (sepLines) html += "
"; - - var yOptView = yOptViews[this.seriesToAxisMap_[pt.name]]; - var fmtFunc = yOptView('valueFormatter'); - c = this.plotter_.colors[pt.name]; - var yval = fmtFunc(pt.yval, yOptView, pt.name, this); +}; - // TODO(danvk): use a template string here and make it an attribute. - html += " " + pt.name + - ":" + yval; +/** + * Fetch left offset from first defined boundaryIds record (see bug #236). + * @private + */ +Dygraph.prototype.getLeftBoundary_ = function() { + for (var i = 0; i < this.boundaryIds_.length; i++) { + if (this.boundaryIds_[i] !== undefined) { + return this.boundaryIds_[i][0]; + } } - return html; + return 0; }; /** + * Transforms layout_.points index into data row number. + * @param int layout_.points index + * @return int row number, or -1 if none could be found. * @private - * Displays information about the selected points in the legend. If there is no - * selection, the legend will be cleared. - * @param { Number } [x] The x-value of the selected points. - * @param { [Object] } [sel_points] List of selected points for the given - * x-value. Should have properties like 'name', 'yval' and 'canvasy'. - */ -Dygraph.prototype.setLegendHTML_ = function(x, sel_points) { - var html = this.generateLegendHTML_(x, sel_points); - var labelsDiv = this.attr_("labelsDiv"); - if (labelsDiv !== null) { - labelsDiv.innerHTML = html; - } else { - if (typeof(this.shown_legend_error_) == 'undefined') { - this.error('labelsDiv is set to something nonexistent; legend will not be shown.'); - this.shown_legend_error_ = true; + */ +Dygraph.prototype.idxToRow_ = function(setIdx, rowIdx) { + if (rowIdx < 0) return -1; + + var boundary = this.getLeftBoundary_(); + return boundary + rowIdx; + // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) { + // var set = this.layout_.datasets[setIdx]; + // if (idx < set.length) { + // return boundary + idx; + // } + // idx -= set.length; + // } + // return -1; +}; + +Dygraph.prototype.animateSelection_ = function(direction) { + var totalSteps = 10; + var millis = 30; + if (this.fadeLevel === undefined) this.fadeLevel = 0; + if (this.animateId === undefined) this.animateId = 0; + var start = this.fadeLevel; + var steps = direction < 0 ? start : totalSteps - start; + if (steps <= 0) { + if (this.fadeLevel) { + this.updateSelection_(1.0); } + return; } + + var thisId = ++this.animateId; + var that = this; + Dygraph.repeatAndCleanup( + function(n) { + // ignore simultaneous animations + if (that.animateId != thisId) return; + + that.fadeLevel += direction; + if (that.fadeLevel === 0) { + that.clearSelection(); + } else { + that.updateSelection_(that.fadeLevel / totalSteps); + } + }, + steps, millis, function() {}); }; /** @@ -1620,11 +1846,40 @@ Dygraph.prototype.setLegendHTML_ = function(x, sel_points) { * takes care of cleanup of previously-drawn dots. * @private */ -Dygraph.prototype.updateSelection_ = function() { +Dygraph.prototype.updateSelection_ = function(opt_animFraction) { + var defaultPrevented = this.cascadeEvents_('select', { + selectedX: this.lastx_, + selectedPoints: this.selPoints_ + }); + // TODO(danvk): use defaultPrevented here? + // Clear the previously drawn vertical, if there is one var i; var ctx = this.canvas_ctx_; - if (this.previousVerticalX_ >= 0) { + if (this.attr_('highlightSeriesOpts')) { + ctx.clearRect(0, 0, this.width_, this.height_); + var alpha = 1.0 - this.attr_('highlightSeriesBackgroundAlpha'); + if (alpha) { + // Activating background fade includes an animation effect for a gradual + // fade. TODO(klausw): make this independently configurable if it causes + // issues? Use a shared preference to control animations? + var animateBackgroundFade = true; + if (animateBackgroundFade) { + if (opt_animFraction === undefined) { + // start a new animation + this.animateSelection_(1); + return; + } + alpha *= opt_animFraction; + } + ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')'; + ctx.fillRect(0, 0, this.width_, this.height_); + } + + // Redraw only the highlighted series in the interactive canvas (not the + // static plot canvas, which is where series are usually drawn). + this.plotter_._renderLineChart(this.highlightSet_, ctx); + } else if (this.previousVerticalX_ >= 0) { // Determine the maximum highlight circle size. var maxCircleSize = 0; var labels = this.attr_('labels'); @@ -1642,11 +1897,6 @@ Dygraph.prototype.updateSelection_ = function() { } if (this.selPoints_.length > 0) { - // Set the status message to indicate the selected point(s) - if (this.attr_('showLabelsOnHighlight')) { - this.setLegendHTML_(this.lastx_, this.selPoints_); - } - // Draw colored circles over the center of each selected point var canvasx = this.selPoints_[0].canvasx; ctx.save(); @@ -1655,10 +1905,16 @@ Dygraph.prototype.updateSelection_ = function() { if (!Dygraph.isOK(pt.canvasy)) continue; var circleSize = this.attr_('highlightCircleSize', pt.name); - ctx.beginPath(); - ctx.fillStyle = this.plotter_.colors[pt.name]; - ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false); - ctx.fill(); + var callback = this.attr_("drawHighlightPointCallback", pt.name); + var color = this.plotter_.colors[pt.name]; + if (!callback) { + callback = Dygraph.Circles.DEFAULT; + } + ctx.lineWidth = this.attr_('strokeWidth', pt.name); + ctx.strokeStyle = color; + ctx.fillStyle = color; + callback(this.g, pt.name, ctx, canvasx, pt.canvasy, + color, circleSize); } ctx.restore(); @@ -1672,38 +1928,60 @@ Dygraph.prototype.updateSelection_ = function() { * using getSelection(). * @param { Integer } row number that should be highlighted (i.e. appear with * hover dots on the chart). Set to false to clear any selection. + * @param { seriesName } optional series name to highlight that series with the + * the highlightSeriesOpts setting. + * @param { locked } optional If true, keep seriesName selected when mousing + * over the graph, disabling closest-series highlighting. Call clearSelection() + * to unlock it. */ -Dygraph.prototype.setSelection = function(row) { +Dygraph.prototype.setSelection = function(row, opt_seriesName, opt_locked) { // Extract the points we've selected this.selPoints_ = []; - var pos = 0; if (row !== false) { - row = row - this.boundaryIds_[0][0]; + row -= this.getLeftBoundary_(); } + var changed = false; if (row !== false && row >= 0) { - for (var i in this.layout_.datasets) { - if (row < this.layout_.datasets[i].length) { - var point = this.layout_.points[pos+row]; + if (row != this.lastRow_) changed = true; + this.lastRow_ = row; + for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) { + var set = this.layout_.datasets[setIdx]; + if (row < set.length) { + var point = this.layout_.points[setIdx][row]; if (this.attr_("stackedGraph")) { - point = this.layout_.unstackPointAtIndex(pos+row); + point = this.layout_.unstackPointAtIndex(setIdx, row); } - this.selPoints_.push(point); + if (point.yval !== null) this.selPoints_.push(point); } - pos += this.layout_.datasets[i].length; } + } else { + if (this.lastRow_ >= 0) changed = true; + this.lastRow_ = -1; } if (this.selPoints_.length) { this.lastx_ = this.selPoints_[0].xval; - this.updateSelection_(); } else { - this.clearSelection(); + this.lastx_ = -1; + } + + if (opt_seriesName !== undefined) { + if (this.highlightSet_ !== opt_seriesName) changed = true; + this.highlightSet_ = opt_seriesName; } + if (opt_locked !== undefined) { + this.lockedSet_ = opt_locked; + } + + if (changed) { + this.updateSelection_(undefined); + } + return changed; }; /** @@ -1716,7 +1994,7 @@ Dygraph.prototype.mouseOut_ = function(event) { this.attr_("unhighlightCallback")(event); } - if (this.attr_("hideOverlayOnMouseOut")) { + if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_) { this.clearSelection(); } }; @@ -1726,11 +2004,20 @@ Dygraph.prototype.mouseOut_ = function(event) { * the mouse over the chart). */ Dygraph.prototype.clearSelection = function() { + this.cascadeEvents_('deselect', {}); + + this.lockedSet_ = false; // Get rid of the overlay data + if (this.fadeLevel) { + this.animateSelection_(-1); + return; + } this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_); - this.setLegendHTML_(); + this.fadeLevel = 0; this.selPoints_ = []; this.lastx_ = -1; + this.lastRow_ = -1; + this.highlightSet_ = null; }; /** @@ -1743,15 +2030,26 @@ Dygraph.prototype.getSelection = function() { return -1; } - for (var row=0; row= 1; i--) { if (!this.visibility()[i - 1]) continue; - // TODO(danvk): is this copy really necessary? + // Note: this copy _is_ necessary at the moment. + // If you remove it, it breaks zooming with error bars on. + // TODO(danvk): investigate further & write a test for this. var series = []; for (j = 0; j < rolledSeries[i].length; j++) { series.push(rolledSeries[i][j]); @@ -1966,6 +2265,11 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { } actual_y = series[j][1]; + if (actual_y === null) { + series[j] = [x, null]; + continue; + } + cumulative_y[x] += actual_y; series[j] = [x, cumulative_y[x]]; @@ -1984,6 +2288,26 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { datasets[i] = series; } + // For stacked graphs, a NaN value for any point in the sum should create a + // clean gap in the graph. Back-propagate NaNs to all points at this X value. + if (this.attr_("stackedGraph")) { + for (k = datasets.length - 1; k >= 0; --k) { + // Use the first nonempty dataset to get X values. + if (!datasets[k]) continue; + for (j = 0; j < datasets[k].length; j++) { + var x = datasets[k][j][0]; + if (isNaN(cumulative_y[x])) { + // Set all Y values to NaN at that X value. + for (i = datasets.length - 1; i >= 0; i--) { + if (!datasets[i]) continue; + datasets[i][j][1] = NaN; + } + } + } + break; + } + } + return [ datasets, extremes, boundaryIds ]; }; @@ -1992,20 +2316,11 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { * has changed. If the underlying data or options have changed, predraw_ will * be called before drawGraph_ is called. * - * clearSelection, when undefined or true, causes this.clearSelection to be - * called at the end of the draw operation. This should rarely be defined, - * and never true (that is it should be undefined most of the time, and - * rarely false.) - * * @private */ -Dygraph.prototype.drawGraph_ = function(clearSelection) { +Dygraph.prototype.drawGraph_ = function() { var start = new Date(); - if (typeof(clearSelection) === 'undefined') { - clearSelection = true; - } - // This is used to set the second parameter to drawCallback, below. var is_initial_draw = this.is_initial_draw_; this.is_initial_draw_ = false; @@ -2019,9 +2334,17 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { var extremes = packed[1]; this.boundaryIds_ = packed[2]; + this.setIndexByName_ = {}; + var labels = this.attr_("labels"); + if (labels.length > 0) { + this.setIndexByName_[labels[0]] = 0; + } + var dataIdx = 0; for (var i = 1; i < datasets.length; i++) { + this.setIndexByName_[labels[i]] = i; if (!this.visibility()[i - 1]) continue; - this.layout_.addDataset(this.attr_("labels")[i], datasets[i]); + this.layout_.addDataset(labels[i], datasets[i]); + this.datasetIndex_[i] = dataIdx++; } this.computeYAxisRanges_(extremes); @@ -2035,7 +2358,7 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { this.layout_.setDateWindow(this.dateWindow_); this.zoomed_x_ = tmp_zoomed_x; this.layout_.evaluateWithError(); - this.renderGraph_(is_initial_draw, false); + this.renderGraph_(is_initial_draw); if (this.attr_("timingName")) { var end = new Date(); @@ -2045,32 +2368,41 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { } }; -Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) { +/** + * This does the work of drawing the chart. It assumes that the layout and axis + * scales have already been set (e.g. by predraw_). + * + * @private + */ +Dygraph.prototype.renderGraph_ = function(is_initial_draw) { + this.cascadeEvents_('clearChart'); this.plotter_.clear(); + + if (this.attr_('underlayCallback')) { + // NOTE: we pass the dygraph object to this callback twice to avoid breaking + // users who expect a deprecated form of this callback. + this.attr_('underlayCallback')( + this.hidden_ctx_, this.layout_.getPlotArea(), this, this); + } + + var e = { + canvas: this.hidden_, + drawingContext: this.hidden_ctx_ + }; + this.cascadeEvents_('willDrawChart', e); this.plotter_.render(); + this.cascadeEvents_('didDrawChart', e); + + // TODO(danvk): is this a performance bottleneck when panning? + // The interaction canvas should already be empty in that situation. this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width, this.canvas_.height); // Generate a static legend before any particular point is selected. - this.setLegendHTML_(); - - if (!is_initial_draw) { - if (clearSelection) { - if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) { - // We should select the point nearest the page x/y here, but it's easier - // to just clear the selection. This prevents erroneous hover dots from - // being displayed. - this.clearSelection(); - } else { - this.clearSelection(); - } - } - } if (this.rangeSelector_) { this.rangeSelector_.renderInteractiveLayer(); } - if (this.attr_("drawCallback") !== null) { this.attr_("drawCallback")(this, is_initial_draw); } @@ -2090,7 +2422,7 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) { Dygraph.prototype.computeYAxes_ = function() { // Preserve valueWindow settings if they exist, and if the user hasn't // specified a new valueRange. - var i, valueWindows, seriesName, axis, index; + var i, valueWindows, seriesName, axis, index, opts, v; if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) { valueWindows = []; for (index = 0; index < this.axes_.length; index++) { @@ -2122,7 +2454,7 @@ Dygraph.prototype.computeYAxes_ = function() { // Copy global axis options over to the first axis. for (i = 0; i < axisOptions.length; i++) { var k = axisOptions[i]; - var v = this.attr_(k); + v = this.attr_(k); if (v) this.axes_[0][k] = v; } @@ -2136,7 +2468,7 @@ Dygraph.prototype.computeYAxes_ = function() { } if (typeof(axis) == 'object') { // Add a new axis, making a copy of its per-axis options. - var opts = {}; + opts = {}; Dygraph.update(opts, this.axes_[0]); Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this. var yAxisId = this.axes_.length; @@ -2170,6 +2502,22 @@ Dygraph.prototype.computeYAxes_ = function() { this.axes_[index].valueWindow = valueWindows[index]; } } + + // New axes options + for (axis = 0; axis < this.axes_.length; axis++) { + if (axis === 0) { + opts = this.optionsViewForAxis_('y' + (axis ? '2' : '')); + v = opts("valueRange"); + if (v) this.axes_[axis].valueRange = v; + } else { // To keep old behavior + var axes = this.user_attrs_.axes; + if (axes && axes.y2) { + v = axes.y2.valueRange; + if (v) this.axes_[axis].valueRange = v; + } + } + } + }; /** @@ -2325,27 +2673,24 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { * * This is where undesirable points (i.e. negative values on log scales and * missing values through which we wish to connect lines) are dropped. - * + * TODO(danvk): the "missing values" bit above doesn't seem right. + * * @private */ -Dygraph.prototype.extractSeries_ = function(rawData, i, logScale, connectSeparatedPoints) { +Dygraph.prototype.extractSeries_ = function(rawData, i, logScale) { + // TODO(danvk): pre-allocate series here. var series = []; for (var j = 0; j < rawData.length; j++) { var x = rawData[j][0]; var point = rawData[j][i]; if (logScale) { // On the log scale, points less than zero do not exist. - // This will create a gap in the chart. Note that this ignores - // connectSeparatedPoints. + // This will create a gap in the chart. if (point <= 0) { point = null; } - series.push([x, point]); - } else { - if (point !== null || !connectSeparatedPoints) { - series.push([x, point]); - } } + series.push([x, point]); } return series; }; @@ -2520,7 +2865,7 @@ Dygraph.prototype.detectTypeFromString_ = function(str) { // TODO(danvk): use Dygraph.numberValueFormatter here? /** @private (shut up, jsdoc!) */ this.attrs_.axes.x.valueFormatter = function(x) { return x; }; - this.attrs_.axes.x.ticker = Dygraph.numericTicks; + this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks; this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter; } }; @@ -2730,6 +3075,13 @@ Dygraph.prototype.parseArray_ = function(data) { for (i = 1; i < data[0].length; i++) { this.attrs_.labels.push("Y" + i); } + } else { + var num_labels = this.attr_("labels"); + if (num_labels.length != data[0].length) { + this.error("Mismatch between number of labels (" + num_labels + + ") and number of columns in array (" + data[0].length + ")"); + return null; + } } if (Dygraph.isDateLike(data[0][0])) { @@ -2759,7 +3111,7 @@ Dygraph.prototype.parseArray_ = function(data) { /** @private (shut up, jsdoc!) */ this.attrs_.axes.x.valueFormatter = function(x) { return x; }; this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter; - this.attrs_.axes.x.ticker = Dygraph.numericTicks; + this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks; return data; } }; @@ -2785,7 +3137,7 @@ Dygraph.prototype.parseDataTable_ = function(data) { num = Math.floor((num - 1) / 26); } return shortText; - } + }; var cols = data.getNumberOfColumns(); var rows = data.getNumberOfRows(); @@ -2799,7 +3151,7 @@ Dygraph.prototype.parseDataTable_ = function(data) { } else if (indepType == 'number') { this.attrs_.xValueParser = function(x) { return parseFloat(x); }; this.attrs_.axes.x.valueFormatter = function(x) { return x; }; - this.attrs_.axes.x.ticker = Dygraph.numericTicks; + this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks; this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter; } else { this.error("only 'date', 'datetime' and 'number' types are supported for " + @@ -3007,7 +3359,7 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) { if (requiresNewPoints) { this.predraw_(); } else { - this.renderGraph_(false, false); + this.renderGraph_(false); } } } @@ -3175,15 +3527,28 @@ Dygraph.prototype.annotations = function() { }; /** + * Get the list of label names for this graph. The first column is the + * x-axis, so the data series names start at index 1. + */ +Dygraph.prototype.getLabels = function() { + return this.attr_("labels").slice(); +}; + +/** * Get the index of a series (column) given its name. The first column is the * x-axis, so the data series start with index 1. */ Dygraph.prototype.indexFromSetName = function(name) { - var labels = this.attr_("labels"); - for (var i = 0; i < labels.length; i++) { - if (labels[i] == name) return i; - } - return null; + return this.setIndexByName_[name]; +}; + +/** + * Get the internal dataset index given its name. These are numbered starting from 0, + * and only count visible sets. + * @private + */ +Dygraph.prototype.datasetIndexFromSetName_ = function(name) { + return this.datasetIndex_[this.indexFromSetName(name)]; }; /** @@ -3193,6 +3558,7 @@ Dygraph.prototype.indexFromSetName = function(name) { * called once -- all calls after the first will return immediately. */ Dygraph.addAnnotationRule = function() { + // TODO(danvk): move this function into plugins/annotations.js? if (Dygraph.addedAnnotationCSS) return; var rule = "border: 1px solid black; " +