Added interactions: Drag to select time range in histogram, click on pie slice…

Added interactions: Drag to select time range in histogram, click on pie slice in terms mode, click on region in map

panels/histogram/module.js

@@ -13,7 +13,7 @@ angular.module('kibana.histogram', [])
   _.defaults($scope.panel,_d)
   _.defaults($scope.panel,_d)
 
 
   $scope.init = function() {
   $scope.init = function() {
-    eventBus.register($scope,'time', function(event,time){set_time(time)});
+    eventBus.register($scope,'time', function(event,time){$scope.set_time(time)});
     eventBus.register($scope,'query', function(event, query) {
     eventBus.register($scope,'query', function(event, query) {
       if(_.isArray(query)) {
       if(_.isArray(query)) {
         $scope.panel.query = _.map(query,function(q) {
         $scope.panel.query = _.map(query,function(q) {
@@ -133,7 +133,7 @@ angular.module('kibana.histogram', [])
     } 
     } 
   }
   }
 
 
-  function set_time(time) {
+  $scope.set_time = function(time) {
     $scope.time = time;
     $scope.time = time;
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
     $scope.panel.interval = secondsToHms(
     $scope.panel.interval = secondsToHms(
@@ -142,7 +142,7 @@ angular.module('kibana.histogram', [])
   }
   }
 
 
 })
 })
-.directive('histogram', function() {
+.directive('histogram', function(eventBus) {
   return {
   return {
     restrict: 'A',
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
     link: function(scope, elem, attrs, ctrl) {
@@ -181,6 +181,7 @@ angular.module('kibana.histogram', [])
         var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
         var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
           .script("common/lib/panels/jquery.flot.time.js")
           .script("common/lib/panels/jquery.flot.time.js")
           .script("common/lib/panels/jquery.flot.stack.js")
           .script("common/lib/panels/jquery.flot.stack.js")
+          .script("common/lib/panels/jquery.flot.selection.js")
           .script("common/lib/panels/timezone.js")
           .script("common/lib/panels/timezone.js")
                     
                     
         // Populate element. Note that jvectormap appends, does not replace.
         // Populate element. Note that jvectormap appends, does not replace.
@@ -211,6 +212,9 @@ angular.module('kibana.histogram', [])
               label: "Datetime",
               label: "Datetime",
               color: "#000",
               color: "#000",
             },
             },
+            selection: {
+              mode: "x"
+            },
             grid: {
             grid: {
               backgroundColor: '#fff',
               backgroundColor: '#fff',
               borderWidth: 0,
               borderWidth: 0,
@@ -224,6 +228,7 @@ angular.module('kibana.histogram', [])
             console.log(e)
             console.log(e)
           }
           }
         })
         })
+      }
 
 
       function tt(x, y, contents) {
       function tt(x, y, contents) {
         var tooltip = $('#pie-tooltip').length ? 
         var tooltip = $('#pie-tooltip').length ? 
@@ -251,7 +256,13 @@ angular.module('kibana.histogram', [])
           $("#pie-tooltip").remove();
           $("#pie-tooltip").remove();
         }
         }
       });
       });
-      }
+
+      elem.bind("plotselected", function (event, ranges) {
+        scope.time.from = new Date(ranges.xaxis.from);
+        scope.time.to   = new Date(ranges.xaxis.to)
+        scope.set_time(scope.time);
+        eventBus.broadcast(scope.$id,scope.panel.group,'time',scope.time)
+      });
     }
     }
   };
   };
 })
 })
\ No newline at end of file

panels/map/module.js

@@ -77,6 +77,12 @@ angular.module('kibana.map', [])
     $scope.get_data();
     $scope.get_data();
   }
   }
 
 
+  $scope.build_search = function(field,value) {
+    $scope.panel.query = add_to_query($scope.panel.query,field,value,false)
+    $scope.get_data();
+    eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query);
+  }
+
 })
 })
 .directive('map', function() {
 .directive('map', function() {
   return {
   return {
@@ -131,6 +137,9 @@ angular.module('kibana.map', [])
               $('.jvectormap-label').text(label.text() + ": " + count);
               $('.jvectormap-label').text(label.text() + ": " + count);
             },
             },
             onRegionOut: function(event, code) {
             onRegionOut: function(event, code) {
+            },
+            onRegionClick: function(event, code) {
+              scope.build_search(scope.panel.field,code)
             }
             }
           });
           });
         })
         })

panels/pie/module.js

@@ -194,6 +194,12 @@ angular.module('kibana.pie', [])
     } 
     } 
   }
   }
 
 
+  $scope.build_search = function(field,value) {
+    $scope.panel.query.query = add_to_query($scope.panel.query.query,field,value,false)
+    $scope.get_data();
+    eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query.query);
+  }
+
   function set_time(time) {
   function set_time(time) {
     $scope.time = time;
     $scope.time = time;
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
@@ -273,6 +279,7 @@ angular.module('kibana.pie', [])
             $.plot(elem, scope.data, pie);
             $.plot(elem, scope.data, pie);
           });
           });
         }
         }
+      }
 
 
       function piett(x, y, contents) {
       function piett(x, y, contents) {
         var tooltip = $('#pie-tooltip').length ? 
         var tooltip = $('#pie-tooltip').length ? 
@@ -289,6 +296,13 @@ angular.module('kibana.pie', [])
         }).appendTo("body");
         }).appendTo("body");
       }
       }
 
 
+      elem.bind("plotclick", function (event, pos, object) {
+        if (!object)
+          return;
+        if(scope.panel.mode === 'terms')
+          scope.build_search(scope.panel.query.field,object.series.label);
+      });
+
       elem.bind("plothover", function (event, pos, item) {
       elem.bind("plothover", function (event, pos, item) {
         if (item) {
         if (item) {
           var percent = parseFloat(item.series.percent).toFixed(1) + "%";
           var percent = parseFloat(item.series.percent).toFixed(1) + "%";
@@ -297,7 +311,8 @@ angular.module('kibana.pie', [])
           $("#pie-tooltip").remove();
           $("#pie-tooltip").remove();
         }
         }
       });
       });
-      }
+
+
     }
     }
   };
   };
 })
 })
\ No newline at end of file

panels/table/module.js

@@ -65,7 +65,7 @@ angular.module('kibana.table', [])
     $scope.get_data();
     $scope.get_data();
   }
   }
 
 
-  $scope.build_search = function(field, value,negate) {
+  $scope.build_search = function(field,value,negate) {
     $scope.panel.query = add_to_query($scope.panel.query,field,value,negate)
     $scope.panel.query = add_to_query($scope.panel.query,field,value,negate)
     $scope.panel.offset = 0;
     $scope.panel.offset = 0;
     $scope.get_data();
     $scope.get_data();