Add Filter Bar to Visualize

- Closes #242
- Added field to event
- Added aggConfigs to series data for Histogram

TODOS.md

@@ -446,6 +446,7 @@
  - **[src/kibana/components/vislib/vis.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/components/vislib/vis.js)**
    - need to come up with a solution for resizing when no data is available
  - **[src/kibana/components/vislib/visualizations/column_chart.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/components/vislib/visualizations/column_chart.js)**
+   - Replace the following code with something more robust for finding the field
    - refactor so that this is called from the data module
  - **[src/kibana/components/visualize/visualize.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/components/visualize/visualize.js)**
    - we need to have some way to clean up result requests

src/kibana/apps/visualize/editor/editor.html

@@ -69,6 +69,7 @@
     config-object="conf">
   </config>
 
+  <filter-bar state="state"></filter-bar>
 
   <div class="vis-editor-content">
     <vis-editor-sidebar
@@ -84,4 +85,4 @@
     </div>
   </div>
 
-</div>
+</div>

src/kibana/apps/visualize/editor/editor.js

@@ -68,7 +68,8 @@ define(function (require) {
       var savedVisState = vis.getState();
 
       var $state = appStateFactory.create({
-        vis: savedVisState
+        vis: savedVisState,
+        filters: _.cloneDeep(searchSource.get('filter'))
       });
 
       if (!angular.equals($state.vis, savedVisState)) {
@@ -122,6 +123,12 @@ define(function (require) {
           searchSource.set('query', null);
         }
 
+        if ($state.filters) {
+          searchSource.set('filter', $state.filters);
+        } else {
+          searchSource.set('filter', null);
+        }
+
         $scope.fetch();
 
       });
@@ -136,8 +143,35 @@ define(function (require) {
       $scope.$on('$destroy', function () {
         savedVis.destroy();
       });
+
+      if (!vis.listeners) vis.listeners = {};
+      vis.listeners.click = function (e) {
+        if (e.aggConfig.aggType.name === 'terms') {
+          var filter;
+          var filters = _.flatten([$state.filters || []], true);
+          var previous = _.find(filters, function (item) {
+            if (item && item.query) {
+              return item.query.match[e.field].query === e.label;
+            }
+          });
+          if (!previous) {
+            filter = { query: { match: {} } };
+            filter.query.match[e.field] = { query: e.label, type: 'phrase' };
+            filters.push(filter);
+            $state.filters = filters;
+          }
+        } else {
+          notify.info('Filtering is only supported for Term aggergations at the time, others are coming soon.');
+        }
+      };
     }
 
+    $scope.$watch('state.filters', function (filters) {
+      searchSource.set('filter', filters);
+      $state.save();
+      $scope.fetch();
+    });
+
     $scope.fetch = function () {
       searchSource.fetch();
     };

src/kibana/components/vis_types/converters/histogram.js

@@ -130,8 +130,12 @@ define(function (require) {
           datum.y = datum.y * colX.metricScale;
         }
 
+        if (hasColor) {
+          datum.aggConfigs = [columns[iX], columns[iColor]];
+        }
+
         s.values.push(datum);
       });
     };
   };
-});
+});

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

@@ -29,6 +29,22 @@ define(function (require) {
 
     // Response to `click` and `hover` events
     ColumnChart.prototype.eventResponse = function (d, i) {
+
+      // Adding a look up for the field. Currently this relies on filtering the
+      // data for the label then using that with the pointIndex to get the aggConfig.
+      // It works for now... but we need something a little more robust. That will
+      // come after the first beta. :)
+      //
+      // TODO: Replace the following code with something more robust for finding the field
+      var field, series, aggConfig;
+      if (d.label) {
+        series = _.find(this.chartData.series, { label: d.label });
+        aggConfig = _.last(series.values[i].aggConfigs);
+        if (aggConfig.aggType.name === 'terms') {
+          field = aggConfig.field.name;
+        }
+      }
+
       return {
         value     : this._attr.yValue(d, i),
         point     : d,
@@ -38,7 +54,10 @@ define(function (require) {
         series    : this.chartData.series,
         config    : this._attr,
         data      : this.chartData,
-        e         : d3.event
+        e         : d3.event,
+        field     : field,
+        aggConfig : aggConfig,
+        vis       : this.vis
       };
     };
 
@@ -251,4 +270,4 @@ define(function (require) {
 
     return ColumnChart;
   };
-});
+});