From 6bc6bba40d519ca1bec6ba20b1bcbc889bb157e6 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Tue, 12 Mar 2013 13:40:14 -0700 Subject: [PATCH] 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 | 360 +++++++++++++++++++++ panels/histogram/module.js | 67 ++-- panels/map/module.js | 9 + panels/pie/module.js | 61 ++-- panels/table/module.js | 2 +- 5 files changed, 447 insertions(+), 52 deletions(-) create mode 100644 common/lib/panels/jquery.flot.selection.js diff --git a/common/lib/panels/jquery.flot.selection.js b/common/lib/panels/jquery.flot.selection.js new file mode 100644 index 00000000000..c794e707ce2 --- /dev/null +++ b/common/lib/panels/jquery.flot.selection.js @@ -0,0 +1,360 @@ +/* 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); diff --git a/panels/histogram/module.js b/panels/histogram/module.js index 3736b76daef..20f24ac3206 100644 --- a/panels/histogram/module.js +++ b/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') : $('
'); - //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') : $('
'); + //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 diff --git a/panels/map/module.js b/panels/map/module.js index fb14f275d06..889e31ad76d 100644 --- a/panels/map/module.js +++ b/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) } }); }) diff --git a/panels/pie/module.js b/panels/pie/module.js index 3680b361d61..0bffa7220cf 100644 --- a/panels/pie/module.js +++ b/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') : $('
'); - 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') : $('
'); + 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 diff --git a/panels/table/module.js b/panels/table/module.js index 6ad4b4762fb..6763c927a89 100644 --- a/panels/table/module.js +++ b/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();