tests/interaction.js

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