Commit 4b9310ea by Rashid Khan

Added comments to default dashboard, added multi group binding to timepicker, added text panel

parent a7339915
......@@ -30,7 +30,7 @@ var config = new Settings(
timefield: '@timestamp',
indexpattern: '"shakespeare"',
modules: ['histogram','map','pie','table','stringquery','sort',
'timepicker'],
'timepicker','text'],
defaultfields: ['line_text'],
perpage: 50,
......
......@@ -29,64 +29,181 @@ var dashboards =
},
timespan : '1h',
timefield: '@timestamp',
group: ['default','pies'],
},
{
type : "sort",
span : 4,
}
},
{
type : "text",
fontsize : "85%",
span: 3,
content : "Panels can send events to other panels. In the case of" +
" the sort panel, it also receives a field event that it uses" +
" to populate its list of fields from the table panel"
},
]
},
{
title: "Monkey Monitoring",
title: "Top 3 Characters",
collapse: false,
height: "300px",
height: "160px",
panels: [
{
title : "Monkey Shakespeare Lines",
type : "histogram",
span : 6,
show : ['lines'],
fill : 0.3,
query : [
{ label : "Query", query : "*", color: '#86B32D' },
{ label : "Hamlet", query : "play_name:Hamlet" },
{ label : "Macbeth", query : "play_name:macbeth" },
],
type : "text",
title : "About",
fontsize : "85%",
span: 2,
content : "These pies demonstrate configurable binding. They are" +
" bound only to the time selector, not to the query input. Thus" +
" they will change when you select a new time range, but not if" +
" you enter a search. Try hovering over a pie slice.",
},
{
title : "Monkey Typists Worldwide",
type : "map",
map : 'world',
field : "country",
span : 6,
size : 500,
query : "*",
}
title : "Hamlet",
type : "pie",
span : 2,
size : 3,
legend : false,
labels : false,
donut : true,
colors : ['#20805E','#26527C','#BF8530','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "speaker", query : "play_name:Hamlet" },
group : "pies"
},
{
title : "Othello",
type : "pie",
span : 2,
size : 3,
legend : false,
labels : false,
donut : true,
colors : ['#35D59D','#FFB140','#F43D6B','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "speaker", query : "play_name:Othello" },
group : "pies"
},
{
title : "A Winters Tale",
type : "pie",
span : 2,
size : 3,
legend : false,
labels : false,
donut : true,
colors : ['#78AF2C','#BF4630','#6A237E','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "speaker", query : 'play_name:"A Winters Tale"' },
group : "pies"
},
{
title : "The Tempest",
type : "pie",
span : 2,
size : 3,
legend : false,
labels : false,
donut : true,
colors : ['#2A4480','#BFA730','#BF7130','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "speaker", query : 'play_name:"The Tempest"' },
group : "pies"
},
{
title : "King Lear",
type : "pie",
span : 2,
size : 3,
legend : false,
labels : false,
donut : true,
colors : ['#01939A','#FFAB00','#FF0700','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "speaker", query : 'play_name:"King Lear"' },
group : "pies"
},
]
},
{
title: "Lines of Plays",
height: "250px",
collapse: true,
panels: [
{
title : "Plays",
type : "pie",
span : 4,
size : 8,
donut : true,
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "play_name", query : "*" },
},
{
type : "text",
title : "About",
fontsize : "85%",
span: 2,
content : "The table panel can be sorted via a sort panel, or by" +
" clicking the table header. Unlike the pie charts above, this" +
" pie is bound to the query input. Try searching for a speaker" +
" (eg, FALSTAFF) to see a break down of the plays they appear in.",
},
{
title : "Newest Lines",
type : "table",
span : 8,
span : 6,
query : "*",
fields : ['@timestamp','play_name','speaker','text_entry'],
}
]
},
{
title: "Monkey Monitoring",
collapse: false,
height: "275px",
panels: [
{
title : "Monkey Shakespeare Lines",
type : "histogram",
span : 5,
show : ['lines','stack'],
fill : 0.3,
query : [
{ label : "Query Hits", query : "*", color: '#86B32D' },
{ label : "Hamlet", query : "play_name:Hamlet" },
{ label : "Macbeth", query : "play_name:macbeth" },
],
},
{
title : "Monkey Typists Worldwide",
type : "map",
map : 'world',
field : "country",
span : 5,
size : 500,
query : "*",
},
{
type : "text",
title : "About",
fontsize : "85%",
span: 2,
content : "Histograms can show multiple queries. In the case that a" +
" multi-query histogram is bound to a query input, only the first" +
" data series will be altered. All panels exist in the 'default'" +
" group by default. The map panel can be used to visualize events" +
" with attached geo data.",
},
]
}
]
};
......@@ -14,6 +14,7 @@ angular.module('kibana.pie', [])
donut : false,
tilt : false,
legend : true,
labels : true,
group : "default"
}
_.defaults($scope.panel,_d)
......@@ -152,7 +153,7 @@ angular.module('kibana.pie', [])
label: 'The Rest'
},
label: {
show: true,
show: scope.panel.labels,
radius: 2/3,
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
......@@ -163,6 +164,7 @@ angular.module('kibana.pie', [])
}
},
//grid: { hoverable: true, clickable: true },
grid: { hoverable: true, clickable: true },
legend: { show: scope.panel.legend }
};
......@@ -170,7 +172,31 @@ angular.module('kibana.pie', [])
if(elem.is(":visible")){
$.plot(elem, scope.data, pie);
}
//elem.show();
function piett(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(2) + "%";
piett(pos.pageX, pos.pageY, percent + " " + item.series.label);
} else {
$("#pie-tooltip").remove();
}
});
}
}
};
......
......@@ -43,6 +43,9 @@ angular.module('kibana.timepicker', [])
}
_.defaults($scope.panel,_d)
var _groups = _.isArray($scope.panel.group) ?
$scope.panel.group : [$scope.panel.group];
$scope.init = function() {
// Private refresh interval that we can use for view display without causing
// unnecessary refreshes during changes
......@@ -74,11 +77,13 @@ angular.module('kibana.timepicker', [])
// In the case that a panel is not ready to receive a time event, it may
// request one be sent by broadcasting a 'get_time' with its _id to its group
$scope.$on($scope.panel.group+"-get_time", function(event,id) {
console.log('time request: '+id)
$rootScope.$broadcast(id+"-time", $scope.time)
// This panel can handle multiple groups
_.each(_groups,function(group){
$scope.$on(group+"-get_time", function(event,id) {
$rootScope.$broadcast(id+"-time", $scope.time)
});
});
$scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
$scope.$watch('panel.refresh.interval', function() {
$timeout(function(){
......@@ -170,7 +175,9 @@ angular.module('kibana.timepicker', [])
indices($scope.time.from,$scope.time.to).then(function (p) {
$scope.time.index = p.join();
// Broadcast time
$rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
_.each(_groups,function(group){
$rootScope.$broadcast(group+"-time", $scope.time)
});
});
// Update panel's string representation of the time object
......
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