angular.module('kibana.histogram', []) .controller('histogram', function($scope, $location) { // Set and populate defaults var _d = { query : "*", interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000), color : "#27508C", show : ['bars'], fill : false, } _.each(_d, function(v, k) { $scope.panel[k] = _.isUndefined($scope.panel[k]) ? _d[k] : $scope.panel[k]; }); if (!(_.isUndefined($scope.panel.group))) { $scope.$on($scope.panel.group+"-query", function(event, query) { $scope.panel.query[0].query = query; $scope.get_data(); }); } $scope.get_data = function() { var request = $scope.ejs.Request().indices($scope.index); // Build the question part of the query var queries = []; _.each($scope.panel.query, function(v) { queries.push($scope.ejs.FilteredQuery( ejs.QueryStringQuery(v.query || '*'), ejs.RangeFilter(config.timefield) .from($scope.from) .to($scope.to) .cache(false)) ) }); // Build the facet part _.each(queries, function(v) { request = request .facet($scope.ejs.DateHistogramFacet(_.indexOf(queries,v)) .field(config.timefield) .interval($scope.panel.interval) .facetFilter($scope.ejs.QueryFilter(v)) ).size(0) }) // Then run it var results = request.doSearch(); // Populate scope when we have results results.then(function(results) { $scope.hits = results.hits.total; // Null values at each end of the time range make sure we see entire range $scope.data = []; _.each(results.facets, function(v, k) { var series = {}; var data = [[$scope.from.getTime(), null]]; _.each(v.entries, function(v, k) { data.push([v['time'],v['count']]) }); data.push([$scope.to.getTime(), null]) series.data = { label: $scope.panel.query[k].label, data: data, }; if (!(_.isUndefined($scope.panel.query[k].color))) series.data.color = $scope.panel.query[k].color; $scope.data.push(series.data) }); }); } $scope.$watch(function() { return angular.toJson([$scope.from, $scope.to]) }, function(){ $scope.panel.interval = secondsToHms( calculate_interval($scope.from,$scope.to,50,0)/1000), $scope.get_data(); }); }) .directive('histogram', function() { return { restrict: 'A', link: function(scope, elem, attrs, ctrl) { // If the data or row state changes, re-render scope.$watch(function () { return angular.toJson([scope.data, scope.row]) }, function() { if(!(_.isUndefined(scope.data))) render_panel(scope,elem,attrs); }); // Re-render if the window is resized angular.element(window).bind('resize', function(){ render_panel(scope,elem,attrs); }); // Function for rendering panel function render_panel(scope,elem,attrs) { // Determine format var show = _.isUndefined(scope.panel.show) ? { bars: true, lines: false, points: false } : { lines: _.indexOf(scope.panel.show,'lines') < 0 ? false : true, bars: _.indexOf(scope.panel.show,'bars') < 0 ? false : true, points: _.indexOf(scope.panel.show,'points') < 0 ? false : true, stack: _.indexOf(scope.panel.show,'stack') < 0 ? null : true, } // Set barwidth based on specified interval var barwidth = interval_to_seconds(scope.panel.interval)*1000 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") // Populate element. Note that jvectormap appends, does not replace. scripts.wait(function(){ // Populate element $.plot(elem, scope.data, { legend: { position: "nw", labelFormatter: function(label, series) { return '' + label + ' / ' + scope.panel.interval + ''; } }, series: { stack: show.stack, lines: { show: show.lines, fill: scope.panel.fill }, bars: { show: show.bars, fill: 1, barWidth: barwidth/1.8 }, points: { show: show.points }, shadowSize: 1 }, yaxis: { min: 0, color: "#000" }, xaxis: { mode: "time", timeformat: "%H:%M:%S
%m-%d", label: "Datetime", color: "#000", }, grid: { backgroundColor: '#fff', borderWidth: 0, borderColor: '#eee', color: "#eee", hoverable: true, } }) }) } } }; })