Update dependency @elastic/charts to v68.0.4 (main)

.github/CODEOWNERS

@@ -296,6 +296,7 @@ packages/kbn-capture-oas-snapshot-cli @elastic/kibana-core
 packages/kbn-cases-components @elastic/response-ops
 packages/kbn-cbor @elastic/kibana-operations
 packages/kbn-chart-icons @elastic/kibana-visualizations
+packages/kbn-charts-theme @elastic/kibana-visualizations
 packages/kbn-check-mappings-update-cli @elastic/kibana-core
 packages/kbn-check-prod-native-modules-cli @elastic/kibana-operations
 packages/kbn-ci-stats-core @elastic/kibana-operations

package.json

@@ -111,7 +111,7 @@
     "@elastic/apm-rum": "^5.16.1",
     "@elastic/apm-rum-core": "^5.21.1",
     "@elastic/apm-rum-react": "^2.0.3",
-    "@elastic/charts": "68.0.3",
+    "@elastic/charts": "68.0.4",
     "@elastic/datemath": "5.0.3",
     "@elastic/ebt": "^1.1.1",
     "@elastic/ecs": "^8.11.1",
@@ -209,6 +209,7 @@
     "@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
     "@kbn/chart-icons": "link:packages/kbn-chart-icons",
     "@kbn/charts-plugin": "link:src/plugins/charts",
+    "@kbn/charts-theme": "link:packages/kbn-charts-theme",
     "@kbn/cloud": "link:packages/cloud",
     "@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
     "@kbn/cloud-data-migration-plugin": "link:x-pack/platform/plugins/private/cloud_integrations/cloud_data_migration",

packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx

@@ -8,11 +8,14 @@
  */
 
 import React from 'react';
-import { Chart, Settings, DARK_THEME, LIGHT_THEME, BarSeries, Axis } from '@elastic/charts';
-import { formatDate, useEuiTheme } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 
+import { Chart, Settings, BarSeries, Axis } from '@elastic/charts';
+import { formatDate } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+
 const dateFormatter = (d: Date) => formatDate(d, `MM/DD`);
 
 const seriesName = i18n.translate('contentManagement.contentEditor.viewsStats.viewsLabel', {
@@ -26,20 +29,15 @@ const weekOfFormatter = (date: Date) =>
   });
 
 export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]> }) => {
-  const { colorMode } = useEuiTheme();
-
+  const baseTheme = useElasticChartsTheme();
   const momentDow = moment().localeData().firstDayOfWeek(); // configured from advanced settings
   const isoDow = momentDow === 0 ? 7 : momentDow;
 
   const momentTz = moment().tz(); // configured from advanced settings
 
   return (
     <Chart size={{ height: 240 }}>
-      <Settings
-        baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
-        showLegend={false}
-        dow={isoDow}
-      />
+      <Settings baseTheme={baseTheme} showLegend={false} dow={isoDow} />
       <BarSeries
         id="viewsOverTime"
         name={seriesName}

packages/content-management/content_insights/content_insights_public/tsconfig.json

@@ -28,5 +28,6 @@
     "@kbn/core-http-browser",
     "@kbn/content-management-content-insights-server",
     "@kbn/content-management-table-list-view-common",
+    "@kbn/charts-theme",
   ]
 }

packages/kbn-charts-theme/README.md

@@ -0,0 +1,24 @@
+# @kbn/charts-theme
+
+A temporary package to provide a hook for getting `@elastic/charts` theme based on `@elastic/eui` theme.
+
+To be refactored to be consumed from `ElasticChartsProvider`.
+
+```tsx
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+import { Chart, Settings } from '@elastic/charts';
+
+export function MyComponent() {
+  const baseTheme = useElasticChartsTheme();
+
+  return (
+    <Chart>
+      <Settings
+        baseTheme={baseTheme}
+        {/* ... */}
+      />
+      {/* ... */}
+    </Chart>
+  )
+}
+```

packages/kbn-charts-theme/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { type Theme, getChartsTheme } from '@elastic/charts';
+import { useEuiTheme } from '@elastic/eui';
+import { useMemo } from 'react';
+
+/**
+ * A hook used to get the `@elastic/charts` theme based on the current eui theme.
+ */
+export function useElasticChartsTheme(): Theme {
+  const { euiTheme, colorMode } = useEuiTheme();
+  return useMemo(
+    () => getChartsTheme(euiTheme.themeName, colorMode),
+    [colorMode, euiTheme.themeName]
+  );
+}

packages/kbn-charts-theme/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-charts-theme'],
+};

packages/kbn-charts-theme/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/charts-theme",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-charts-theme/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/charts-theme",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}

packages/kbn-charts-theme/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": []
+}

src/plugins/charts/public/services/theme/theme.test.tsx

@@ -74,7 +74,7 @@ describe('ThemeService', () => {
     });
   });
 
-  describe('useBaseChartTheme', () => {
+  describe('useChartsBaseTheme', () => {
     it('updates when the theme setting change', () => {
       setUpMockTheme.theme$ = createTheme$Mock(false);
       const themeService = new ThemeService();

tsconfig.base.json

@@ -144,6 +144,8 @@
       "@kbn/chart-icons/*": ["packages/kbn-chart-icons/*"],
       "@kbn/charts-plugin": ["src/plugins/charts"],
       "@kbn/charts-plugin/*": ["src/plugins/charts/*"],
+      "@kbn/charts-theme": ["packages/kbn-charts-theme"],
+      "@kbn/charts-theme/*": ["packages/kbn-charts-theme/*"],
       "@kbn/check-mappings-update-cli": ["packages/kbn-check-mappings-update-cli"],
       "@kbn/check-mappings-update-cli/*": ["packages/kbn-check-mappings-update-cli/*"],
       "@kbn/check-prod-native-modules-cli": ["packages/kbn-check-prod-native-modules-cli"],

x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx

@@ -6,18 +6,17 @@
  */
 import React, { useCallback, useMemo } from 'react';
 
-import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
 import {
   Chart,
   Axis,
   BarSeries,
   Settings,
   ScaleType,
   niceTimeFormatter,
-  DARK_THEME,
-  LIGHT_THEME,
   LineSeries,
 } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { i18n } from '@kbn/i18n';
 import { LegendAction } from './legend_action';
 import { type MetricTypes, type MetricSeries } from '../../../common/rest_types';
@@ -49,7 +48,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
   popoverOpen,
   togglePopover,
 }) => {
-  const theme = useEuiTheme();
+  const baseTheme = useElasticChartsTheme();
 
   const chartTimestamps = series.flatMap((stream) => stream.data.map((d) => d.x));
 
@@ -97,7 +96,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
         </EuiTitle>
         <Chart size={{ height: 200 }}>
           <Settings
-            theme={theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
+            baseTheme={baseTheme}
             showLegend={true}
             legendPosition="right"
             xDomain={{ min: minTimestamp, max: maxTimestamp }}

x-pack/platform/plugins/private/data_usage/tsconfig.json

@@ -35,6 +35,7 @@
     "@kbn/datemath",
     "@kbn/ui-theme",
     "@kbn/i18n-react",
+    "@kbn/charts-theme",
   ],
   "exclude": ["target/**/*"]
 }

x-pack/platform/plugins/shared/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx

@@ -7,25 +7,18 @@
 
 import type { FC } from 'react';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import {
-  Chart,
-  Settings,
-  Partition,
-  PartitionLayout,
-  DARK_THEME,
-  LIGHT_THEME,
-} from '@elastic/charts';
+import { Chart, Settings, Partition, PartitionLayout } from '@elastic/charts';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiComboBox, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useIsDarkTheme } from '@kbn/ml-kibana-theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import type { MemoryUsageInfo } from '../../../../common/types/trained_models';
 import type { JobType, MlSavedObjectType } from '../../../../common/types/saved_objects';
 import { useTrainedModelsApiService } from '../../services/ml_api_service/trained_models';
 import { LoadingWrapper } from '../../jobs/new_job/pages/components/charts/loading_wrapper';
-import { useFieldFormatter, useMlKibana } from '../../contexts/kibana';
+import { useFieldFormatter } from '../../contexts/kibana';
 
 import { useRefresh } from '../../routing/use_refresh';
 import { getMemoryItemColor } from '../memory_item_colors';
@@ -61,12 +54,7 @@ const TYPE_LABELS_INVERTED = Object.entries(TYPE_LABELS).reduce<Record<MlSavedOb
 );
 
 export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
-  const {
-    services: { theme: themeService },
-  } = useMlKibana();
-  const isDarkTheme = useIsDarkTheme(themeService);
-
-  const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]);
+  const baseTheme = useElasticChartsTheme();
 
   const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures();
 

x-pack/platform/plugins/shared/ml/tsconfig.json

@@ -136,5 +136,6 @@
     "@kbn/core-saved-objects-api-server",
     "@kbn/core-ui-settings-server",
     "@kbn/core-security-server",
+    "@kbn/charts-theme",
   ]
 }

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx

@@ -10,8 +10,6 @@ import {
   Axis,
   BarSeries,
   Chart,
-  LIGHT_THEME,
-  DARK_THEME,
   LineAnnotation,
   Position,
   RectAnnotation,
@@ -22,13 +20,14 @@ import {
   Tooltip,
   niceTimeFormatter,
 } from '@elastic/charts';
-import { COLOR_MODES_STANDARD, EuiSpacer, useEuiTheme } from '@elastic/eui';
+import { EuiSpacer, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { TimeUnitChar } from '@kbn/observability-plugin/common';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { Coordinate } from '../../../../../typings/timeseries';
 import { getTimeZone } from '../../../shared/charts/helper/timezone';
 import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper';
@@ -54,6 +53,7 @@ export function ChartPreview({
   totalGroups,
 }: ChartPreviewProps) {
   const theme = useEuiTheme();
+  const baseTheme = useElasticChartsTheme();
   const thresholdOpacity = 0.3;
   const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
 
@@ -122,7 +122,7 @@ export function ChartPreview({
           legendPosition={'bottom'}
           legendSize={legendSize}
           locale={i18n.getLocale()}
-          theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME}
+          baseTheme={baseTheme}
         />
         <LineAnnotation
           dataValues={[{ dataValue: threshold }]}

x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx

@@ -14,13 +14,12 @@ import {
   ScaleType,
   Settings,
   Tooltip,
-  LIGHT_THEME,
-  DARK_THEME,
   LegendValue,
 } from '@elastic/charts';
-import { EuiTitle, useEuiTheme } from '@elastic/eui';
+import { EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
@@ -41,7 +40,7 @@ interface Props {
 
 export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
   const { core } = useApmPluginContext();
-  const { colorMode } = useEuiTheme();
+  const baseTheme = useElasticChartsTheme();
 
   const { urlParams } = useLegacyUrlParams();
   const { comparisonEnabled } = urlParams;
@@ -96,7 +95,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
             showLegend
             legendValues={[LegendValue.CurrentAndLastValue]}
             legendPosition={Position.Bottom}
-            theme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
+            baseTheme={baseTheme}
             locale={i18n.getLocale()}
           />
           <Axis

x-pack/plugins/observability_solution/apm/tsconfig.json

@@ -129,6 +129,7 @@
     "@kbn/alerting-comparators",
     "@kbn/saved-search-component",
     "@kbn/saved-search-plugin",
+    "@kbn/charts-theme",
     "@kbn/entityManager-plugin",
   ],
   "exclude": ["target/**/*"]