Statistical Facet Panel

src/app/components/require.config.js

@@ -41,6 +41,7 @@ require.config({
 
 
     modernizr:                '../vendor/modernizr-2.6.1',
+    numeral:                '../vendor/numeral',
     elasticjs:                '../vendor/elasticjs/elastic-angular-client',
   },
   shim: {

src/app/panels/stats/editor.html

@@ -0,0 +1,28 @@
+<div class="row-fluid">
+    <h5>Details</h5>
+    <div class="editor-option">
+      <label class="small">Function</label>
+      <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total']"></select>
+    </div>
+    <div class="editor-option">
+      <label class="small">Field <tip>This field must contain a numeric value</tip></label>
+        <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-large" ng-model="panel.field">
+    </div>
+    <div class="editor-option">
+      <label class="small">Unit</label>
+        <input type="text" class="input-large" ng-model="panel.unit">
+    </div>
+    <h5>Formating</h5>
+    <div class="editor-option">
+      <label class="small">Format</label>
+      <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.format" ng-options="f for f in ['number','float','money','bytes']"></select>
+    </div>
+    <div class="editor-option">
+      <label class="small">Font Size</label>
+      <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
+    </div>
+    <div class="editor-option">
+      <label class="small">Display Breakdowns</label>
+      <select class="input-mini" ng-model="panel.display_breakdown" ng-options="f for f in ['yes', 'no']"></select></span>
+    </div>
+</div>

src/app/panels/stats/module.html

@@ -0,0 +1,11 @@
+<div ng-controller="stats" ng-init="init()">
+  <h1 ng-style="panel.style" style="text-align: center; line-height: .6em">{{data.value}} <small style="font-size: .5em; line-height: 0;">{{panel.unit}}</small></h1>
+  <table ng-show="panel.display_breakdown == 'yes'" cellspacing="0" class="table-hover table table-condensed" style="margin-top: 38px;">
+    <tbody>
+      <tr ng-repeat="item in data.rows">
+        <td><i class="icon-circle" ng-style="{color:item.color}"></i> {{item.label}}</td>
+        <td style="text-align: right;">{{item.value}} {{panel.unit}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/panels/stats/module.js

@@ -0,0 +1,179 @@
+/*
+
+  ## Stats Module
+
+  ### Parameters
+  * format :: The format of the value returned. (Default: number)
+  * style :: The font size of the main number to be displayed.
+  * mode :: The aggergate value to use for display
+  * spyable ::  Dislay the 'eye' icon that show the last elasticsearch query
+
+*/
+define([
+  'angular',
+  'app',
+  'underscore',
+  'jquery',
+  'kbn',
+  'numeral'
+], function (
+  angular,
+  app,
+  _,
+  $,
+  kbn,
+  numeral
+) {
+
+  'use strict';
+
+  var module = angular.module('kibana.panels.stats', []);
+  app.useModule(module);
+
+  module.controller('stats', function ($scope, querySrv, dashboard, filterSrv) {
+
+    $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
+      editorTabs : [
+        {title:'Queries', src:'app/partials/querySelect.html'}
+      ],
+      status: 'Beta',
+      description: 'A statatics panel for displaying aggergations using the Elastic Search statistical facet query.'
+    };
+
+
+    var defaults = {
+      queries     : {
+        mode        : 'all',
+        ids         : []
+      },
+      style   : { "font-size": '24pt'},
+      format: 'number',
+      mode: 'count',
+      display_breakdown: 'yes',
+      spyable     : true
+    };
+
+    _.defaults($scope.panel, defaults);
+
+    $scope.init = function () {
+      $scope.ready = false;
+      $scope.$on('refresh', function () {
+        $scope.get_data();
+      });
+      $scope.get_data();
+    };
+
+    $scope.get_data = function () {
+      if(dashboard.indices.length === 0) {
+        return;
+      }
+
+      $scope.panelMeta.loading = true;
+
+      var request,
+        results,
+        boolQuery,
+        queries;
+
+      request = $scope.ejs.Request().indices(dashboard.indices);
+
+      $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
+      queries = querySrv.getQueryObjs($scope.panel.queries.ids);
+
+
+      // This could probably be changed to a BoolFilter
+      boolQuery = $scope.ejs.BoolQuery();
+      _.each(queries,function(q) {
+        boolQuery = boolQuery.should(querySrv.toEjsObj(q));
+      });
+
+      request = request
+        .facet($scope.ejs.StatisticalFacet('stats')
+          .field($scope.panel.field)
+          .facetFilter($scope.ejs.QueryFilter(
+            $scope.ejs.FilteredQuery(
+              boolQuery,
+              filterSrv.getBoolFilter(filterSrv.ids)
+              )))).size(0);
+
+      _.each(queries, function (q) {
+        var alias = q.alias || q.query;
+        var query = $scope.ejs.BoolQuery(); 
+        query.should(querySrv.toEjsObj(q));
+        request.facet($scope.ejs.StatisticalFacet('stats_'+alias)
+          .field($scope.panel.field)
+          .facetFilter($scope.ejs.QueryFilter(
+            $scope.ejs.FilteredQuery(
+              query,
+              filterSrv.getBoolFilter(filterSrv.ids)
+            )
+          ))
+        );
+      });
+
+      // Populate the inspector panel
+      $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
+
+      results = request.doSearch();
+
+      var format = function (format, value) {
+        switch (format) {
+        case 'money':
+          value = numeral(value).format('$0,0.00');
+          break;
+        case 'bytes':
+          value = numeral(value).format('0.00b');
+          break;
+        case 'float':
+          value = numeral(value).format('0.000');
+          break;
+        default:
+          value = numeral(value).format('0,0');
+        }
+        return value;
+      };
+
+      results.then(function(results) {
+        $scope.panelMeta.loading = false;
+        var value = results.facets.stats[$scope.panel.mode]; 
+
+        var rows = queries.map(function (q) {
+          var alias = q.alias || q.query;
+          var obj = _.clone(q);
+          obj.label = alias;
+          obj.value = format($scope.panel.format,results.facets['stats_'+alias][$scope.panel.mode]);
+          return obj;
+        });
+
+        $scope.data = {
+          value: format($scope.panel.format, value),
+          rows: rows
+        };
+
+        $scope.$emit('render');
+      });
+    };
+
+    $scope.set_refresh = function (state) {
+      $scope.refresh = state;
+    };
+
+    $scope.close_edit = function() {
+      if($scope.refresh) {
+        $scope.get_data();
+      }
+      $scope.refresh =  false;
+      $scope.$emit('render');
+    };
+
+  });
+
+});

src/config.js

@@ -49,6 +49,7 @@ function (Settings) {
       'bettermap',
       'query',
       'terms',
+      'stats',
       'sparklines'
     ]
   });