tests/interaction.js

   1
   2 function downV3(event, g, context) {
   3   context.initializeMouseDown(event, g, context);
   4   if (event.altKey || event.shiftKey) {
   5     Dygraph.startZoom(event, g, context);
   6   } else {
   7     Dygraph.startPan(event, g, context);
   8   }
   9 }
  10
  11 function moveV3(event, g, context) {
  12   if (context.isPanning) {
  13     Dygraph.movePan(event, g, context);
  14   } else if (context.isZooming) {
  15     Dygraph.moveZoom(event, g, context);
  16   }
  17 }
  18
  19 function upV3(event, g, context) {
  20   if (context.isPanning) {
  21     Dygraph.endPan(event, g, context);
  22   } else if (context.isZooming) {
  23     Dygraph.endZoom(event, g, context);
  24   }
  25 }
  26
  27 // Take the offset of a mouse event on the dygraph canvas and
  28 // convert it to a pair of percentages from the bottom left.
  29 // (Not top left, bottom is where the lower value is.)
  30 function offsetToPercentage(g, offsetX, offsetY) {
  31   // This is calculating the pixel offset of the leftmost date.
  32   var xOffset = g.toDomCoords(g.xAxisRange()[0], null)[0];
  33   var yar0 = g.yAxisRange(0);
  34
  35   // This is calculating the pixel of the higest value. (Top pixel)
  36   var yOffset = g.toDomCoords(null, yar0[1])[1];
  37
  38   // x y w and h are relative to the corner of the drawing area,
  39   // so that the upper corner of the drawing area is (0, 0).
  40   var x = offsetX - xOffset;
  41   var y = offsetY - yOffset;
  42
  43   // This is computing the rightmost pixel, effectively defining the
  44   // width.
  45   var w = g.toDomCoords(g.xAxisRange()[1], null)[0] - xOffset;
  46
  47   // This is computing the lowest pixel, effectively defining the height.
  48   var h = g.toDomCoords(null, yar0[0])[1] - yOffset;
  49
  50   // Percentage from the left.
  51   var xPct = w == 0 ? 0 : (x / w);
  52   // Percentage from the top.
  53   var yPct = h == 0 ? 0 : (y / h);
  54
  55   // The (1-) part below changes it from "% distance down from the top"
  56   // to "% distance up from the bottom".
  57   return [xPct, (1-yPct)];
  58 }
  59
  60 function dblClickV3(event, g, context) {
  61   // Reducing by 20% makes it 80% the original size, which means
  62   // to restore to original size it must grow by 25%
  63   var percentages = offsetToPercentage(g, event.offsetX, event.offsetY);
  64   var xPct = percentages[0];
  65   var yPct = percentages[1];
  66
  67   if (event.ctrlKey) {
  68     zoom(g, -.25, xPct, yPct);
  69   } else {
  70     zoom(g, +.2, xPct, yPct);
  71   }
  72 }
  73
  74 var lastClickedGraph = null;
  75
  76 function clickV3(event, g, context) {
  77   lastClickedGraph = g;
  78   Dygraph.cancelEvent(event);
  79 }
  80
  81 function scrollV3(event, g, context) {
  82   if (lastClickedGraph != g) {
  83     return;
  84   }
  85   var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
  86   // For me the normalized value shows 0.075 for one click. If I took
  87   // that verbatim, it would be a 7.5%.
  88   var percentage = normal / 50;
  89
  90   var percentages = offsetToPercentage(g, event.offsetX, event.offsetY);
  91   var xPct = percentages[0];
  92   var yPct = percentages[1];
  93
  94   zoom(g, percentage, xPct, yPct);
  95   Dygraph.cancelEvent(event);
  96 }
  97
  98 // Adjusts [x, y] toward each other by zoomInPercentage%
  99 // Split it so the left/bottom axis gets xBias/yBias of that change and
 100 // tight/top gets (1-xBias)/(1-yBias) of that change.
 101 //
 102 // If a bias is missing it splits it down the middle.
 103 function zoom(g, zoomInPercentage, xBias, yBias) {
 104   xBias = xBias || 0.5;
 105   yBias = yBias || 0.5;
 106   function adjustAxis(axis, zoomInPercentage, bias) {
 107     var delta = axis[1] - axis[0];
 108     var increment = delta * zoomInPercentage;
 109     var foo = [increment * bias, increment * (1-bias)];
 110     return [ axis[0] + foo[0], axis[1] - foo[1] ];
 111   }
 112   var yAxes = g.yAxisRanges();
 113   var newYAxes = [];
 114   for (var i = 0; i < yAxes.length; i++) {
 115     newYAxes[i] = adjustAxis(yAxes[i], zoomInPercentage, yBias);
 116   }
 117
 118   g.updateOptions({
 119     dateWindow: adjustAxis(g.xAxisRange(), zoomInPercentage, xBias),
 120     valueRange: newYAxes[0]
 121     });
 122 }
 123
 124 var v4Active = false;
 125 var v4Canvas = null;
 126
 127 function downV4(event, g, context) {
 128   context.initializeMouseDown(event, g, context);
 129   v4Active = true;
 130   moveV4(event, g, context); // in case the mouse went down on a data point.
 131 }
 132
 133 var processed = [];
 134
 135 function moveV4(event, g, context) {
 136   var RANGE = 7;
 137
 138   if (v4Active) {
 139     var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
 140     var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
 141
 142     var rows = g.numRows();
 143     // Row layout:
 144     // [date, [val1, stdev1], [val2, stdev2]]
 145     for (var row = 0; row < rows; row++) {
 146       var date = g.getValue(row, 0);
 147       var x = g.toDomCoords(date, null)[0];
 148       var diff = Math.abs(canvasx - x);
 149       if (diff < RANGE) {
 150         for (var col = 1; col < 3; col++) {
 151           // TODO(konigsberg): these will throw exceptions as data is removed.
 152           var vals =  g.getValue(row, col);
 153           if (vals == null) { continue; }
 154           var val = vals[0];
 155           var y = g.toDomCoords(null, val)[1];
 156           var diff2 = Math.abs(canvasy - y);
 157           if (diff2 < RANGE) {
 158             var found = false;
 159             for (var i in processed) {
 160               var stored = processed[i];
 161               if(stored[0] == row && stored[1] == col) {
 162                 found = true;
 163                 break;
 164               }
 165             }
 166             if (!found) {
 167               processed.push([row, col]);
 168               drawV4(x, y);
 169             }
 170             return;
 171           }
 172         }
 173       }
 174     }
 175   }
 176 }
 177
 178 function upV4(event, g, context) {
 179   if (v4Active) {
 180     v4Active = false;
 181   }
 182 }
 183
 184 function dblClickV4(event, g, context) {
 185   restorePositioning(g4);
 186 }
 187
 188 function drawV4(x, y) {
 189   var ctx = v4Canvas;
 190
 191   ctx.strokeStyle = "#000000";
 192   ctx.fillStyle = "#FFFF00";
 193   ctx.beginPath();
 194   ctx.arc(x,y,5,0,Math.PI*2,true);
 195   ctx.closePath();
 196   ctx.stroke();
 197   ctx.fill();
 198 }
 199
 200 function captureCanvas(canvas, area, g) {
 201   v4Canvas = canvas;
 202 }
 203
 204 function restorePositioning(g) {
 205   g.updateOptions({
 206     dateWindow: null,
 207     valueRange: null
 208   });
 209 }