created chart_data component, normalized visLib to vislib, fixed spelling of hierarchical, and spec'd out renderbots

src/kibana/components/chart_data/hierarchical/_build_split.js

@@ -1,6 +1,6 @@
 define(function (require) {
-  var transformer = require('components/visualize/_transform_aggregation');
-  var collectKeys = require('components/visualize/_collect_keys');
+  var transformer = require('components/chart_data/hierarchical/_transform_aggregation');
+  var collectKeys = require('components/chart_data/hierarchical/_collect_keys');
   return function (agg, metric, aggData) {
     // Ceate the split structure
     var split = { label: '', slices: { children: [] } };

src/kibana/components/chart_data/hierarchical/_create_raw_data.js

@@ -1,6 +1,6 @@
 define(function (require) {
   var _ = require('lodash');
-  var extractBuckets = require('components/visualize/_extract_buckets');
+  var extractBuckets = require('components/chart_data/hierarchical/_extract_buckets');
   return function (vis, resp) {
 
     // Create the initial results structure

src/kibana/components/chart_data/hierarchical/_transform_aggregation.js

@@ -1,6 +1,6 @@
 define(function (require) {
   var _ = require('lodash');
-  var extractBuckets = require('components/visualize/_extract_buckets');
+  var extractBuckets = require('components/chart_data/hierarchical/_extract_buckets');
   return function transformAggregation(agg, metric, aggData, parent) {
     return _.map(extractBuckets(aggData), function (bucket) {
       // Pick the appropriate value, if the metric doesn't exist then we just

src/kibana/components/chart_data/hierarchical/build_hierarchical_data.js

@@ -1,11 +1,11 @@
 define(function (require) {
   return function buildHierarchialDataProvider(Private) {
     var _ = require('lodash');
-    var buildSplit = require('components/visualize/_build_split');
-    var extractBuckets = require('components/visualize/_extract_buckets');
-    var createRawData = require('components/visualize/_create_raw_data');
-    var arrayToLinkedList = require('components/visualize/_array_to_linked_list');
-    var tooltipFormatter = Private(require('components/visualize/_hierarchial_tooltip_formatter'));
+    var buildSplit = require('components/chart_data/hierarchical/_build_split');
+    var extractBuckets = require('components/chart_data/hierarchical/_extract_buckets');
+    var createRawData = require('components/chart_data/hierarchical/_create_raw_data');
+    var arrayToLinkedList = require('components/chart_data/hierarchical/_array_to_linked_list');
+    var tooltipFormatter = Private(require('components/chart_data/hierarchical/_hierarchical_tooltip_formatter'));
 
     return function (vis, resp) {
       // Create a refrenece to the buckets

src/kibana/components/chart_data/index.js

@@ -0,0 +1,8 @@
+define(function (require) {
+  return function NormalizeChartDataFactory(Private) {
+    return {
+      flat: Private(require('components/chart_data/flat')),
+      hierarchical: Private(require('components/chart_data/hierarchical/build_hierarchical_data'))
+    };
+  };
+});

src/kibana/components/vis/_agg_configs.js

@@ -47,7 +47,7 @@ define(function (require) {
       var dslLvlCursor;
       var nestedMetric;
 
-      if (this.vis.type.hierarchialData) {
+      if (this.vis.type.hierarchicalData) {
         // collect the metric agg that we will copy under each bucket agg
         var nestedMetricConfig = _.first(this.vis.aggs.bySchemaGroup.metrics);
         if (nestedMetricConfig.type.name !== 'count') {

src/kibana/components/vislib/index.js

@@ -10,11 +10,11 @@ define(function (require) {
   /**
    * Provides the Kibana4 Visualization Library
    *
-   * @module visLib
-   * @main visLib
+   * @module vislib
+   * @main vislib
    * @return {Object} Contains the version number and the Vis Class for creating visualizations
    */
-  module.service('visLib', function (Private) {
+  module.service('vislib', function (Private) {
     return {
       version: '0.0.0',
       Vis: Private(require('components/vislib/vis'))

src/kibana/components/vislib/lib/layout/layout_types.js

@@ -4,7 +4,7 @@ define(function (require) {
     /**
      * Provides the HTML layouts for each visualization class
      *
-     * @module visLib
+     * @module vislib
      * @submodule LayoutTypeFactory
      * @param Private {Service} Loads any function as an angular module
      * @return {Function} Returns an Object of HTML layouts for each visualization class

src/kibana/components/vislib/visualizations/vis_types.js

@@ -2,9 +2,9 @@ define(function (require) {
   return function VisTypeFactory(Private) {
 
     /**
-     * Provides the visualizations for the visLib
+     * Provides the visualizations for the vislib
      *
-     * @module visLib
+     * @module vislib
      * @submodule VisTypeFactory
      * @param Private {Object} Loads any function as an angular module
      * @return {Function} Returns an Object of Visualization classes

src/kibana/components/visualize/visualize.js

@@ -1,15 +1,13 @@
 define(function (require) {
   require('modules')
   .get('kibana/directive')
-  .directive('visualize', function (Notifier, SavedVis, indexPatterns, Private, visLib) {
+  .directive('visualize', function (Notifier, SavedVis, indexPatterns, Private) {
 
     require('components/visualize/spy/spy');
     require('css!components/visualize/visualize.css');
     var $ = require('jquery');
     var _ = require('lodash');
     var visTypes = Private(require('registry/vis_types'));
-    var buildChartData = Private(require('components/visualize/_build_chart_data'));
-    var buildHierarchialData = Private(require('components/visualize/_build_hierarchial_data'));
 
     var notify = new Notifier({
       location: 'Visualize'
@@ -25,8 +23,8 @@ define(function (require) {
       template: require('text!components/visualize/visualize.html'),
       link: function ($scope, $el, attr) {
         var chart; // set in "vis" watcher
-        var $visChart = $el.find('.visualize-chart');
-        var $spy = $el.find('visualize-spy');
+        var $visEl = $el.find('.visualize-chart');
+        var $spyEl = $el.find('visualize-spy');
         var minVisChartHeight = 180;
 
         $scope.spyMode = false;
@@ -39,11 +37,11 @@ define(function (require) {
           $el.toggleClass('only-visualization', !$scope.spyMode);
           $el.toggleClass('visualization-and-spy', $scope.spyMode && !fullSpy);
           $el.toggleClass('only-spy', Boolean(fullSpy));
-          $spy.toggleClass('only', Boolean(fullSpy));
+          $spyEl.toggleClass('only', Boolean(fullSpy));
 
           // internal
-          $visChart.toggleClass('spy-visible', Boolean($scope.spyMode));
-          $visChart.toggleClass('spy-only', Boolean(fullSpy));
+          $visEl.toggleClass('spy-visible', Boolean($scope.spyMode));
+          $visEl.toggleClass('spy-only', Boolean(fullSpy));
         };
 
         // we need to wait for come watchers to fire at least once
@@ -67,38 +65,18 @@ define(function (require) {
           };
         }());
 
+        $scope.$watch('fullScreenSpy', applyClassNames);
         $scope.$watchCollection('spyMode', function (spyMode, oldSpyMode) {
-          $scope.spyMode = spyMode;
           // if the spy has been opened, check chart height
           if (spyMode && !oldSpyMode) {
-            $scope.fullScreenSpy = $visChart.height() < minVisChartHeight;
+            $scope.fullScreenSpy = $visEl.height() < minVisChartHeight;
           }
           applyClassNames();
         });
 
-        $scope.$watch('vis', prereq(function (vis, prevVis) {
-          if (prevVis && vis !== prevVis && prevVis.destroy) prevVis.destroy();
-          if (chart) {
-            _.forOwn(prevVis.listeners, function (listener, event) {
-              chart.off(event, listener);
-            });
-            chart.destroy();
-          }
-
-          if (!vis) return;
-
-          var vislibParams = _.assign(
-            {},
-            vis.type.vislibParams,
-            { type: vis.type.name },
-            vis.vislibParams
-          );
-
-          chart = new visLib.Vis($visChart[0], vislibParams);
-
-          _.each(vis.listeners, function (listener, event) {
-            chart.on(event, listener);
-          });
+        $scope.$watch('vis', prereq(function (vis, oldVis) {
+          if (oldVis) $scope.renderbot = null;
+          if (vis) $scope.renderbot = vis.type.createRenderbot(vis, $visEl);
         }));
 
         $scope.$watch('searchSource', prereq(function (searchSource) {
@@ -117,33 +95,19 @@ define(function (require) {
         }));
 
         $scope.$watch('esResp', prereq(function (resp, prevResp) {
-          var fn;
           if (!resp) return;
-          if ($scope.vis.type.hierarchialData) {
-            fn = buildHierarchialData;
-          } else {
-            fn = buildChartData;
-          }
-          var chartData = fn($scope.vis, resp);
-          $scope.chartData = chartData;
+          $scope.renderbot.render(resp);
         }));
 
-        $scope.$watch('chartData', function (chartData) {
-          applyClassNames();
-
-          if (chart && chartData && !$scope.onlyShowSpy) {
-            notify.event('call chart render', function () {
-              chart.render(chartData);
-            });
+        $scope.$watch('renderbot', function (newRenderbot, oldRenderbot) {
+          if (oldRenderbot && newRenderbot !== oldRenderbot) {
+            oldRenderbot.destroy();
           }
         });
 
         $scope.$on('$destroy', function () {
-          if (chart) {
-            _.forOwn($scope.vis.listeners, function (listener, event) {
-              chart.off(event, listener);
-            });
-            chart.destroy();
+          if ($scope.renderbot) {
+            $scope.renderbot.destroy();
           }
         });
       }

src/kibana/plugins/vis_types/_renderbot.js

@@ -0,0 +1,40 @@
+define(function (require) {
+  return function RenderbotFactory(Private) {
+
+    /**
+     * "Abstract" renderbot class which just defines the expected API
+     *
+     * @param {Vis} vis - the vis object that contains all configuration data required to render the vis
+     * @param {jQuery<DOMElement>} $el - a jQuery wrapped element to render into
+     */
+    function Renderbot(vis, $el) {
+      this.vis = vis;
+      this.$el = $el;
+    }
+
+    /**
+     * Each renderbot should implement a #render() method which
+     * should accept an elasticsearch response and update the underlying visualization
+     *
+     * @override
+     * @param {object} esResp - The raw elasticsearch response
+     * @return {undefined}
+     */
+    Renderbot.prototype.render = function (esResp) {
+      throw new Error('not implemented');
+    };
+
+    /**
+     * Each renderbot should implement the #destroy() method which
+     * should tear down the owned element, remove event listeners, etc.
+     *
+     * @override
+     * @return {undefined}
+     */
+    Renderbot.prototype.destroy = function () {
+      throw new Error('not implemented');
+    };
+
+    return Renderbot;
+  };
+});

src/kibana/plugins/vis_types/_vis_type.js

@@ -1,21 +1,14 @@
 define(function (require) {
   return function VisTypeFactory(Private) {
-    var _ = require('lodash');
-
     var VisTypeSchemas = Private(require('plugins/vis_types/_schemas'));
-    var HistogramConverter = Private(require('plugins/vis_types/converters/histogram'));
 
     function VisType(opts) {
       opts = opts || {};
 
       this.name = opts.name;
       this.title = opts.title;
-
+      this.responseConverter = opts.responseConverter;
       this.icon = opts.icon;
-      this.vislibParams = opts.vislibParams || {};
-      this.responseConverter = opts.responseConverter || HistogramConverter;
-      this.hierarchialData = opts.hierarchialData || false;
-      this.listeners = opts.listeners || {};
       this.schemas = opts.schemas || new VisTypeSchemas();
     }
 

src/kibana/plugins/vis_types/index.js

@@ -1,7 +1,9 @@
 define(function (require) {
   var visTypes = require('registry/vis_types');
 
-  visTypes.register(require('plugins/vis_types/histogram'));
-  visTypes.register(require('plugins/vis_types/line'));
-  visTypes.register(require('plugins/vis_types/pie'));
+  visTypes.register(require('plugins/vis_types/vislib/histogram'));
+  visTypes.register(require('plugins/vis_types/vislib/line'));
+  visTypes.register(require('plugins/vis_types/vislib/pie'));
+
+  visTypes.register(require('plugins/vis_types/template/table'));
 });

src/kibana/plugins/vis_types/template/_template_renderbot.js

@@ -0,0 +1,24 @@
+define(function (require) {
+  return function TemplateRenderbotFactory(Private, $compile, $rootScope) {
+    var _ = require('lodash');
+    var Renderbot = Private(require('plugins/vis_types/_renderbot'));
+
+    _(TemplateRenderbot).inherits(Renderbot);
+    function TemplateRenderbot(vis, $el) {
+      TemplateRenderbot.Super.call(this, vis, $el);
+
+      this.$scope = $rootScope.$new();
+      $el.html($compile(this.vis.type.template)(this.$scope));
+    }
+
+    TemplateRenderbot.prototype.render = function (esResponse) {
+      this.$scope.esResponse = esResponse;
+    };
+
+    TemplateRenderbot.prototype.destroy = function () {
+      this.$scope.$destroy();
+    };
+
+    return TemplateRenderbot;
+  };
+});

src/kibana/plugins/vis_types/template/_template_vis_type.js

@@ -0,0 +1,23 @@
+define(function (require) {
+  return function TemplateVisTypeFactory(Private) {
+    var _ = require('lodash');
+    var VisType = Private(require('plugins/vis_types/_vis_type'));
+    var TemplateRenderbot = Private(require('plugins/vis_types/template/_template_renderbot'));
+
+    _(TemplateVisType).inherits(VisType);
+    function TemplateVisType(opts) {
+      TemplateVisType.Super.call(this, opts);
+
+      this.template = opts.template;
+      if (!this.template) {
+        throw new Error('Missing template for TemplateVisType');
+      }
+    }
+
+    TemplateVisType.prototype.createRenderbot = function (vis, $el) {
+      return new TemplateRenderbot(vis, $el);
+    };
+
+    return TemplateVisType;
+  };
+});

src/kibana/plugins/vis_types/template/table.html

@@ -0,0 +1 @@
+<pre>{{ esResponse | json }}</pre>

src/kibana/plugins/vis_types/template/table.js

@@ -0,0 +1,25 @@
+define(function (require) {
+  return function HistogramVisType(Private) {
+    var TemplateVisType = Private(require('plugins/vis_types/template/_template_vis_type'));
+    var Schemas = Private(require('plugins/vis_types/_schemas'));
+
+    return new TemplateVisType({
+      name: 'table',
+      title: 'Data Table',
+      icon: 'fa-table',
+      template: require('text!plugins/vis_types/template/table.html'),
+      schemas: new Schemas([
+        {
+          group: 'metrics',
+          name: 'metrics',
+          title: 'Metric'
+        },
+        {
+          group: 'buckets',
+          name: 'buckets',
+          title: 'Bucket'
+        }
+      ])
+    });
+  };
+});

src/kibana/plugins/vis_types/vislib/_vislib_renderbot.js

@@ -0,0 +1,49 @@
+define(function (require) {
+  return function VislibRenderbotFactory(Private, vislib) {
+    var _ = require('lodash');
+    var Renderbot = Private(require('plugins/vis_types/_renderbot'));
+    var normalizeChartData = Private(require('components/chart_data/index'));
+
+    _(VislibRenderbot).inherits(Renderbot);
+    function VislibRenderbot(vis, $el) {
+      VislibRenderbot.Super.call(this, vis, $el);
+
+      var self = this;
+
+      var vislibParams = _.assign(
+        {},
+        vis.type.vislibParams,
+        { type: vis.type.name },
+        vis.vislibParams
+      );
+
+      self.vislibVis = new vislib.Vis($el[0], vislibParams);
+
+      _.each(vis.listeners, function (listener, event) {
+        self.vislibVis.on(event, listener);
+      });
+    }
+
+    VislibRenderbot.prototype.render = function (esResponse) {
+      var buildChartData = normalizeChartData.flat;
+      if (this.vis.type.hierarchicalData) {
+        buildChartData = normalizeChartData.hierarchical;
+      }
+
+      var chartData = buildChartData(this.vis, esResponse);
+      this.vislibVis.render(chartData);
+    };
+
+    VislibRenderbot.prototype.destroy = function () {
+      var vislibVis = this.vislibVis;
+
+      _.forOwn(this.vis.listeners, function (listener, event) {
+        vislibVis.off(event, listener);
+      });
+
+      vislibVis.destroy();
+    };
+
+    return VislibRenderbot;
+  };
+});

src/kibana/plugins/vis_types/vislib/_vislib_vis_type.js

@@ -0,0 +1,27 @@
+define(function (require) {
+  return function VislibVisTypeFactory(Private) {
+    var _ = require('lodash');
+    var VisTypeSchemas = Private(require('plugins/vis_types/_schemas'));
+    var VisType = Private(require('plugins/vis_types/_vis_type'));
+    var histogramConverter = Private(require('plugins/vis_types/vislib/converters/histogram'));
+    var VislibRenderbot = Private(require('plugins/vis_types/vislib/_vislib_renderbot'));
+
+    _(VislibVisType).inherits(VisType);
+    function VislibVisType(opts) {
+      opts = opts || {};
+
+      VislibVisType.Super.call(this, opts);
+
+      this.vislibParams = opts.vislibParams || {};
+      this.responseConverter = this.responseConverter || histogramConverter;
+      this.hierarchicalData = opts.hierarchicalData || false;
+      this.listeners = opts.listeners || {};
+    }
+
+    VislibVisType.prototype.createRenderbot = function (vis, $el) {
+      return new VislibRenderbot(vis, $el);
+    };
+
+    return VislibVisType;
+  };
+});

src/kibana/plugins/vis_types/vislib/histogram.js

@@ -1,9 +1,9 @@
 define(function (require) {
   return function HistogramVisType(Private) {
-    var VisType = Private(require('plugins/vis_types/_vis_type'));
+    var VislibVisType = Private(require('plugins/vis_types/vislib/_vislib_vis_type'));
     var Schemas = Private(require('plugins/vis_types/_schemas'));
 
-    return new VisType({
+    return new VislibVisType({
       name: 'histogram',
       title: 'Vertical bar chart',
       icon: 'fa-bar-chart',

src/kibana/plugins/vis_types/vislib/line.js

@@ -1,9 +1,9 @@
 define(function (require) {
   return function HistogramVisType(Private) {
-    var VisType = Private(require('plugins/vis_types/_vis_type'));
+    var VislibVisType = Private(require('plugins/vis_types/vislib/_vislib_vis_type'));
     var Schemas = Private(require('plugins/vis_types/_schemas'));
 
-    return new VisType({
+    return new VislibVisType({
       name: 'line',
       title: 'Line chart',
       icon: 'fa-line-chart',

src/kibana/plugins/vis_types/vislib/pie.js

@@ -1,10 +1,10 @@
 define(function (require) {
   return function HistogramVisType(Private) {
-    var VisType = Private(require('plugins/vis_types/_vis_type'));
+    var VislibVisType = Private(require('plugins/vis_types/vislib/_vislib_vis_type'));
     var Schemas = Private(require('plugins/vis_types/_schemas'));
-    var PieConverter = Private(require('plugins/vis_types/converters/pie'));
+    var PieConverter = Private(require('plugins/vis_types/vislib/converters/pie'));
 
-    return new VisType({
+    return new VislibVisType({
       name: 'pie',
       title: 'Pie chart',
       icon: 'fa-pie-chart',
@@ -14,7 +14,7 @@ define(function (require) {
         addLegend: true
       },
       responseConverter: PieConverter,
-      hierarchialData: true,
+      hierarchicalData: true,
       schemas: new Schemas([
         {
           group: 'metrics',

src/kibana/plugins/visualize/editor/agg_group.html

@@ -42,7 +42,7 @@
       class="vis-editor-agg-wide-btn btn btn-xs btn-default" >
 
       <div ng-if="!addForm.visible">
-        <span ng-if="groupName === 'buckets' && (!group.length || group.length === 0)">
+        <span ng-if="groupName !== 'buckets' || (!group.length || group.length === 0)">
           <i class="fa fa-plus"></i> Add Aggregation
         </span>
         <span ng-if="groupName === 'buckets' && group.length >= 1">

test/unit/index.html

@@ -143,7 +143,7 @@
           'specs/components/reflow_watcher',
           'specs/registry/index',
           'specs/components/clipboard',
-          'specs/visualize/_build_hierarchial_data',
+          'specs/visualize/_build_hierarchical_data',
           'specs/visualize/_extract_buckets',
           'specs/visualize/_transform_aggregation',
           'specs/visualize/_create_raw_data',

test/unit/specs/vislib/index.js

@@ -13,8 +13,8 @@ define(function (require) {
     });
 
     beforeEach(function () {
-      inject(function (d3, visLib) {
-        chart = visLib;
+      inject(function (d3, vislib) {
+        chart = vislib;
       });
     });
 

test/unit/specs/visualize/_array_to_linked_list.js

@@ -1,5 +1,5 @@
 define(function (require) {
-  var arrayToLinkedList = require('components/visualize/_array_to_linked_list');
+  var arrayToLinkedList = require('components/chart_data/hierarchical/_array_to_linked_list');
   describe('buildHierarchialData()', function () {
     describe('arrayToLinkedList', function () {
 

test/unit/specs/visualize/_build_hierarchial_data.js

@@ -1,6 +1,6 @@
 define(function (require) {
   var _ = require('lodash');
-  var fixtures = require('fixtures/fake_hierarchial_data');
+  var fixtures = require('fixtures/fake_hierarchical_data');
 
   var AggConfigs;
   var Vis;
@@ -14,7 +14,7 @@ define(function (require) {
       Vis = Private(require('components/vis/vis'));
       AggConfigs = Private(require('components/vis/_agg_configs'));
       indexPattern = Private(require('fixtures/stubbed_logstash_index_pattern'));
-      buildHierarchialData = Private(require('components/visualize/_build_hierarchial_data'));
+      buildHierarchialData = Private(require('components/chart_data/hierarchical/build_hierarchical_data'));
     }));
 
 

test/unit/specs/visualize/_create_raw_data.js

@@ -1,8 +1,8 @@
 define(function (require) {
   var _ = require('lodash');
-  var fixtures = require('fixtures/fake_hierarchial_data');
-  var createRawData = require('components/visualize/_create_raw_data');
-  var arrayToLinkedList = require('components/visualize/_array_to_linked_list');
+  var fixtures = require('fixtures/fake_hierarchical_data');
+  var createRawData = require('components/chart_data/hierarchical/_create_raw_data');
+  var arrayToLinkedList = require('components/chart_data/hierarchical/_array_to_linked_list');
 
   var AggConfigs;
   var Vis;

test/unit/specs/visualize/_extract_buckets.js

@@ -1,5 +1,5 @@
 define(function (require) {
-  var extractBuckets = require('components/visualize/_extract_buckets');
+  var extractBuckets = require('components/chart_data/hierarchical/_extract_buckets');
 
   describe('buildHierarchialData()', function () {
     describe('extractBuckets()', function () {

test/unit/specs/visualize/_transform_aggregation.js

@@ -2,7 +2,7 @@ define(function (require) {
   describe('buildHierarchialData()', function () {
     describe('transformAggregation()', function () {
 
-      var tranform = require('components/visualize/_transform_aggregation');
+      var tranform = require('components/chart_data/hierarchical/_transform_aggregation');
       var fixture = {};
       fixture.agg = { id: 'agg_2', name: 'test', _next: { id: 'agg_3', name: 'example' } };
       fixture.metric = { id: 'agg_1' };