--- /dev/null
+/**
+ * @license
+ * Copyright 2013 Dan Vanderkam (danvdk@gmail.com)
+ * MIT-licensed (http://opensource.org/licenses/MIT)
+ *
+ * Note: This plugin requires jQuery and jQuery UI Draggable.
+ *
+ * See high-level documentation at
+ * https://docs.google.com/document/d/1OHNE8BNNmMtFlRQ969DACIYIJ9VVJ7w3dSPRJDEeIew/edit#
+ */
+
+/*global Dygraph:false */
+
+Dygraph.Plugins.Hairlines = (function() {
+
+"use strict";
+
+/**
+ * @typedef {
+ * xval: number, // x-value (i.e. millis or a raw number)
+ * interpolated: bool, // alternative is to snap to closest
+ * lineDiv: !Element // vertical hairline div
+ * infoDiv: !Element // div containing info about the nearest points
+ * selected: boolean // whether this hairline is selected
+ * } Hairline
+ */
+
+// We have to wait a few ms after clicks to give the user a chance to
+// double-click to unzoom. This sets that delay period.
+var CLICK_DELAY_MS = 300;
+
+var hairlines = function(opt_options) {
+ /* @type {!Array.<!Hairline>} */
+ this.hairlines_ = [];
+
+ // Used to detect resizes (which require the divs to be repositioned).
+ this.lastWidth_ = -1;
+ this.lastHeight = -1;
+ this.dygraph_ = null;
+
+ this.addTimer_ = null;
+ opt_options = opt_options || {};
+
+ this.divFiller_ = opt_options['divFiller'] || null;
+};
+
+hairlines.prototype.toString = function() {
+ return "Hairlines Plugin";
+};
+
+hairlines.prototype.activate = function(g) {
+ this.dygraph_ = g;
+ this.hairlines_ = [];
+
+ return {
+ didDrawChart: this.didDrawChart,
+ click: this.click,
+ dblclick: this.dblclick,
+ dataDidUpdate: this.dataDidUpdate
+ };
+};
+
+hairlines.prototype.detachLabels = function() {
+ for (var i = 0; i < this.hairlines_.length; i++) {
+ var h = this.hairlines_[i];
+ $(h.lineDiv).remove();
+ $(h.infoDiv).remove();
+ this.hairlines_[i] = null;
+ }
+ this.hairlines_ = [];
+};
+
+hairlines.prototype.hairlineWasDragged = function(h, event, ui) {
+ var area = this.dygraph_.getArea();
+ var oldXVal = h.xval;
+ h.xval = this.dygraph_.toDataXCoord(ui.position.left);
+ this.moveHairlineToTop(h);
+ this.updateHairlineDivPositions();
+ this.updateHairlineInfo();
+ this.updateHairlineStyles();
+ $(this).triggerHandler('hairlineMoved', {
+ oldXVal: oldXVal,
+ newXVal: h.xval
+ });
+ $(this).triggerHandler('hairlinesChanged', {});
+};
+
+// This creates the hairline object and returns it.
+// It does not position it and does not attach it to the chart.
+hairlines.prototype.createHairline = function(props) {
+ var h;
+ var self = this;
+
+ var $lineContainerDiv = $('<div/>').css({
+ 'width': '6px',
+ 'margin-left': '-3px',
+ 'position': 'absolute',
+ 'z-index': '10'
+ })
+ .addClass('dygraph-hairline');
+
+ var $lineDiv = $('<div/>').css({
+ 'width': '1px',
+ 'position': 'relative',
+ 'left': '3px',
+ 'background': 'black',
+ 'height': '100%'
+ });
+ $lineDiv.appendTo($lineContainerDiv);
+
+ var $infoDiv = $('#hairline-template').clone().removeAttr('id').css({
+ 'position': 'absolute'
+ })
+ .show();
+
+ // Surely there's a more jQuery-ish way to do this!
+ $([$infoDiv.get(0), $lineContainerDiv.get(0)])
+ .draggable({
+ 'axis': 'x',
+ 'drag': function(event, ui) {
+ self.hairlineWasDragged(h, event, ui);
+ }
+ // TODO(danvk): set cursor here
+ });
+
+ h = $.extend({
+ interpolated: true,
+ selected: false,
+ lineDiv: $lineContainerDiv.get(0),
+ infoDiv: $infoDiv.get(0)
+ }, props);
+
+ var that = this;
+ $infoDiv.on('click', '.hairline-kill-button', function(e) {
+ that.removeHairline(h);
+ $(that).triggerHandler('hairlineDeleted', {
+ xval: h.xval
+ });
+ $(that).triggerHandler('hairlinesChanged', {});
+ e.stopPropagation(); // don't want .click() to trigger, below.
+ }).on('click', function() {
+ that.moveHairlineToTop(h);
+ });
+
+ return h;
+};
+
+// Moves a hairline's divs to the top of the z-ordering.
+hairlines.prototype.moveHairlineToTop = function(h) {
+ var div = this.dygraph_.graphDiv;
+ $(h.infoDiv).appendTo(div);
+ $(h.lineDiv).appendTo(div);
+
+ var idx = this.hairlines_.indexOf(h);
+ this.hairlines_.splice(idx, 1);
+ this.hairlines_.push(h);
+};
+
+// Positions existing hairline divs.
+hairlines.prototype.updateHairlineDivPositions = function() {
+ var g = this.dygraph_;
+ var layout = this.dygraph_.getArea();
+ var chartLeft = layout.x, chartRight = layout.x + layout.w;
+ var div = this.dygraph_.graphDiv;
+ var pos = Dygraph.findPos(div);
+ var box = [layout.x + pos.x, layout.y + pos.y];
+ box.push(box[0] + layout.w);
+ box.push(box[1] + layout.h);
+
+ $.each(this.hairlines_, function(idx, h) {
+ var left = g.toDomXCoord(h.xval);
+ h.domX = left; // See comments in this.dataDidUpdate
+ $(h.lineDiv).css({
+ 'left': left + 'px',
+ 'top': layout.y + 'px',
+ 'height': layout.h + 'px'
+ }); // .draggable("option", "containment", box);
+ $(h.infoDiv).css({
+ 'left': left + 'px',
+ 'top': layout.y + 'px',
+ }).draggable("option", "containment", box);
+
+ var visible = (left >= chartLeft && left <= chartRight);
+ $([h.infoDiv, h.lineDiv]).toggle(visible);
+ });
+};
+
+// Sets styles on the hairline (i.e. "selected")
+hairlines.prototype.updateHairlineStyles = function() {
+ $.each(this.hairlines_, function(idx, h) {
+ $([h.infoDiv, h.lineDiv]).toggleClass('selected', h.selected);
+ });
+};
+
+// Find prevRow and nextRow such that
+// g.getValue(prevRow, 0) <= xval
+// g.getValue(nextRow, 0) >= xval
+// g.getValue({prev,next}Row, col) != null, NaN or undefined
+// and there's no other row such that:
+// g.getValue(prevRow, 0) < g.getValue(row, 0) < g.getValue(nextRow, 0)
+// g.getValue(row, col) != null, NaN or undefined.
+// Returns [prevRow, nextRow]. Either can be null (but not both).
+hairlines.findPrevNextRows = function(g, xval, col) {
+ var prevRow = null, nextRow = null;
+ var numRows = g.numRows();
+ for (var row = 0; row < numRows; row++) {
+ var yval = g.getValue(row, col);
+ if (yval === null || yval === undefined || isNaN(yval)) continue;
+
+ var rowXval = g.getValue(row, 0);
+ if (rowXval <= xval) prevRow = row;
+
+ if (rowXval >= xval) {
+ nextRow = row;
+ break;
+ }
+ }
+
+ return [prevRow, nextRow];
+};
+
+// Fills out the info div based on current coordinates.
+hairlines.prototype.updateHairlineInfo = function() {
+ var mode = 'closest';
+
+ var g = this.dygraph_;
+ var xRange = g.xAxisRange();
+ var that = this;
+ $.each(this.hairlines_, function(idx, h) {
+ // To use generateLegendHTML, we synthesize an array of selected points.
+ var selPoints = [];
+ var labels = g.getLabels();
+ var row, prevRow, nextRow;
+
+ if (!h.interpolated) {
+ // "closest point" mode.
+ // TODO(danvk): make findClosestRow method public
+ row = g.findClosestRow(g.toDomXCoord(h.xval));
+ for (var i = 1; i < g.numColumns(); i++) {
+ selPoints.push({
+ canvasx: 1, // TODO(danvk): real coordinate
+ canvasy: 1, // TODO(danvk): real coordinate
+ xval: h.xval,
+ yval: g.getValue(row, i),
+ name: labels[i]
+ });
+ }
+ } else {
+ // "interpolated" mode.
+ for (var i = 1; i < g.numColumns(); i++) {
+ var prevNextRow = hairlines.findPrevNextRows(g, h.xval, i);
+ prevRow = prevNextRow[0], nextRow = prevNextRow[1];
+
+ // For x-values outside the domain, interpolate "between" the extreme
+ // point and itself.
+ if (prevRow === null) prevRow = nextRow;
+ if (nextRow === null) nextRow = prevRow;
+
+ // linear interpolation
+ var prevX = g.getValue(prevRow, 0),
+ nextX = g.getValue(nextRow, 0),
+ prevY = g.getValue(prevRow, i),
+ nextY = g.getValue(nextRow, i),
+ frac = prevRow == nextRow ? 0 : (h.xval - prevX) / (nextX - prevX),
+ yval = frac * nextY + (1 - frac) * prevY;
+
+ selPoints.push({
+ canvasx: 1, // TODO(danvk): real coordinate
+ canvasy: 1, // TODO(danvk): real coordinate
+ xval: h.xval,
+ yval: yval,
+ prevRow: prevRow,
+ nextRow: nextRow,
+ name: labels[i]
+ });
+ }
+ }
+
+ if (that.divFiller_) {
+ that.divFiller_(h.infoDiv, {
+ closestRow: row,
+ points: selPoints,
+ hairline: that.createPublicHairline_(h),
+ dygraph: g
+ });
+ } else {
+ var html = Dygraph.Plugins.Legend.generateLegendHTML(g, h.xval, selPoints, 10);
+ $('.hairline-legend', h.infoDiv).html(html);
+ }
+ });
+};
+
+// After a resize, the hairline divs can get dettached from the chart.
+// This reattaches them.
+hairlines.prototype.attachHairlinesToChart_ = function() {
+ var div = this.dygraph_.graphDiv;
+ $.each(this.hairlines_, function(idx, h) {
+ $([h.lineDiv, h.infoDiv]).appendTo(div);
+ });
+};
+
+// Deletes a hairline and removes it from the chart.
+hairlines.prototype.removeHairline = function(h) {
+ var idx = this.hairlines_.indexOf(h);
+ if (idx >= 0) {
+ this.hairlines_.splice(idx, 1);
+ $([h.lineDiv, h.infoDiv]).remove();
+ } else {
+ Dygraph.warn('Tried to remove non-existent hairline.');
+ }
+};
+
+hairlines.prototype.didDrawChart = function(e) {
+ var g = e.dygraph;
+
+ // Early out in the (common) case of zero hairlines.
+ if (this.hairlines_.length === 0) return;
+
+ this.updateHairlineDivPositions();
+ this.attachHairlinesToChart_();
+ this.updateHairlineInfo();
+ this.updateHairlineStyles();
+};
+
+hairlines.prototype.dataDidUpdate = function(e) {
+ // When the data in the chart updates, the hairlines should stay in the same
+ // position on the screen. didDrawChart stores a domX parameter for each
+ // hairline. We use that to reposition them on data updates.
+ var g = this.dygraph_;
+ $.each(this.hairlines_, function(idx, h) {
+ if (h.hasOwnProperty('domX')) {
+ h.xval = g.toDataXCoord(h.domX);
+ }
+ });
+};
+
+hairlines.prototype.click = function(e) {
+ if (this.addTimer_) {
+ // Another click is in progress; ignore this one.
+ return;
+ }
+
+ var area = e.dygraph.getArea();
+ var xval = this.dygraph_.toDataXCoord(e.canvasx);
+
+ var that = this;
+ this.addTimer_ = setTimeout(function() {
+ that.addTimer_ = null;
+ that.hairlines_.push(that.createHairline({xval: xval}));
+
+ that.updateHairlineDivPositions();
+ that.updateHairlineInfo();
+ that.updateHairlineStyles();
+ that.attachHairlinesToChart_();
+
+ $(that).triggerHandler('hairlineCreated', {
+ xval: xval
+ });
+ $(that).triggerHandler('hairlinesChanged', {});
+ }, CLICK_DELAY_MS);
+};
+
+hairlines.prototype.dblclick = function(e) {
+ if (this.addTimer_) {
+ clearTimeout(this.addTimer_);
+ this.addTimer_ = null;
+ }
+};
+
+hairlines.prototype.destroy = function() {
+ this.detachLabels();
+};
+
+
+// Public API
+
+/**
+ * This is a restricted view of this.hairlines_ which doesn't expose
+ * implementation details like the handle divs.
+ *
+ * @typedef {
+ * xval: number, // x-value (i.e. millis or a raw number)
+ * interpolated: bool, // alternative is to snap to closest
+ * selected: bool // whether the hairline is selected.
+ * } PublicHairline
+ */
+
+/**
+ * @param {!Hairline} h Internal hairline.
+ * @return {!PublicHairline} Restricted public view of the hairline.
+ */
+hairlines.prototype.createPublicHairline_ = function(h) {
+ return {
+ xval: h.xval,
+ interpolated: h.interpolated,
+ selected: h.selected
+ };
+};
+
+/**
+ * @return {!Array.<!PublicHairline>} The current set of hairlines, ordered
+ * from back to front.
+ */
+hairlines.prototype.get = function() {
+ var result = [];
+ for (var i = 0; i < this.hairlines_.length; i++) {
+ var h = this.hairlines_[i];
+ result.push(this.createPublicHairline_(h));
+ }
+ return result;
+};
+
+/**
+ * Calling this will result in a hairlinesChanged event being triggered, no
+ * matter whether it consists of additions, deletions, moves or no changes at
+ * all.
+ *
+ * @param {!Array.<!PublicHairline>} hairlines The new set of hairlines,
+ * ordered from back to front.
+ */
+hairlines.prototype.set = function(hairlines) {
+ // Re-use divs from the old hairlines array so far as we can.
+ // They're already correctly z-ordered.
+ var anyCreated = false;
+ for (var i = 0; i < hairlines.length; i++) {
+ var h = hairlines[i];
+
+ if (this.hairlines_.length > i) {
+ this.hairlines_[i].xval = h.xval;
+ this.hairlines_[i].interpolated = h.interpolated;
+ this.hairlines_[i].selected = h.selected;
+ } else {
+ this.hairlines_.push(this.createHairline({
+ xval: h.xval,
+ interpolated: h.interpolated,
+ selected: h.selected
+ }));
+ anyCreated = true;
+ }
+ }
+
+ // If there are any remaining hairlines, destroy them.
+ while (hairlines.length < this.hairlines_.length) {
+ this.removeHairline(this.hairlines_[hairlines.length]);
+ }
+
+ this.updateHairlineDivPositions();
+ this.updateHairlineInfo();
+ this.updateHairlineStyles();
+ if (anyCreated) {
+ this.attachHairlinesToChart_();
+ }
+
+ $(this).triggerHandler('hairlinesChanged', {});
+};
+
+return hairlines;
+
+})();
projects / dygraphs.git / blobdiff