Skip to content

N
nexpie-grafana-theme
Commit 6bc6bba4 by Rashid Khan
Options

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
parent d18d911d
Showing with 89 additions and 52 deletions
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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment