app.panels.goal.module.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of org.apache.karaf.decanter.kibana-3.x
The newest version!
/** @scratch /panels/5
 *
 * include::panels/goal.asciidoc[]
 */

/** @scratch /panels/goal/0
 *
 * == Goal
 * Status: *Stable*
 *
 * The goal panel display progress towards a fixed goal on a pie chart
 *
 */
define([
  'angular',
  'app',
  'lodash',
  'jquery',
  'kbn',
  'config',
  'chromath'
], function (angular, app, _, $, kbn) {
  'use strict';

  var module = angular.module('kibana.panels.goal', []);
  app.useModule(module);

  module.controller('goal', function($scope, $rootScope, querySrv, dashboard, filterSrv) {

    $scope.panelMeta = {
      editorTabs : [
        {title:'Queries', src:'app/partials/querySelect.html'}
      ],
      modals : [
        {
          description: "Inspect",
          icon: "icon-info-sign",
          partial: "app/partials/inspector.html",
          show: $scope.panel.spyable
        }
      ],
      status  : "Stable",
      description : "Displays the progress towards a fixed goal on a pie chart"
    };

    // Set and populate defaults
    var _d = {
      /** @scratch /panels/goal/3
       *
       * === Parameters
       * donut:: Draw a hole in the middle of the pie, creating a tasty donut.
       */
      donut   : true,
      /** @scratch /panels/goal/3
       * tilt:: Tilt the pie back into an oval shape
       */
      tilt    : false,
      /** @scratch /panels/goal/3
       * legend:: The location of the legend, above, below or none
       */
      legend  : "above",
      /** @scratch /panels/goal/3
       * labels:: Set to false to disable drawing labels inside the pie slices
       */
      labels  : true,
      /** @scratch /panels/goal/3
       * spyable:: Set to false to disable the inspect function.
       */
      spyable : true,
      /** @scratch /panels/goal/3
       *
       * ==== Query
       *
       * query object::
       * query.goal::: the fixed goal for goal mode
       */
      query   : {goal: 100},
      /** @scratch /panels/goal/5
       *
       * ==== Queries
       *
       * queries object:: This object describes the queries to use on this panel.
       * queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
       * queries.ids::: In +selected+ mode, which query ids are selected.
       */
      queries     : {
        mode        : 'all',
        ids         : []
      },
    };
    _.defaults($scope.panel,_d);

    $scope.init = function() {
      $scope.$on('refresh',function(){$scope.get_data();});
      $scope.get_data();
    };

    $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();

      $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
      var queries = querySrv.getQueryObjs($scope.panel.queries.ids);

      // This could probably be changed to a BoolFilter
      var boolQuery = $scope.ejs.BoolQuery();
      _.each(queries,function(q) {
        boolQuery = boolQuery.should(querySrv.toEjsObj(q));
      });

      var results;

      request = request
        .query(boolQuery)
        .filter(filterSrv.getBoolFilter(filterSrv.ids()))
        .size(0);

      $scope.inspector = request.toJSON();

      results = $scope.ejs.doSearch(dashboard.indices, request);

      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: querySrv.colors[parseInt($scope.$id, 16)%8] },
          { data : remaining, color: Chromath.lighten(querySrv.colors[parseInt($scope.$id, 16)%8],0.70).toString() }
        ];
        $scope.$emit('render');
      });
    };

  });

  module.directive('goal', function(querySrv) {
    return {
      restrict: 'A',
      link: function(scope, elem) {

        elem.html('');

        // Receive render events
        scope.$on('render',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 label;

          label = {
            show: scope.panel.labels,
            radius: 0,
            formatter: function(label, series){
              var font = parseInt(
                (scope.panel.height||scope.row.height).replace('px',''),10)/8 + String('px');
              if(!(_.isUndefined(label))) {
                return ''+
                Math.round(series.percent)+'%';
              } else {
                return '';
              }
            },
          };

          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")){
            require(['jquery.flot.pie'], function(){
              scope.legend = $.plot(elem, scope.data, pie).getData();
              if(!scope.$$phase) {
                scope.$apply();
              }
            });
          }

        }

        var $tooltip = $('');
        elem.bind('plothover', function (event, pos, item) {
          if (item) {
            $tooltip
              .html([
                kbn.query_color_dot(item.series.color, 15),
                (item.series.label || ''),
                parseFloat(item.series.percent).toFixed(1) + '%'
              ].join(' '))
              .place_tt(pos.pageX, pos.pageY, {
                offset: 10
              });
          } else {
            $tooltip.remove();
          }
        });

      }
    };
  });
});