fix chart bgColor issues, update lens to use charts plugin

package.json

@@ -123,7 +123,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
     "@babel/register": "^7.10.1",
     "@elastic/apm-rum": "^5.2.0",
-    "@elastic/charts": "19.5.2",
+    "@elastic/charts": "19.6.1",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
     "@elastic/eui": "24.1.0",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "19.5.2",
+    "@elastic/charts": "19.6.1",
     "@elastic/eui": "24.1.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",

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

@@ -48,6 +48,20 @@ export class ThemeService {
     return this._uiSettingsDarkMode$;
   }
 
+  /** A React hook for consuming the dark mode value */
+  public useDarkMode = (): boolean => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, update] = useState(false);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const s = this.darkModeEnabled$.subscribe(update);
+      return () => s.unsubscribe();
+    }, []);
+
+    return value;
+  };
+
   /** A React hook for consuming the charts theme */
   public useChartsTheme = (): PartialTheme => {
     // eslint-disable-next-line react-hooks/rules-of-hooks

x-pack/plugins/lens/kibana.json

@@ -10,7 +10,8 @@
     "navigation",
     "kibanaLegacy",
     "visualizations",
-    "dashboard"
+    "dashboard",
+    "charts"
   ],
   "optionalPlugins": ["embeddable", "usageCollection", "taskManager", "uiActions"],
   "configPath": ["xpack", "lens"],

x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx

@@ -20,7 +20,6 @@ import {
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
-import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import {
   Axis,
   BarSeries,
@@ -41,6 +40,7 @@ import {
   esQuery,
   IIndexPattern,
 } from '../../../../../src/plugins/data/public';
+import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 import { DraggedField } from './indexpattern';
 import { DragDrop } from '../drag_drop';
 import { DatasourceDataPanelProps, DataType } from '../types';
@@ -60,6 +60,7 @@ export interface FieldItemProps {
   exists: boolean;
   query: Query;
   dateRange: DatasourceDataPanelProps['dateRange'];
+  chartsThemeService: ChartsPluginSetup['theme'];
   filters: Filter[];
   hideDetails?: boolean;
 }
@@ -254,11 +255,12 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
     dateRange,
     core,
     sampledValues,
+    chartsThemeService,
     data: { fieldFormats },
   } = props;
 
-  const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
-  const chartTheme = IS_DARK_THEME ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
+  const chartTheme = chartsThemeService.useChartsTheme();
+  const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
   let histogramDefault = !!props.histogram;
 
   const totalValuesCount =
@@ -410,6 +412,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
           <Settings
             tooltip={{ type: TooltipType.None }}
             theme={chartTheme}
+            baseTheme={chartBaseTheme}
             xDomain={
               fromDate && toDate
                 ? {
@@ -446,7 +449,12 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
     } else if (showingHistogram || !topValues || !topValues.buckets.length) {
       return wrapInPopover(
         <Chart data-test-subj="lnsFieldListPanel-histogram" size={{ height: 200, width: '100%' }}>
-          <Settings rotation={90} tooltip={{ type: TooltipType.None }} theme={chartTheme} />
+          <Settings
+            rotation={90}
+            tooltip={{ type: TooltipType.None }}
+            theme={chartTheme}
+            baseTheme={chartBaseTheme}
+          />
 
           <Axis
             id="key"

x-pack/plugins/lens/public/pie_visualization/index.ts

@@ -4,18 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { CoreSetup } from 'src/core/public';
 import { ExpressionsSetup } from 'src/plugins/expressions/public';
 import { pieVisualization } from './pie_visualization';
 import { pie, getPieRenderer } from './register_expression';
 import { EditorFrameSetup, FormatFactory } from '../types';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
+import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
 export interface PieVisualizationPluginSetupPlugins {
   editorFrame: EditorFrameSetup;
   expressions: ExpressionsSetup;
   formatFactory: Promise<FormatFactory>;
+  chartsThemeService: ChartsPluginSetup['theme'];
 }
 
 export interface PieVisualizationPluginStartPlugins {
@@ -27,17 +28,19 @@ export class PieVisualization {
 
   setup(
     core: CoreSetup,
-    { expressions, formatFactory, editorFrame }: PieVisualizationPluginSetupPlugins
+    {
+      expressions,
+      formatFactory,
+      editorFrame,
+      chartsThemeService,
+    }: PieVisualizationPluginSetupPlugins
   ) {
     expressions.registerFunction(() => pie);
 
     expressions.registerRenderer(
       getPieRenderer({
         formatFactory,
-        chartTheme: core.uiSettings.get<boolean>('theme:darkMode')
-          ? EUI_CHARTS_THEME_DARK.theme
-          : EUI_CHARTS_THEME_LIGHT.theme,
-        isDarkMode: core.uiSettings.get<boolean>('theme:darkMode'),
+        chartsThemeService,
       })
     );
 

x-pack/plugins/lens/public/pie_visualization/register_expression.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';
-import { PartialTheme } from '@elastic/charts';
 import {
   IInterpreterRenderHandlers,
   ExpressionRenderDefinition,
@@ -17,6 +16,7 @@ import {
 import { LensMultiTable, FormatFactory, LensFilterEvent } from '../types';
 import { PieExpressionProps, PieExpressionArgs } from './types';
 import { PieComponent } from './render_function';
+import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
 export interface PieRender {
   type: 'render';
@@ -93,8 +93,7 @@ export const pie: ExpressionFunctionDefinition<
 
 export const getPieRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
-  chartTheme: PartialTheme;
-  isDarkMode: boolean;
+  chartsThemeService: ChartsPluginSetup['theme'];
 }): ExpressionRenderDefinition<PieExpressionProps> => ({
   name: 'lens_pie_renderer',
   displayName: i18n.translate('xpack.lens.pie.visualizationName', {
@@ -116,10 +115,9 @@ export const getPieRenderer = (dependencies: {
       <I18nProvider>
         <MemoizedChart
           {...config}
-          {...dependencies}
           formatFactory={formatFactory}
+          chartsThemeService={dependencies.chartsThemeService}
           onClickValue={onClickValue}
-          isDarkMode={dependencies.isDarkMode}
         />
       </I18nProvider>,
       domNode,

x-pack/plugins/lens/public/pie_visualization/render_function.tsx

@@ -19,7 +19,6 @@ import {
   PartitionConfig,
   PartitionLayer,
   PartitionLayout,
-  PartialTheme,
   PartitionFillLabel,
   RecursivePartial,
   LayerValue,
@@ -32,6 +31,7 @@ import { getSliceValueWithFallback, getFilterContext } from './render_helpers';
 import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
 import { desanitizeFilterContext } from '../utils';
+import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
 const EMPTY_SLICE = Symbol('empty_slice');
 
@@ -40,15 +40,14 @@ const sortedColors = euiPaletteColorBlindBehindText();
 export function PieComponent(
   props: PieExpressionProps & {
     formatFactory: FormatFactory;
-    chartTheme: Exclude<PartialTheme, undefined>;
-    isDarkMode: boolean;
+    chartsThemeService: ChartsPluginSetup['theme'];
     onClickValue: (data: LensFilterEvent['data']) => void;
   }
 ) {
   const [firstTable] = Object.values(props.data.tables);
   const formatters: Record<string, ReturnType<FormatFactory>> = {};
 
-  const { chartTheme, isDarkMode, onClickValue } = props;
+  const { chartsThemeService, onClickValue } = props;
   const {
     shape,
     groups,
@@ -60,6 +59,9 @@ export function PieComponent(
     percentDecimals,
     hideLabels,
   } = props.args;
+  const isDarkMode = chartsThemeService.useDarkMode();
+  const chartTheme = chartsThemeService.useChartsTheme();
+  const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
 
   if (!hideLabels) {
     firstTable.columns.forEach((column) => {
@@ -245,6 +247,8 @@ export function PieComponent(
 
             onClickValue(desanitizeFilterContext(context));
           }}
+          theme={chartTheme}
+          baseTheme={chartBaseTheme}
         />
         <Partition
           id={shape}

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

@@ -11,12 +11,19 @@ import { ExpressionsSetup, ExpressionsStart } from 'src/plugins/expressions/publ
 import { VisualizationsSetup } from 'src/plugins/visualizations/public';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { KibanaLegacySetup } from 'src/plugins/kibana_legacy/public';
+import { ChartsPluginSetup } from '../../../../src/plugins/charts/public';
 import { EditorFrameService } from './editor_frame_service';
-import { IndexPatternDatasource } from './indexpattern_datasource';
-import { XyVisualization } from './xy_visualization';
-import { MetricVisualization } from './metric_visualization';
-import { DatatableVisualization } from './datatable_visualization';
-import { PieVisualization } from './pie_visualization';
+import {
+  IndexPatternDatasource,
+  IndexPatternDatasourceSetupPlugins,
+} from './indexpattern_datasource';
+import { XyVisualization, XyVisualizationPluginSetupPlugins } from './xy_visualization';
+import { MetricVisualization, MetricVisualizationPluginSetupPlugins } from './metric_visualization';
+import {
+  DatatableVisualization,
+  DatatableVisualizationPluginSetupPlugins,
+} from './datatable_visualization';
+import { PieVisualization, PieVisualizationPluginSetupPlugins } from './pie_visualization';
 import { stopReportManager } from './lens_ui_telemetry';
 import { AppNavLinkStatus } from '../../../../src/core/public';
 
@@ -33,6 +40,7 @@ export interface LensPluginSetupDependencies {
   data: DataPublicPluginSetup;
   embeddable?: EmbeddableSetup;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
 }
 
 export interface LensPluginStartDependencies {
@@ -63,20 +71,32 @@ export class LensPlugin {
 
   setup(
     core: CoreSetup<LensPluginStartDependencies, void>,
-    { kibanaLegacy, expressions, data, embeddable, visualizations }: LensPluginSetupDependencies
+    {
+      kibanaLegacy,
+      expressions,
+      data,
+      embeddable,
+      visualizations,
+      charts,
+    }: LensPluginSetupDependencies
   ) {
     const editorFrameSetupInterface = this.editorFrameService.setup(core, {
       data,
       embeddable,
       expressions,
     });
-    const dependencies = {
+    const dependencies: IndexPatternDatasourceSetupPlugins &
+      XyVisualizationPluginSetupPlugins &
+      DatatableVisualizationPluginSetupPlugins &
+      MetricVisualizationPluginSetupPlugins &
+      PieVisualizationPluginSetupPlugins = {
       expressions,
       data,
       editorFrame: editorFrameSetupInterface,
       formatFactory: core
         .getStartServices()
         .then(([_, { data: dataStart }]) => dataStart.fieldFormats.deserialize),
+      chartsThemeService: charts.theme,
     };
     this.indexpatternDatasource.setup(core, dependencies);
     this.xyVisualization.setup(core, dependencies);

x-pack/plugins/lens/public/xy_visualization/index.ts

@@ -13,11 +13,13 @@ import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
 import { legendConfig, xConfig, layerConfig } from './types';
 import { EditorFrameSetup, FormatFactory } from '../types';
+import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
   formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
+  chartsThemeService: ChartsPluginSetup['theme'];
 }
 
 function getTimeZone(uiSettings: IUiSettingsClient) {
@@ -34,7 +36,12 @@ export class XyVisualization {
 
   setup(
     core: CoreSetup,
-    { expressions, formatFactory, editorFrame }: XyVisualizationPluginSetupPlugins
+    {
+      expressions,
+      formatFactory,
+      editorFrame,
+      chartsThemeService,
+    }: XyVisualizationPluginSetupPlugins
   ) {
     expressions.registerFunction(() => legendConfig);
     expressions.registerFunction(() => xConfig);
@@ -44,9 +51,7 @@ export class XyVisualization {
     expressions.registerRenderer(
       getXyChartRenderer({
         formatFactory,
-        chartTheme: core.uiSettings.get<boolean>('theme:darkMode')
-          ? EUI_CHARTS_THEME_DARK.theme
-          : EUI_CHARTS_THEME_LIGHT.theme,
+        chartsThemeService,
         timeZone: getTimeZone(core.uiSettings),
         histogramBarTarget: core.uiSettings.get<number>(UI_SETTINGS.HISTOGRAM_BAR_TARGET),
       })