Fixing brushing in the vis editor

elastic · Jan 18, 2017 · 74dc57f · 74dc57f
1 parent b7822ec
commit 74dc57f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/src/core_plugins/metrics/public/components/vis_editor/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor/vis_editor_visualization.js
@@ -38,14 +38,6 @@ export default React.createClass({
     if (this.state.dragging) {
       style.userSelect = 'none';
     }
-    // if (dashboard.doc.background_color) {
-    //   style.backgroundColor = dashboard.doc.background_color;
-    // }
-    // if (dashboard.doc.panel_margin) {
-    //   style.padding = dashboard.doc.panel_margin;
-    // }
-    // const visBackgroundColor = dashboard.doc.default_panel_color ||
-    //   dashboard.doc.background_color;
     const visBackgroundColor = '#FFF';
     return (
       <div>

diff --git a/src/core_plugins/metrics/public/directives/vis_editor.js b/src/core_plugins/metrics/public/directives/vis_editor.js
@@ -5,17 +5,19 @@ import modules from 'ui/modules';
 import VisEditor from '../components/vis_editor/vis_editor';
 import addScope from '../lib/add_scope';
 import angular from 'angular';
+import createBrushHandler from '../lib/create_brush_handler';
 const app = modules.get('apps/metrics/directives');
-app.directive('metricsVisEditor', () => {
+app.directive('metricsVisEditor', (timefilter) => {
   return {
     restrict: 'E',
     link: ($scope, $el, $attrs) => {
       const addToState = ['fields', 'model', 'visData'];
       const Component = addScope(VisEditor, $scope, addToState);
+      const handleBrush = createBrushHandler($scope, timefilter);
       const handleChange = part => {
         $scope.$evalAsync(() => angular.copy(part, $scope.model));
       };
-      render(<Component onChange={handleChange} />, $el[0]);
+      render(<Component onChange={handleChange} onBrush={handleBrush} />, $el[0]);
       $scope.$on('$destroy', () => {
         unmountComponentAtNode($el[0]);
       });

diff --git a/src/core_plugins/metrics/public/directives/visualization.js b/src/core_plugins/metrics/public/directives/visualization.js
@@ -6,18 +6,15 @@ import Visualization from '../components/vis_editor/visualization';
 import addScope from '../lib/add_scope';
 import modules from 'ui/modules';
 import moment from 'moment';
+import createBrushHandler from '../lib/create_brush_handler';
 const app = modules.get('apps/metrics/directives');
 app.directive('metricsVisualization', (timefilter) => {
   return {
     restrict: 'E',
     link: ($scope, $el, $attrs) => {
       const addToState = ['model', 'visData', 'backgroundColor'];
       const Component = addScope(Visualization, $scope, addToState);
-      const handleBrush = (ranges) => {
-        timefilter.time.from = moment(ranges.xaxis.from).toISOString();
-        timefilter.time.to = moment(ranges.xaxis.to).toISOString();
-        timefilter.time.mode = 'absolute';
-      };
+      const handleBrush = createBrushHandler($scope, timefilter);
       render(<Component onBrush={handleBrush} className="dashboard__visualization"/>, $el[0]);
       $scope.$on('$destroy', () => unmountComponentAtNode($el[0]));
 

diff --git a/src/core_plugins/metrics/public/lib/create_brush_handler.js b/src/core_plugins/metrics/public/lib/create_brush_handler.js
@@ -0,0 +1,8 @@
+import moment from 'moment';
+export default ($scope, timefilter) => ranges => {
+  $scope.$evalAsync(() => {
+    timefilter.time.from = moment(ranges.xaxis.from).toISOString();
+    timefilter.time.to = moment(ranges.xaxis.to).toISOString();
+    timefilter.time.mode = 'absolute';
+  });
+};