dygraphs

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> .KEYW {color: #933;} .COMM {color: #bbb; font-style: italic;} .NUMB {color: #393;} .STRN {color: #393;} .REGX {color: #339;} .line {border-right: 1px dotted #666; color: #666; font-style: normal;} </style></head><body><pre> 1 /** 2 * @license 3 * Copyright 2011 Robert Konigsberg (konigsberg@google.com) 4 * MIT-licenced: https://opensource.org/licenses/MIT 5 */ 6 7 /** 8 * @fileoverview The default interaction model for Dygraphs. This is kept out 9 * of dygraph.js for better navigability. 10 * @author Robert Konigsberg (konigsberg@google.com) 11 */ 12 13 /*global Dygraph:false */ 14 "use strict"; 15 16 import * as utils from './dygraph-utils'; 17 18 /** 19 * You can drag this many pixels past the edge of the chart and still have it 20 * be considered a zoom. This makes it easier to zoom to the exact edge of the 21 * chart, a fairly common operation. 22 */ 23 var DRAG_EDGE_MARGIN = 100; 24 25 /** 26 * A collection of functions to facilitate build custom interaction models. 27 * @class 28 */ 29 var DygraphInteraction = {}; 30 31 /** 32 * Checks whether the beginning & ending of an event were close enough that it 33 * should be considered a click. If it should, dispatch appropriate events. 34 * Returns true if the event was treated as a click. 35 * 36 * @param {Event} event 37 * @param {Dygraph} g 38 * @param {Object} context 39 */ 40 DygraphInteraction.maybeTreatMouseOpAsClick = function(event, g, context) { 41 context.dragEndX = utils.dragGetX_(event, context); 42 context.dragEndY = utils.dragGetY_(event, context); 43 var regionWidth = Math.abs(context.dragEndX - context.dragStartX); 44 var regionHeight = Math.abs(context.dragEndY - context.dragStartY); 45 46 if (regionWidth < 2 && regionHeight < 2 && 47 g.lastx_ !== undefined && g.lastx_ !== null) { 48 DygraphInteraction.treatMouseOpAsClick(g, event, context); 49 } 50 51 context.regionWidth = regionWidth; 52 context.regionHeight = regionHeight; 53 }; 54 55 /** 56 * Called in response to an interaction model operation that 57 * should start the default panning behavior. 58 * 59 * It's used in the default callback for "mousedown" operations. 60 * Custom interaction model builders can use it to provide the default 61 * panning behavior. 62 * 63 * @param {Event} event the event object which led to the startPan call. 64 * @param {Dygraph} g The dygraph on which to act. 65 * @param {Object} context The dragging context object (with 66 * dragStartX/dragStartY/etc. properties). This function modifies the 67 * context. 68 */ 69 DygraphInteraction.startPan = function(event, g, context) { 70 var i, axis; 71 context.isPanning = true; 72 var xRange = g.xAxisRange(); 73 74 if (g.getOptionForAxis("logscale", "x")) { 75 context.initialLeftmostDate = utils.log10(xRange[0]); 76 context.dateRange = utils.log10(xRange[1]) - utils.log10(xRange[0]); 77 } else { 78 context.initialLeftmostDate = xRange[0]; 79 context.dateRange = xRange[1] - xRange[0]; 80 } 81 context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1); 82 83 if (g.getNumericOption("panEdgeFraction")) { 84 var maxXPixelsToDraw = g.width_ * g.getNumericOption("panEdgeFraction"); 85 var xExtremes = g.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes! 86 87 var boundedLeftX = g.toDomXCoord(xExtremes[0]) - maxXPixelsToDraw; 88 var boundedRightX = g.toDomXCoord(xExtremes[1]) + maxXPixelsToDraw; 89 90 var boundedLeftDate = g.toDataXCoord(boundedLeftX); 91 var boundedRightDate = g.toDataXCoord(boundedRightX); 92 context.boundedDates = [boundedLeftDate, boundedRightDate]; 93 94 var boundedValues = []; 95 var maxYPixelsToDraw = g.height_ * g.getNumericOption("panEdgeFraction"); 96 97 for (i = 0; i < g.axes_.length; i++) { 98 axis = g.axes_[i]; 99 var yExtremes = axis.extremeRange; 100 101 var boundedTopY = g.toDomYCoord(yExtremes[0], i) + maxYPixelsToDraw; 102 var boundedBottomY = g.toDomYCoord(yExtremes[1], i) - maxYPixelsToDraw; 103 104 var boundedTopValue = g.toDataYCoord(boundedTopY, i); 105 var boundedBottomValue = g.toDataYCoord(boundedBottomY, i); 106 107 boundedValues[i] = [boundedTopValue, boundedBottomValue]; 108 } 109 context.boundedValues = boundedValues; 110 } else { 111 // undo effect if it was once set 112 context.boundedDates = null; 113 context.boundedValues = null; 114 } 115 116 // Record the range of each y-axis at the start of the drag. 117 // If any axis has a valueRange, then we want a 2D pan. 118 // We can't store data directly in g.axes_, because it does not belong to us 119 // and could change out from under us during a pan (say if there's a data 120 // update). 121 context.is2DPan = false; 122 context.axes = []; 123 for (i = 0; i < g.axes_.length; i++) { 124 axis = g.axes_[i]; 125 var axis_data = {}; 126 var yRange = g.yAxisRange(i); 127 // TODO(konigsberg): These values should be in |context|. 128 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale. 129 var logscale = g.attributes_.getForAxis("logscale", i); 130 if (logscale) { 131 axis_data.initialTopValue = utils.log10(yRange[1]); 132 axis_data.dragValueRange = utils.log10(yRange[1]) - utils.log10(yRange[0]); 133 } else { 134 axis_data.initialTopValue = yRange[1]; 135 axis_data.dragValueRange = yRange[1] - yRange[0]; 136 } 137 axis_data.unitsPerPixel = axis_data.dragValueRange / (g.plotter_.area.h - 1); 138 context.axes.push(axis_data); 139 140 // While calculating axes, set 2dpan. 141 if (axis.valueRange) context.is2DPan = true; 142 } 143 }; 144 145 /** 146 * Called in response to an interaction model operation that 147 * responds to an event that pans the view. 148 * 149 * It's used in the default callback for "mousemove" operations. 150 * Custom interaction model builders can use it to provide the default 151 * panning behavior. 152 * 153 * @param {Event} event the event object which led to the movePan call. 154 * @param {Dygraph} g The dygraph on which to act. 155 * @param {Object} context The dragging context object (with 156 * dragStartX/dragStartY/etc. properties). This function modifies the 157 * context. 158 */ 159 DygraphInteraction.movePan = function(event, g, context) { 160 context.dragEndX = utils.dragGetX_(event, context); 161 context.dragEndY = utils.dragGetY_(event, context); 162 163 var minDate = context.initialLeftmostDate - 164 (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel; 165 if (context.boundedDates) { 166 minDate = Math.max(minDate, context.boundedDates[0]); 167 } 168 var maxDate = minDate + context.dateRange; 169 if (context.boundedDates) { 170 if (maxDate > context.boundedDates[1]) { 171 // Adjust minDate, and recompute maxDate. 172 minDate = minDate - (maxDate - context.boundedDates[1]); 173 maxDate = minDate + context.dateRange; 174 } 175 } 176 177 if (g.getOptionForAxis("logscale", "x")) { 178 g.dateWindow_ = [ Math.pow(utils.LOG_SCALE, minDate), 179 Math.pow(utils.LOG_SCALE, maxDate) ]; 180 } else { 181 g.dateWindow_ = [minDate, maxDate]; 182 } 183 184 // y-axis scaling is automatic unless this is a full 2D pan. 185 if (context.is2DPan) { 186 187 var pixelsDragged = context.dragEndY - context.dragStartY; 188 189 // Adjust each axis appropriately. 190 for (var i = 0; i < g.axes_.length; i++) { 191 var axis = g.axes_[i]; 192 var axis_data = context.axes[i]; 193 var unitsDragged = pixelsDragged * axis_data.unitsPerPixel; 194 195 var boundedValue = context.boundedValues ? context.boundedValues[i] : null; 196 197 // In log scale, maxValue and minValue are the logs of those values. 198 var maxValue = axis_data.initialTopValue + unitsDragged; 199 if (boundedValue) { 200 maxValue = Math.min(maxValue, boundedValue[1]); 201 } 202 var minValue = maxValue - axis_data.dragValueRange; 203 if (boundedValue) { 204 if (minValue < boundedValue[0]) { 205 // Adjust maxValue, and recompute minValue. 206 maxValue </sp