From f5302fc7132ef1989db84a25c1d6f87a07d95ccc Mon Sep 17 00:00:00 2001
From: Rashid Khan <rashidkpc@gmail.com>
Date: Wed, 13 Mar 2013 15:32:22 -0700
Subject: [PATCH] Added zoom links to histogram and zoom event to timepicker.
 Issue #14

---
 panels/histogram/editor.html |  5 ++++-
 panels/histogram/module.html |  4 ++++
 panels/histogram/module.js   | 21 ++++++++++++++-------
 panels/timepicker/module.js  | 17 +++++++++++++++++
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/panels/histogram/editor.html b/panels/histogram/editor.html
index bf57461420b..6863844c58e 100644
--- a/panels/histogram/editor.html
+++ b/panels/histogram/editor.html
@@ -44,11 +44,14 @@
     <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">
   <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 class="span9 small">
     The panel spy shows 'behind the scenes' information about a panel. It can
diff --git a/panels/histogram/module.html b/panels/histogram/module.html
index e8906f836d7..1f8e80e1ac9 100644
--- a/panels/histogram/module.html
+++ b/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>         
\ No newline at end of file
diff --git a/panels/histogram/module.js b/panels/histogram/module.js
index 443e482362f..5d1f8242226 100644
--- a/panels/histogram/module.js
+++ b/panels/histogram/module.js
@@ -3,13 +3,14 @@ angular.module('kibana.histogram', [])
 
   // Set and populate defaults
   var _d = {
-    query   : [ {query: "*", label:"Query"} ],
-    interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
-    show    : ['bars','y-axis','x-axis','legend'],
-    fill    : 3,
-    timezone: 'browser', // browser, utc or a standard timezone
-    spyable : true,
-    group   : "default",
+    query     : [ {query: "*", label:"Query"} ],
+    interval  : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
+    show      : ['bars','y-axis','x-axis','legend'],
+    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 = {
diff --git a/panels/timepicker/module.js b/panels/timepicker/module.js
index 283cfffbd11..73490acf8f6 100644
--- a/panels/timepicker/module.js
+++ b/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();
     });