Added zoom links to histogram and zoom event to timepicker. Issue #14

panels/histogram/editor.html

@@ -44,6 +44,9 @@
     <label class="small">Time correction</label> 
     <select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
   </div>
+  <div class="span2"> 
+    <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
+  </div>
 </div>
 <h5>Panel Spy</h5>
 <div class="row-fluid">

panels/histogram/module.html

@@ -2,5 +2,9 @@
   <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
       <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
   </span>
+  <center ng-show='panel.zoomlinks && data'>
+    <a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
+    <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
+  </center>
   <div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         

panels/histogram/module.js

@@ -9,6 +9,7 @@ angular.module('kibana.histogram', [])
     fill      : 3,
     timezone  : 'browser', // browser, utc or a standard timezone
     spyable   : true,
+    zoomlinks : true,
     group     : "default",
   }
   _.defaults($scope.panel,_d)
@@ -123,6 +124,12 @@ angular.module('kibana.histogram', [])
     });
   }
 
+  // function $scope.zoom
+  // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan
+  $scope.zoom = function(factor) {
+    eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor)
+  }
+
   // I really don't like this function, too much dom manip. Break out into directive?
   $scope.populate_modal = function(request) {
     $scope.modal = {

panels/timepicker/module.js

@@ -91,6 +91,23 @@ angular.module('kibana.timepicker', [])
       $scope.time_apply()
     });
     
+    eventBus.register($scope,"zoom", function(event,factor) {
+      var _timespan = ($scope.time.to.getTime() - $scope.time.from.getTime());
+      try {
+        if($scope.panel.mode != 'absolute') {
+          $scope.panel.mode = 'since'
+          set_timepicker(new Date($scope.time.to.getTime() - _timespan*factor),$scope.time.to)
+        } else {
+          var _center = $scope.time.to - _timespan/2
+          set_timepicker(new Date(_center - (_timespan*factor)/2),
+                         new Date(_center + (_timespan*factor)/2))        
+        }
+      } catch (e) {
+        console.log(e)
+      }     
+      $scope.time_apply();
+    });
+    
     $scope.$on('render', function (){
       $scope.time_apply();
     });