Fix discover, tsvb and Lens chart theming issues

src/plugins/charts/README.md

@@ -26,72 +26,4 @@ Truncated color mappings in `value`/`text` form
 
 ## Theme
 
-the `theme` service offers utilities to interact with theme of kibana. EUI provides a light and dark theme object to work with Elastic-Charts. However, every instance of a Chart would need to pass down this the correctly EUI theme depending on Kibana's light or dark mode. There are several ways you can use the `theme` service to get the correct theme.
-
-> The current theme (light or dark) of Kibana is typically taken into account for the functions below.
-
-### `useChartsTheme`
-
-The simple fetching of the correct EUI theme; a **React hook**.
-
-```js
-import { npStart } from 'ui/new_platform';
-import { Chart, Settings } from '@elastic/charts';
-
-export const YourComponent = () => (
-  <Chart>
-    <Settings theme={npStart.plugins.charts.theme.useChartsTheme()} />
-  </Chart>
-);
-```
-
-### `chartsTheme$`
-
-An **observable** of the current charts theme. Use this implementation for more flexible updates to the chart theme without full page refreshes.
-
-```tsx
-import { npStart } from 'ui/new_platform';
-import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
-import { Subscription } from 'rxjs';
-import { Chart, Settings } from '@elastic/charts';
-
-interface YourComponentProps {};
-
-interface YourComponentState {
-  chartsTheme: EuiChartThemeType['theme'];
-}
-
-export class YourComponent extends Component<YourComponentProps, YourComponentState> {
-  private subscription?: Subscription;
-  public state = {
-    chartsTheme: npStart.plugins.charts.theme.chartsDefaultTheme,
-  };
-
-  componentDidMount() {
-    this.subscription = npStart.plugins.charts.theme
-      .chartsTheme$
-      .subscribe(chartsTheme => this.setState({ chartsTheme }));
-  }
-
-  componentWillUnmount() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-      this.subscription = undefined;
-    }
-  }
-
-  public render() {
-    const { chartsTheme } = this.state;
-
-    return (
-      <Chart>
-        <Settings theme={chartsTheme} />
-      </Chart>
-    );
-  }
-}
-```
-
-### `chartsDefaultTheme`
-
-Returns default charts theme (i.e. light).
+See Theme service [docs](public/services/theme/README.md)

src/plugins/charts/public/services/theme/README.md

@@ -0,0 +1,92 @@
+# Theme Service
+
+The `theme` service offers utilities to interact with the kibana theme. EUI provides a light and dark theme object to suplement the Elastic-Charts `baseTheme`. However, every instance of a Chart would need to pass down this the correctly EUI theme depending on Kibana's light or dark mode. There are several ways you can use the `theme` service to get the correct shared `theme` and `baseTheme`.
+
+> The current theme (light or dark) of Kibana is typically taken into account for the functions below.
+
+## `chartsDefaultBaseTheme`
+
+Default `baseTheme` from `@elastic/charts` (i.e. light).
+
+## `chartsDefaultTheme`
+
+Default `theme` from `@elastic/eui` (i.e. light).
+
+## `useChartsTheme` and `useChartsBaseTheme`
+
+A **React hook** for simple fetching of the correct EUI `theme` and `baseTheme`.
+
+```js
+import { npStart } from 'ui/new_platform';
+import { Chart, Settings } from '@elastic/charts';
+
+export const YourComponent = () => (
+  <Chart>
+    <Settings
+      theme={npStart.plugins.charts.theme.useChartsTheme()}
+      baseTheme={npStart.plugins.charts.theme.useChartsBaseTheme()}
+    />
+    {/* ... */}
+  </Chart>
+);
+```
+
+## `chartsTheme$` and `chartsBaseTheme$`
+
+An **`Observable`** of the current charts `theme` and `baseTheme`. Use this implementation for more flexible updates to the chart theme without full page refreshes.
+
+```tsx
+import { npStart } from 'ui/new_platform';
+import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
+import { Subscription, combineLatest } from 'rxjs';
+import { Chart, Settings, Theme } from '@elastic/charts';
+
+interface YourComponentProps {};
+
+interface YourComponentState {
+  chartsTheme: EuiChartThemeType['theme'];
+  chartsBaseTheme: Theme;
+}
+
+export class YourComponent extends Component<YourComponentProps, YourComponentState> {
+  private subscriptions: Subscription[] = [];
+
+  public state = {
+    chartsTheme: npStart.plugins.charts.theme.chartsDefaultTheme,
+    chartsBaseTheme: npStart.plugins.charts.theme.chartsDefaultBaseTheme,
+  };
+
+  componentDidMount() {
+    this.subscription = combineLatest(
+      npStart.plugins.charts.theme.chartsTheme$,
+      npStart.plugins.charts.theme.chartsBaseTheme$
+    ).subscribe(([chartsTheme, chartsBaseTheme]) =>
+      this.setState({ chartsTheme, chartsBaseTheme })
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  public render() {
+    const { chartsBaseTheme, chartsTheme } = this.state;
+
+    return (
+      <Chart>
+        <Settings
+          theme={chartsTheme}
+          baseTheme={chartsBaseTheme}
+        />
+        {/* ... */}
+      </Chart>
+    );
+  }
+}
+```
+
+## Why have `theme` and `baseTheme`?
+
+The `theme` prop is a recursive partial `Theme` that overrides properties from the `baseTheme`. This allows changes to the `Theme` type in `@elastic/charts` without having to update the `@elastic/eui` themes or every `<Chart />`.

src/plugins/charts/public/services/theme/theme.ts

@@ -18,34 +18,42 @@
  */
 
 import { useEffect, useState } from 'react';
-import { map } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 
 import { CoreSetup } from 'kibana/public';
-import { RecursivePartial, Theme } from '@elastic/charts';
+import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts';
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 
 export class ThemeService {
-  private _chartsTheme$?: Observable<RecursivePartial<Theme>>;
-
   /** Returns default charts theme */
   public readonly chartsDefaultTheme = EUI_CHARTS_THEME_LIGHT.theme;
+  public readonly chartsDefaultBaseTheme = LIGHT_THEME;
+
+  private _uiSettingsDarkMode$?: Observable<boolean>;
+  private _chartsTheme$ = new BehaviorSubject(this.chartsDefaultTheme);
+  private _chartsBaseTheme$ = new BehaviorSubject(this.chartsDefaultBaseTheme);
 
   /** An observable of the current charts theme */
-  public get chartsTheme$(): Observable<RecursivePartial<Theme>> {
-    if (!this._chartsTheme$) {
+  public chartsTheme$ = this._chartsTheme$.asObservable();
+
+  /** An observable of the current charts base theme */
+  public chartsBaseTheme$ = this._chartsBaseTheme$.asObservable();
+
+  /** An observable boolean for dark mode of kibana */
+  public get darkModeEnabled$(): Observable<boolean> {
+    if (!this._uiSettingsDarkMode$) {
       throw new Error('ThemeService not initialized');
     }
 
-    return this._chartsTheme$;
+    return this._uiSettingsDarkMode$;
   }
 
   /** A React hook for consuming the charts theme */
-  public useChartsTheme = () => {
-    /* eslint-disable-next-line react-hooks/rules-of-hooks */
+  public useChartsTheme = (): PartialTheme => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, update] = useState(this.chartsDefaultTheme);
 
-    /* eslint-disable-next-line react-hooks/rules-of-hooks */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const s = this.chartsTheme$.subscribe(update);
       return () => s.unsubscribe();
@@ -54,12 +62,28 @@ export class ThemeService {
     return value;
   };
 
+  /** A React hook for consuming the charts theme */
+  public useChartsBaseTheme = (): Theme => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, update] = useState(LIGHT_THEME);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const s = this.chartsBaseTheme$.subscribe(update);
+      return () => s.unsubscribe();
+    }, []);
+
+    return value;
+  };
+
   /** initialize service with uiSettings */
   public init(uiSettings: CoreSetup['uiSettings']) {
-    this._chartsTheme$ = uiSettings
-      .get$('theme:darkMode')
-      .pipe(
-        map((darkMode) => (darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme))
+    this._uiSettingsDarkMode$ = uiSettings.get$<boolean>('theme:darkMode');
+    this._uiSettingsDarkMode$.subscribe((darkMode) => {
+      this._chartsTheme$.next(
+        darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme
       );
+      this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME);
+    });
   }
 }

src/plugins/discover/public/application/angular/directives/histogram.tsx

@@ -40,12 +40,13 @@ import {
   ElementClickListener,
   XYChartElementEvent,
   BrushEndListener,
+  Theme,
 } from '@elastic/charts';
 
 import { i18n } from '@kbn/i18n';
 import { IUiSettingsClient } from 'kibana/public';
 import { EuiChartThemeType } from '@elastic/eui/dist/eui_charts_theme';
-import { Subscription } from 'rxjs';
+import { Subscription, combineLatest } from 'rxjs';
 import { getServices } from '../../../kibana_services';
 import { Chart as IChart } from '../helpers/point_series';
 
@@ -56,6 +57,7 @@ export interface DiscoverHistogramProps {
 
 interface DiscoverHistogramState {
   chartsTheme: EuiChartThemeType['theme'];
+  chartsBaseTheme: Theme;
 }
 
 function findIntervalFromDuration(
@@ -126,18 +128,21 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
   private subscription?: Subscription;
   public state = {
     chartsTheme: getServices().theme.chartsDefaultTheme,
+    chartsBaseTheme: getServices().theme.chartsDefaultBaseTheme,
   };
 
   componentDidMount() {
-    this.subscription = getServices().theme.chartsTheme$.subscribe(
-      (chartsTheme: EuiChartThemeType['theme']) => this.setState({ chartsTheme })
+    this.subscription = combineLatest(
+      getServices().theme.chartsTheme$,
+      getServices().theme.chartsBaseTheme$
+    ).subscribe(([chartsTheme, chartsBaseTheme]) =>
+      this.setState({ chartsTheme, chartsBaseTheme })
     );
   }
 
   componentWillUnmount() {
     if (this.subscription) {
       this.subscription.unsubscribe();
-      this.subscription = undefined;
     }
   }
 
@@ -204,7 +209,7 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     const uiSettings = getServices().uiSettings;
     const timeZone = getTimezone(uiSettings);
     const { chartData } = this.props;
-    const { chartsTheme } = this.state;
+    const { chartsTheme, chartsBaseTheme } = this.state;
 
     if (!chartData) {
       return null;
@@ -293,6 +298,7 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
           onElementClick={this.onElementClick(xInterval)}
           tooltip={tooltipProps}
           theme={chartsTheme}
+          baseTheme={chartsBaseTheme}
         />
         <Axis
           id="discover-histogram-left-axis"

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -34,7 +34,7 @@ import { getInterval } from '../../lib/get_interval';
 import { areFieldsDifferent } from '../../lib/charts';
 import { createXaxisFormatter } from '../../lib/create_xaxis_formatter';
 import { STACKED_OPTIONS } from '../../../visualizations/constants';
-import { getCoreStart, getUISettings } from '../../../../services';
+import { getCoreStart } from '../../../../services';
 
 export class TimeseriesVisualization extends Component {
   static propTypes = {
@@ -237,7 +237,6 @@ export class TimeseriesVisualization extends Component {
       }
     });
 
-    const darkMode = getUISettings().get('theme:darkMode');
     return (
       <div className="tvbVis" style={styles.tvbVis}>
         <TimeSeries
@@ -246,7 +245,6 @@ export class TimeseriesVisualization extends Component {
           onBrush={onBrush}
           enableHistogramMode={enableHistogramMode}
           backgroundColor={model.background_color}
-          darkMode={darkMode}
           showGrid={Boolean(model.show_grid)}
           legend={Boolean(model.show_legend)}
           legendPosition={model.legend_position}