/*jshint globalstrict:true */ /*global angular:true */ /* ## Pie ### Parameters * query :: An object with 2 possible parameters depends on the mode: ** field: Fields to run a terms facet on. Only does anything in terms mode ** goal: How many to shoot for, only does anything in goal mode * exclude :: In terms mode, ignore these terms * donut :: Drill a big hole in the pie * tilt :: A janky 3D representation of the pie. Looks terrible 90% of the time. * legend :: Show the legend? * labels :: Label the slices of the pie? * mode :: 'terms' or 'goal' * default_field :: LOL wat? A dumb fail over field if for some reason the query object doesn't have a field * spyable :: Show the 'eye' icon that displays the last ES query for this panel */ 'use strict'; angular.module('kibana.pie', []) .controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) { $scope.panelMeta = { status : "Deprecated", description : "Uses an Elasticsearch terms facet to create a pie chart. You should really only"+ " point this at not_analyzed fields for that reason. This panel is going away soon, it has"+ " been replaced by the terms panel. Please use that one instead." }; // Set and populate defaults var _d = { query : { field:"_type", goal: 100}, queries : { mode : 'all', ids : [] }, size : 10, exclude : [], donut : false, tilt : false, legend : "above", labels : true, mode : "terms", default_field : 'DEFAULT', spyable : true, }; _.defaults($scope.panel,_d); $scope.init = function() { $scope.$on('refresh',function(){$scope.get_data();}); $scope.get_data(); }; $scope.set_mode = function(mode) { switch(mode) { case 'terms': $scope.panel.query = {field:"_all"}; break; case 'goal': $scope.panel.query = {goal:100}; break; } }; $scope.set_refresh = function (state) { $scope.refresh = state; }; $scope.close_edit = function() { if($scope.refresh) { $scope.get_data(); } $scope.refresh = false; $scope.$emit('render'); }; $scope.get_data = function() { // Make sure we have everything for the request to complete if(dashboard.indices.length === 0) { return; } $scope.panelMeta.loading = true; var request = $scope.ejs.Request().indices(dashboard.indices); $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries); // This could probably be changed to a BoolFilter var boolQuery = $scope.ejs.BoolQuery(); _.each($scope.panel.queries.ids,function(id) { boolQuery = boolQuery.should(querySrv.getEjsObj(id)); }); var results; // Terms mode if ($scope.panel.mode === "terms") { request = request .facet($scope.ejs.TermsFacet('pie') .field($scope.panel.query.field || $scope.panel.default_field) .size($scope.panel.size) .exclude($scope.panel.exclude) .facetFilter($scope.ejs.QueryFilter( $scope.ejs.FilteredQuery( boolQuery, filterSrv.getBoolFilter(filterSrv.ids) )))).size(0); $scope.populate_modal(request); results = request.doSearch(); // Populate scope when we have results results.then(function(results) { $scope.panelMeta.loading = false; $scope.hits = results.hits.total; $scope.data = []; var k = 0; _.each(results.facets.pie.terms, function(v) { var slice = { label : v.term, data : v.count }; $scope.data.push(); $scope.data.push(slice); k = k + 1; }); $scope.$emit('render'); }); // Goal mode } else { request = request .query(boolQuery) .filter(filterSrv.getBoolFilter(filterSrv.ids)) .size(0); $scope.populate_modal(request); results = request.doSearch(); results.then(function(results) { $scope.panelMeta.loading = false; var complete = results.hits.total; var remaining = $scope.panel.query.goal - complete; $scope.data = [ { label : 'Complete', data : complete, color: '#BF6730' }, { data : remaining, color: '#e2d0c4' } ]; $scope.$emit('render'); }); } }; // I really don't like this function, too much dom manip. Break out into directive? $scope.populate_modal = function(request) { $scope.modal = { title: "Inspector", body : "
Last Elasticsearch Query
"+
          'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
          angular.toJson(JSON.parse(request.toString()),true)+
        "'
", }; }; }) .directive('pie', function(querySrv, filterSrv, dashboard) { return { restrict: 'A', link: function(scope, elem, attrs) { elem.html('
'); // Receive render events scope.$on('render',function(){ render_panel(); }); // Or if the window is resized angular.element(window).bind('resize', function(){ render_panel(); }); // Function for rendering panel function render_panel() { // IE doesn't work without this elem.css({height:scope.panel.height||scope.row.height}); var scripts = $LAB.script("common/lib/panels/jquery.flot.js").wait() .script("common/lib/panels/jquery.flot.pie.js"); var label; if(scope.panel.mode === 'goal') { label = { show: scope.panel.labels, radius: 0, formatter: function(label, series){ var font = parseInt(scope.row.height.replace('px',''),10)/8 + String('px'); if(!(_.isUndefined(label))) { return '
'+ Math.round(series.percent)+'%
'; } else { return ''; } }, }; } else { label = { show: scope.panel.labels, radius: 2/3, formatter: function(label, series){ return '
'+ label+'
'+Math.round(series.percent)+'%
'; }, threshold: 0.1 }; } var pie = { series: { pie: { innerRadius: scope.panel.donut ? 0.45 : 0, tilt: scope.panel.tilt ? 0.45 : 1, radius: 1, show: true, combine: { color: '#999', label: 'The Rest' }, label: label, stroke: { width: 0 } } }, //grid: { hoverable: true, clickable: true }, grid: { backgroundColor: null, hoverable: true, clickable: true }, legend: { show: false }, colors: querySrv.colors }; // Populate legend if(elem.is(":visible")){ scripts.wait(function(){ scope.legend = $.plot(elem, scope.data, pie).getData(); if(!scope.$$phase) { scope.$apply(); } }); } } function tt(x, y, contents) { var tooltip = $('#pie-tooltip').length ? $('#pie-tooltip') : $('
'); tooltip.html(contents).css({ position: 'absolute', top : y + 10, left : x + 10, color : "#c8c8c8", padding : '10px', 'font-size': '11pt', 'font-weight' : 200, 'background-color': '#1f1f1f', 'border-radius': '5px', }).appendTo("body"); } elem.bind("plotclick", function (event, pos, object) { if (!object) { return; } if(scope.panel.mode === 'terms') { filterSrv.set({type:'terms',field:scope.panel.query.field,value:object.series.label}); dashboard.refresh(); } }); elem.bind("plothover", function (event, pos, item) { if (item) { var percent = parseFloat(item.series.percent).toFixed(1) + "%"; tt(pos.pageX, pos.pageY, "
"+ (item.series.label||"")+ " " + percent); } else { $("#pie-tooltip").remove(); } }); } }; });