Fixes elastic#12802 - Fix TSVB Visualizations to honor darkTheme

simianhacker · Jul 12, 2017 · e0502ab · e0502ab
1 parent fcee78a
commit e0502ab
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -4,13 +4,32 @@ import Visualization from './visualization';
 import VisPicker from './vis_picker';
 import PanelConfig from './panel_config';
 import brushHandler from '../lib/create_brush_handler';
+import { get } from 'lodash';
 
 class VisEditor extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { model: props.vis.params, dirty: false, autoApply: true };
+    const { appState } = props;
+    const reversed = get(appState, 'options.darkTheme', false);
+    this.state = { model: props.vis.params, dirty: false, autoApply: true, reversed };
     this.onBrush = brushHandler(props.vis.API.timeFilter);
+    this.handleAppStateChange = this.handleAppStateChange.bind(this);
+  }
+
+  componentWillMount() {
+    const { appState } = this.props;
+    this.appState = appState;
+    this.appState.on('save_with_changes', this.handleAppStateChange);
+  }
+
+  handleAppStateChange() {
+    const reversed = get(this.appState, 'options.darkTheme', false);
+    this.setState({ reversed });
+  }
+
+  componentWillUnmount() {
+    this.appState.off('save_with_changes', this.handleAppStateChange);
   }
 
   render() {
@@ -35,8 +54,10 @@ class VisEditor extends Component {
     };
 
     if (!this.props.vis.isEditorMode()) {
+      const reversed = this.state.reversed;
       return (
         <Visualization
+          reversed={reversed}
           onBrush={this.onBrush}
           fields={this.props.vis.fields}
           model={this.props.vis.params}

diff --git a/src/ui/public/vis/vis_types/react_vis_type.js b/src/ui/public/vis/vis_types/react_vis_type.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { VisTypeProvider } from 'ui/vis/vis_types';
 
-export function ReactVisTypeProvider(Private) {
+export function ReactVisTypeProvider(Private, getAppState) {
   const VisType = Private(VisTypeProvider);
 
   class ReactVisController {
@@ -17,7 +17,7 @@ export function ReactVisTypeProvider(Private) {
       return new Promise((resolve, reject) => {
         if (!this.visData) return reject();
         const Component = this.vis.type.visConfig.component;
-        render(<Component vis={this.vis} visData={visData} renderComplete={resolve} />, this.el);
+        render(<Component vis={this.vis} appState={getAppState()} visData={visData} renderComplete={resolve} />, this.el);
       });
     }