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

common/lib/panels/jquery.flot.selection.js

+/* Flot plugin for selecting regions of a plot.
+
+Copyright (c) 2007-2013 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+selection: {
+  mode: null or "x" or "y" or "xy",
+  color: color,
+  shape: "round" or "miter" or "bevel",
+  minSize: number of pixels
+}
+
+Selection support is enabled by setting the mode to one of "x", "y" or "xy".
+In "x" mode, the user will only be able to specify the x range, similarly for
+"y" mode. For "xy", the selection becomes a rectangle where both ranges can be
+specified. "color" is color of the selection (if you need to change the color
+later on, you can get to it with plot.getOptions().selection.color). "shape"
+is the shape of the corners of the selection.
+
+"minSize" is the minimum size a selection can be in pixels. This value can
+be customized to determine the smallest size a selection can be and still
+have the selection rectangle be displayed. When customizing this value, the
+fact that it refers to pixels, not axis units must be taken into account.
+Thus, for example, if there is a bar graph in time mode with BarWidth set to 1
+minute, setting "minSize" to 1 will not make the minimum selection size 1
+minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent
+"plotunselected" events from being fired when the user clicks the mouse without
+dragging.
+
+When selection support is enabled, a "plotselected" event will be emitted on
+the DOM element you passed into the plot function. The event handler gets a
+parameter with the ranges selected on the axes, like this:
+
+  placeholder.bind( "plotselected", function( event, ranges ) {
+    alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
+    // similar for yaxis - with multiple axes, the extra ones are in
+    // x2axis, x3axis, ...
+  });
+
+The "plotselected" event is only fired when the user has finished making the
+selection. A "plotselecting" event is fired during the process with the same
+parameters as the "plotselected" event, in case you want to know what's
+happening while it's happening,
+
+A "plotunselected" event with no arguments is emitted when the user clicks the
+mouse to remove the selection. As stated above, setting "minSize" to 0 will
+destroy this behavior.
+
+The plugin allso adds the following methods to the plot object:
+
+- setSelection( ranges, preventEvent )
+
+  Set the selection rectangle. The passed in ranges is on the same form as
+  returned in the "plotselected" event. If the selection mode is "x", you
+  should put in either an xaxis range, if the mode is "y" you need to put in
+  an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
+  this:
+
+  setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
+
+  setSelection will trigger the "plotselected" event when called. If you don't
+  want that to happen, e.g. if you're inside a "plotselected" handler, pass
+  true as the second parameter. If you are using multiple axes, you can
+  specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of
+  xaxis, the plugin picks the first one it sees.
+
+- clearSelection( preventEvent )
+
+  Clear the selection rectangle. Pass in true to avoid getting a
+  "plotunselected" event.
+
+- getSelection()
+
+  Returns the current selection in the same format as the "plotselected"
+  event. If there's currently no selection, the function returns null.
+
+*/
+
+(function ($) {
+    function init(plot) {
+        var selection = {
+                first: { x: -1, y: -1}, second: { x: -1, y: -1},
+                show: false,
+                active: false
+            };
+
+        // FIXME: The drag handling implemented here should be
+        // abstracted out, there's some similar code from a library in
+        // the navigation plugin, this should be massaged a bit to fit
+        // the Flot cases here better and reused. Doing this would
+        // make this plugin much slimmer.
+        var savedhandlers = {};
+
+        var mouseUpHandler = null;
+        
+        function onMouseMove(e) {
+            if (selection.active) {
+                updateSelection(e);
+                
+                plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
+            }
+        }
+
+        function onMouseDown(e) {
+            if (e.which != 1)  // only accept left-click
+                return;
+            
+            // cancel out any text selections
+            document.body.focus();
+
+            // prevent text selection and drag in old-school browsers
+            if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
+                savedhandlers.onselectstart = document.onselectstart;
+                document.onselectstart = function () { return false; };
+            }
+            if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
+                savedhandlers.ondrag = document.ondrag;
+                document.ondrag = function () { return false; };
+            }
+
+            setSelectionPos(selection.first, e);
+
+            selection.active = true;
+
+            // this is a bit silly, but we have to use a closure to be
+            // able to whack the same handler again
+            mouseUpHandler = function (e) { onMouseUp(e); };
+            
+            $(document).one("mouseup", mouseUpHandler);
+        }
+
+        function onMouseUp(e) {
+            mouseUpHandler = null;
+            
+            // revert drag stuff for old-school browsers
+            if (document.onselectstart !== undefined)
+                document.onselectstart = savedhandlers.onselectstart;
+            if (document.ondrag !== undefined)
+                document.ondrag = savedhandlers.ondrag;
+
+            // no more dragging
+            selection.active = false;
+            updateSelection(e);
+
+            if (selectionIsSane())
+                triggerSelectedEvent();
+            else {
+                // this counts as a clear
+                plot.getPlaceholder().trigger("plotunselected", [ ]);
+                plot.getPlaceholder().trigger("plotselecting", [ null ]);
+            }
+
+            return false;
+        }
+
+        function getSelection() {
+            if (!selectionIsSane())
+                return null;
+            
+            if (!selection.show) return null;
+
+            var r = {}, c1 = selection.first, c2 = selection.second;
+            $.each(plot.getAxes(), function (name, axis) {
+                if (axis.used) {
+                    var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]); 
+                    r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
+                }
+            });
+            return r;
+        }
+
+        function triggerSelectedEvent() {
+            var r = getSelection();
+
+            plot.getPlaceholder().trigger("plotselected", [ r ]);
+
+            // backwards-compat stuff, to be removed in future
+            if (r.xaxis && r.yaxis)
+                plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
+        }
+
+        function clamp(min, value, max) {
+            return value < min ? min: (value > max ? max: value);
+        }
+
+        function setSelectionPos(pos, e) {
+            var o = plot.getOptions();
+            var offset = plot.getPlaceholder().offset();
+            var plotOffset = plot.getPlotOffset();
+            pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
+            pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
+
+            if (o.selection.mode == "y")
+                pos.x = pos == selection.first ? 0 : plot.width();
+
+            if (o.selection.mode == "x")
+                pos.y = pos == selection.first ? 0 : plot.height();
+        }
+
+        function updateSelection(pos) {
+            if (pos.pageX == null)
+                return;
+
+            setSelectionPos(selection.second, pos);
+            if (selectionIsSane()) {
+                selection.show = true;
+                plot.triggerRedrawOverlay();
+            }
+            else
+                clearSelection(true);
+        }
+
+        function clearSelection(preventEvent) {
+            if (selection.show) {
+                selection.show = false;
+                plot.triggerRedrawOverlay();
+                if (!preventEvent)
+                    plot.getPlaceholder().trigger("plotunselected", [ ]);
+            }
+        }
+
+        // function taken from markings support in Flot
+        function extractRange(ranges, coord) {
+            var axis, from, to, key, axes = plot.getAxes();
+
+            for (var k in axes) {
+                axis = axes[k];
+                if (axis.direction == coord) {
+                    key = coord + axis.n + "axis";
+                    if (!ranges[key] && axis.n == 1)
+                        key = coord + "axis"; // support x1axis as xaxis
+                    if (ranges[key]) {
+                        from = ranges[key].from;
+                        to = ranges[key].to;
+                        break;
+                    }
+                }
+            }
+
+            // backwards-compat stuff - to be removed in future
+            if (!ranges[key]) {
+                axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
+                from = ranges[coord + "1"];
+                to = ranges[coord + "2"];
+            }
+
+            // auto-reverse as an added bonus
+            if (from != null && to != null && from > to) {
+                var tmp = from;
+                from = to;
+                to = tmp;
+            }
+            
+            return { from: from, to: to, axis: axis };
+        }
+        
+        function setSelection(ranges, preventEvent) {
+            var axis, range, o = plot.getOptions();
+
+            if (o.selection.mode == "y") {
+                selection.first.x = 0;
+                selection.second.x = plot.width();
+            }
+            else {
+                range = extractRange(ranges, "x");
+
+                selection.first.x = range.axis.p2c(range.from);
+                selection.second.x = range.axis.p2c(range.to);
+            }
+
+            if (o.selection.mode == "x") {
+                selection.first.y = 0;
+                selection.second.y = plot.height();
+            }
+            else {
+                range = extractRange(ranges, "y");
+
+                selection.first.y = range.axis.p2c(range.from);
+                selection.second.y = range.axis.p2c(range.to);
+            }
+
+            selection.show = true;
+            plot.triggerRedrawOverlay();
+            if (!preventEvent && selectionIsSane())
+                triggerSelectedEvent();
+        }
+
+        function selectionIsSane() {
+            var minSize = plot.getOptions().selection.minSize;
+            return Math.abs(selection.second.x - selection.first.x) >= minSize &&
+                Math.abs(selection.second.y - selection.first.y) >= minSize;
+        }
+
+        plot.clearSelection = clearSelection;
+        plot.setSelection = setSelection;
+        plot.getSelection = getSelection;
+
+        plot.hooks.bindEvents.push(function(plot, eventHolder) {
+            var o = plot.getOptions();
+            if (o.selection.mode != null) {
+                eventHolder.mousemove(onMouseMove);
+                eventHolder.mousedown(onMouseDown);
+            }
+        });
+
+
+        plot.hooks.drawOverlay.push(function (plot, ctx) {
+            // draw selection
+            if (selection.show && selectionIsSane()) {
+                var plotOffset = plot.getPlotOffset();
+                var o = plot.getOptions();
+
+                ctx.save();
+                ctx.translate(plotOffset.left, plotOffset.top);
+
+                var c = $.color.parse(o.selection.color);
+
+                ctx.strokeStyle = c.scale('a', 0.8).toString();
+                ctx.lineWidth = 1;
+                ctx.lineJoin = o.selection.shape;
+                ctx.fillStyle = c.scale('a', 0.4).toString();
+
+                var x = Math.min(selection.first.x, selection.second.x) + 0.5,
+                    y = Math.min(selection.first.y, selection.second.y) + 0.5,
+                    w = Math.abs(selection.second.x - selection.first.x) - 1,
+                    h = Math.abs(selection.second.y - selection.first.y) - 1;
+
+                ctx.fillRect(x, y, w, h);
+                ctx.strokeRect(x, y, w, h);
+
+                ctx.restore();
+            }
+        });
+        
+        plot.hooks.shutdown.push(function (plot, eventHolder) {
+            eventHolder.unbind("mousemove", onMouseMove);
+            eventHolder.unbind("mousedown", onMouseDown);
+            
+            if (mouseUpHandler)
+                $(document).unbind("mouseup", mouseUpHandler);
+        });
+
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: {
+            selection: {
+                mode: null, // one of null, "x", "y" or "xy"
+                color: "#e8cfac",
+                shape: "round", // one of "round", "miter", or "bevel"
+                minSize: 5 // minimum number of pixels
+            }
+        },
+        name: 'selection',
+        version: '1.1'
+    });
+})(jQuery);

panels/histogram/module.js

@@ -13,7 +13,7 @@ angular.module('kibana.histogram', [])
   _.defaults($scope.panel,_d)
 
   $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) {
       if(_.isArray(query)) {
         $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.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
     $scope.panel.interval = secondsToHms(
@@ -142,7 +142,7 @@ angular.module('kibana.histogram', [])
   }
 
 })
-.directive('histogram', function() {
+.directive('histogram', function(eventBus) {
   return {
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
@@ -181,6 +181,7 @@ angular.module('kibana.histogram', [])
         var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
           .script("common/lib/panels/jquery.flot.time.js")
           .script("common/lib/panels/jquery.flot.stack.js")
+          .script("common/lib/panels/jquery.flot.selection.js")
           .script("common/lib/panels/timezone.js")
                     
         // Populate element. Note that jvectormap appends, does not replace.
@@ -211,6 +212,9 @@ angular.module('kibana.histogram', [])
               label: "Datetime",
               color: "#000",
             },
+            selection: {
+              mode: "x"
+            },
             grid: {
               backgroundColor: '#fff',
               borderWidth: 0,
@@ -224,34 +228,41 @@ angular.module('kibana.histogram', [])
             console.log(e)
           }
         })
+      }
 
-        function tt(x, y, contents) {
-          var tooltip = $('#pie-tooltip').length ? 
-            $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-          //var tooltip = $('#pie-tooltip')
-          tooltip.text(contents).css({
-            position: 'absolute',
-            top     : y + 5,
-            left    : x + 5,
-            color   : "#FFF",
-            border  : '1px solid #FFF',
-            padding : '2px',
-            'font-size': '8pt',
-            'background-color': '#000',
-          }).appendTo("body");
+      function tt(x, y, contents) {
+        var tooltip = $('#pie-tooltip').length ? 
+          $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
+        //var tooltip = $('#pie-tooltip')
+        tooltip.text(contents).css({
+          position: 'absolute',
+          top     : y + 5,
+          left    : x + 5,
+          color   : "#FFF",
+          border  : '1px solid #FFF',
+          padding : '2px',
+          'font-size': '8pt',
+          'background-color': '#000',
+        }).appendTo("body");
+      }
+
+      elem.bind("plothover", function (event, pos, item) {
+        if (item) {
+          var percent = parseFloat(item.series.percent).toFixed(1) + "%";
+          tt(pos.pageX, pos.pageY,
+            item.datapoint[1].toFixed(1) + " @ " + 
+            new Date(item.datapoint[0]).format(config.timeformat));
+        } else {
+          $("#pie-tooltip").remove();
         }
+      });
 
-        elem.bind("plothover", function (event, pos, item) {
-          if (item) {
-            var percent = parseFloat(item.series.percent).toFixed(1) + "%";
-            tt(pos.pageX, pos.pageY,
-              item.datapoint[1].toFixed(1) + " @ " + 
-              new Date(item.datapoint[0]).format(config.timeformat));
-          } else {
-            $("#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.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() {
   return {
@@ -131,6 +137,9 @@ angular.module('kibana.map', [])
               $('.jvectormap-label').text(label.text() + ": " + count);
             },
             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) {
     $scope.time = time;
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
@@ -273,31 +279,40 @@ angular.module('kibana.pie', [])
             $.plot(elem, scope.data, pie);
           });
         }
-        
-        function piett(x, y, contents) {
-          var tooltip = $('#pie-tooltip').length ? 
-            $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-          tooltip.text(contents).css({
-            position: 'absolute',
-            top     : y + 10,
-            left    : x + 10,
-            color   : "#FFF",
-            border  : '1px solid #FFF',
-            padding : '2px',
-            'font-size': '8pt',
-            'background-color': '#000',
-          }).appendTo("body");
-        }
+      }
 
-        elem.bind("plothover", function (event, pos, item) {
-          if (item) {
-            var percent = parseFloat(item.series.percent).toFixed(1) + "%";
-            piett(pos.pageX, pos.pageY, percent + " " + (item.series.label||""));
-          } else {
-            $("#pie-tooltip").remove();
-          }
-        });
+      function piett(x, y, contents) {
+        var tooltip = $('#pie-tooltip').length ? 
+          $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
+        tooltip.text(contents).css({
+          position: 'absolute',
+          top     : y + 10,
+          left    : x + 10,
+          color   : "#FFF",
+          border  : '1px solid #FFF',
+          padding : '2px',
+          'font-size': '8pt',
+          'background-color': '#000',
+        }).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) {
+        if (item) {
+          var percent = parseFloat(item.series.percent).toFixed(1) + "%";
+          piett(pos.pageX, pos.pageY, percent + " " + (item.series.label||""));
+        } else {
+          $("#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.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.offset = 0;
     $scope.get_data();