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

panels/histogram/editor.html

@@ -44,11 +44,14 @@
     <label class="small">Time correction</label> 
     <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>
     <select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
   </div>
   </div>
+  <div class="span2"> 
+    <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
+  </div>
 </div>
 </div>
 <h5>Panel Spy</h5>
 <h5>Panel Spy</h5>
 <div class="row-fluid">
 <div class="row-fluid">
   <div class="span2"> 
   <div class="span2"> 
-    <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+    <label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
   </div>
   </div>
   <div class="span9 small">
   <div class="span9 small">
     The panel spy shows 'behind the scenes' information about a panel. It can
     The panel spy shows 'behind the scenes' information about a panel. It can

panels/histogram/module.html

@@ -2,5 +2,9 @@
   <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
   <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>
       <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
   </span>
   </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>
   <div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         
 </kibana-panel>         
\ No newline at end of file

panels/histogram/module.js

@@ -4,11 +4,12 @@ angular.module('kibana.histogram', [])
   // Set and populate defaults
   // Set and populate defaults
   var _d = {
   var _d = {
     query     : [ {query: "*", label:"Query"} ],
     query     : [ {query: "*", label:"Query"} ],
-    interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
+    interval  : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
     show      : ['bars','y-axis','x-axis','legend'],
     show      : ['bars','y-axis','x-axis','legend'],
     fill      : 3,
     fill      : 3,
-    timezone: 'browser', // browser, utc or a standard timezone
+    timezone  : 'browser', // browser, utc or a standard timezone
     spyable   : true,
     spyable   : true,
+    zoomlinks : true,
     group     : "default",
     group     : "default",
   }
   }
   _.defaults($scope.panel,_d)
   _.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?
   // I really don't like this function, too much dom manip. Break out into directive?
   $scope.populate_modal = function(request) {
   $scope.populate_modal = function(request) {
     $scope.modal = {
     $scope.modal = {

panels/timepicker/module.js

@@ -91,6 +91,23 @@ angular.module('kibana.timepicker', [])
       $scope.time_apply()
       $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.$on('render', function (){
       $scope.time_apply();
       $scope.time_apply();
     });
     });