Skip to content

N
nexpie-grafana-theme
Commit 4b9310ea by Rashid Khan
Options

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

parent a7339915
Showing with 179 additions and 29 deletions
config.js
...@@ -30,7 +30,7 @@ var config = new Settings( ...@@ -30,7 +30,7 @@ var config = new Settings(
timefield: '@timestamp', timefield: '@timestamp',
indexpattern: '"shakespeare"', indexpattern: '"shakespeare"',
modules: ['histogram','map','pie','table','stringquery','sort', modules: ['histogram','map','pie','table','stringquery','sort',
'timepicker'], 'timepicker','text'],
defaultfields: ['line_text'], defaultfields: ['line_text'],
perpage: 50, perpage: 50,
......
dashboards.js
...@@ -29,64 +29,181 @@ var dashboards = ...@@ -29,64 +29,181 @@ var dashboards =
}, },
timespan : '1h', timespan : '1h',
timefield: '@timestamp', timefield: '@timestamp',
group: ['default','pies'],
}, },
{ {
type : "sort", type : "sort",
span : 4, 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, collapse: false,
height: "300px", height: "160px",
panels: [ panels: [
{ {
title : "Monkey Shakespeare Lines", type : "text",
type : "histogram", title : "About",
span : 6, fontsize : "85%",
show : ['lines'], span: 2,
fill : 0.3, content : "These pies demonstrate configurable binding. They are" +
query : [ " bound only to the time selector, not to the query input. Thus" +
{ label : "Query", query : "*", color: '#86B32D' }, " they will change when you select a new time range, but not if" +
{ label : "Hamlet", query : "play_name:Hamlet" }, " you enter a search. Try hovering over a pie slice.",
{ label : "Macbeth", query : "play_name:macbeth" },
],
}, },
{ {
title : "Monkey Typists Worldwide", title : "Hamlet",
type : "map", type : "pie",
map : 'world', span : 2,
field : "country", size : 3,
span : 6, legend : false,
size : 500, labels : false,
query : "*", 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", title: "Lines of Plays",
height: "250px", height: "250px",
collapse: true,
panels: [ panels: [
{ {
title : "Plays", title : "Plays",
type : "pie", type : "pie",
span : 4, span : 4,
size : 8, size : 8,
donut : true,
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'], colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
field : 'country', field : 'country',
//query : { query: "*", field: "country"} //query : { query: "*", field: "country"}
query : { field : "play_name", query : "*" }, 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", title : "Newest Lines",
type : "table", type : "table",
span : 8, span : 6,
query : "*", query : "*",
fields : ['@timestamp','play_name','speaker','text_entry'], 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.",
},
]
} }
] ]
}; };
panels/pie/module.js
...@@ -14,6 +14,7 @@ angular.module('kibana.pie', []) ...@@ -14,6 +14,7 @@ angular.module('kibana.pie', [])
donut : false, donut : false,
tilt : false, tilt : false,
legend : true, legend : true,
labels : true,
group : "default" group : "default"
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
...@@ -152,7 +153,7 @@ angular.module('kibana.pie', []) ...@@ -152,7 +153,7 @@ angular.module('kibana.pie', [])
label: 'The Rest' label: 'The Rest'
}, },
label: { label: {
show: true, show: scope.panel.labels,
radius: 2/3, radius: 2/3,
formatter: function(label, series){ formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+ return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
...@@ -163,6 +164,7 @@ angular.module('kibana.pie', []) ...@@ -163,6 +164,7 @@ angular.module('kibana.pie', [])
} }
}, },
//grid: { hoverable: true, clickable: true }, //grid: { hoverable: true, clickable: true },
grid: { hoverable: true, clickable: true },
legend: { show: scope.panel.legend } legend: { show: scope.panel.legend }
}; };
...@@ -170,7 +172,31 @@ angular.module('kibana.pie', []) ...@@ -170,7 +172,31 @@ angular.module('kibana.pie', [])
if(elem.is(":visible")){ if(elem.is(":visible")){
$.plot(elem, scope.data, pie); $.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();
}
});
} }
} }
}; };
......
panels/timepicker/module.js
...@@ -43,6 +43,9 @@ angular.module('kibana.timepicker', []) ...@@ -43,6 +43,9 @@ angular.module('kibana.timepicker', [])
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
var _groups = _.isArray($scope.panel.group) ?
$scope.panel.group : [$scope.panel.group];
$scope.init = function() { $scope.init = function() {
// Private refresh interval that we can use for view display without causing // Private refresh interval that we can use for view display without causing
// unnecessary refreshes during changes // unnecessary refreshes during changes
...@@ -74,10 +77,12 @@ angular.module('kibana.timepicker', []) ...@@ -74,10 +77,12 @@ angular.module('kibana.timepicker', [])
// In the case that a panel is not ready to receive a time event, it may // 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 // 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) { // This panel can handle multiple groups
console.log('time request: '+id) _.each(_groups,function(group){
$scope.$on(group+"-get_time", function(event,id) {
$rootScope.$broadcast(id+"-time", $scope.time) $rootScope.$broadcast(id+"-time", $scope.time)
}); });
});
$scope.$watch('panel.refresh.enable', function() {$scope.refresh()}); $scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
$scope.$watch('panel.refresh.interval', function() { $scope.$watch('panel.refresh.interval', function() {
...@@ -170,7 +175,9 @@ angular.module('kibana.timepicker', []) ...@@ -170,7 +175,9 @@ angular.module('kibana.timepicker', [])
indices($scope.time.from,$scope.time.to).then(function (p) { indices($scope.time.from,$scope.time.to).then(function (p) {
$scope.time.index = p.join(); $scope.time.index = p.join();
// Broadcast time // 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 // 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