[ML] Data visualizer: Use KibanaThemeProvider (#121286)

* [ML] Data visualizer: Use KibanaThemeProvider

* [ML] Edits following review

x-pack/plugins/data_visualizer/kibana.json

@@ -11,7 +11,8 @@
     "share",
     "discover",
     "fileUpload",
-    "uiActions"
+    "uiActions",
+    "charts"
   ],
   "optionalPlugins": [
     "security",
@@ -27,7 +28,6 @@
     "maps",
     "esUiShared",
     "fieldFormats",
-    "charts",
     "uiActions"
   ],
   "extraPublicDirs": [

x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx

@@ -57,9 +57,12 @@ export const DocumentCountChart: FC<Props> = ({
   interval,
 }) => {
   const {
-    services: { data, uiSettings, fieldFormats },
+    services: { data, uiSettings, fieldFormats, charts },
   } = useDataVisualizerKibana();
 
+  const chartTheme = charts.theme.useChartsTheme();
+  const chartBaseTheme = charts.theme.useChartsBaseTheme();
+
   const xAxisFormatter = fieldFormats.deserialize({ id: 'date' });
   const useLegacyTimeAxis = uiSettings.get('visualization:useLegacyTimeAxis', false);
 
@@ -134,6 +137,8 @@ export const DocumentCountChart: FC<Props> = ({
           xDomain={xDomain}
           onBrushEnd={onBrushEnd as BrushEndListener}
           onElementClick={onElementClick}
+          theme={chartTheme}
+          baseTheme={chartBaseTheme}
         />
         <Axis
           id="bottom"

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/file_data_visualizer.tsx

@@ -6,7 +6,10 @@
  */
 import '../_index.scss';
 import React, { FC } from 'react';
-import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  KibanaThemeProvider,
+} from '../../../../../../src/plugins/kibana_react/public';
 import { getCoreStart, getPluginsStart } from '../../kibana_services';
 
 // @ts-ignore
@@ -32,16 +35,18 @@ export const FileDataVisualizer: FC<Props> = ({ additionalLinks }) => {
   };
 
   return (
-    <KibanaContextProvider services={{ ...services }}>
-      <FileDataVisualizerView
-        indexPatterns={data.indexPatterns}
-        savedObjectsClient={coreStart.savedObjects.client}
-        http={coreStart.http}
-        fileUpload={fileUpload}
-        resultsLinks={additionalLinks}
-        capabilities={coreStart.application.capabilities}
-      />
-    </KibanaContextProvider>
+    <KibanaThemeProvider theme$={coreStart.theme.theme$}>
+      <KibanaContextProvider services={{ ...services }}>
+        <FileDataVisualizerView
+          indexPatterns={data.indexPatterns}
+          savedObjectsClient={coreStart.savedObjects.client}
+          http={coreStart.http}
+          fileUpload={fileUpload}
+          resultsLinks={additionalLinks}
+          capabilities={coreStart.application.capabilities}
+        />
+      </KibanaContextProvider>
+    </KibanaThemeProvider>
   );
 };
 

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/embeddables/grid_embeddable/grid_embeddable.tsx

@@ -20,7 +20,10 @@ import {
   EmbeddableOutput,
   IContainer,
 } from '../../../../../../../../src/plugins/embeddable/public';
-import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  KibanaThemeProvider,
+} from '../../../../../../../../src/plugins/kibana_react/public';
 import { DATA_VISUALIZER_GRID_EMBEDDABLE_TYPE } from './constants';
 import { EmbeddableLoading } from './embeddable_loading_fallback';
 import { DataVisualizerStartDependencies } from '../../../../plugin';
@@ -204,16 +207,18 @@ export class DataVisualizerGridEmbeddable extends Embeddable<
 
     ReactDOM.render(
       <I18nContext>
-        <KibanaContextProvider services={{ ...this.services[0], ...this.services[1] }}>
-          <Suspense fallback={<EmbeddableLoading />}>
-            <IndexDataVisualizerViewWrapper
-              id={this.input.id}
-              embeddableContext={this}
-              embeddableInput={this.getInput$()}
-              onOutputChange={(output) => this.updateOutput(output)}
-            />
-          </Suspense>
-        </KibanaContextProvider>
+        <KibanaThemeProvider theme$={this.services[0].theme.theme$}>
+          <KibanaContextProvider services={{ ...this.services[0], ...this.services[1] }}>
+            <Suspense fallback={<EmbeddableLoading />}>
+              <IndexDataVisualizerViewWrapper
+                id={this.input.id}
+                embeddableContext={this}
+                embeddableInput={this.getInput$()}
+                onOutputChange={(output) => this.updateOutput(output)}
+              />
+            </Suspense>
+          </KibanaContextProvider>
+        </KibanaThemeProvider>
       </I18nContext>,
       node
     );

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/index_data_visualizer.tsx

@@ -12,7 +12,10 @@ import { isEqual } from 'lodash';
 import { encode } from 'rison-node';
 import { SimpleSavedObject } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
-import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  KibanaThemeProvider,
+} from '../../../../../../src/plugins/kibana_react/public';
 import { getCoreStart, getPluginsStart } from '../../kibana_services';
 import {
   IndexDataVisualizerViewProps,
@@ -189,6 +192,7 @@ export const IndexDataVisualizer: FC<{ additionalLinks: ResultLink[] }> = ({ add
     lens,
     dataViewFieldEditor,
     uiActions,
+    charts,
   } = getPluginsStart();
   const services = {
     data,
@@ -200,15 +204,18 @@ export const IndexDataVisualizer: FC<{ additionalLinks: ResultLink[] }> = ({ add
     lens,
     dataViewFieldEditor,
     uiActions,
+    charts,
     ...coreStart,
   };
 
   return (
-    <KibanaContextProvider services={{ ...services }}>
-      <DataVisualizerUrlStateContextProvider
-        IndexDataVisualizerComponent={IndexDataVisualizerView}
-        additionalLinks={additionalLinks}
-      />
-    </KibanaContextProvider>
+    <KibanaThemeProvider theme$={coreStart.theme.theme$}>
+      <KibanaContextProvider services={{ ...services }}>
+        <DataVisualizerUrlStateContextProvider
+          IndexDataVisualizerComponent={IndexDataVisualizerView}
+          additionalLinks={additionalLinks}
+        />
+      </KibanaContextProvider>
+    </KibanaThemeProvider>
   );
 };

x-pack/plugins/data_visualizer/public/plugin.ts

@@ -6,6 +6,7 @@
  */
 
 import { CoreSetup, CoreStart } from 'kibana/public';
+import { ChartsPluginStart } from 'src/plugins/charts/public';
 import type { EmbeddableSetup, EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import type { SharePluginStart } from '../../../../src/plugins/share/public';
 import { Plugin } from '../../../../src/core/public';
@@ -37,6 +38,7 @@ export interface DataVisualizerStartDependencies {
   security?: SecurityPluginSetup;
   share: SharePluginStart;
   lens?: LensPublicStart;
+  charts: ChartsPluginStart;
   dataViewFieldEditor?: IndexPatternFieldEditorStart;
   fieldFormats: FieldFormatsStart;
   uiActions?: UiActionsStart;