From 841bf7368417a1519bfeff20749a6bf44100bcb2 Mon Sep 17 00:00:00 2001 From: "elastic-renovate-prod[bot]" <174716857+elastic-renovate-prod[bot]@users.noreply.github.com> Date: Thu, 19 Dec 2024 18:34:50 +0100 Subject: [PATCH] Update dependency @elastic/charts to v68.0.4 (main) (#203955) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | patch | [`68.0.3` -> `68.0.4`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/68.0.3/68.0.4) | This version of charts exports a helper function to correct an issue with the chart background color for the new Borealis theme. In addition to this we created a simplified hook `useElasticChartsTheme` from the `@kbn/charts-theme` package which reads the `euiTheme`. ```diff -import { Chart, Settings, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { Chart, Settings } from '@elastic/charts'; -import { useEuiTheme } from '@elastic/eui'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; export function MyComponent() { - const euiTheme = useEuiTheme(); - const baseTheme = euiTheme.colorMode === 'LIGHT' ? LIGHT_THEME : DARK_THEME; + const baseTheme = useElasticChartsTheme(); return ( {/* ... */} ) } ``` --- ### Release Notes
elastic/elastic-charts (@​elastic/charts) ### [`v68.0.4`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6804-2024-12-11) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v68.0.3...v68.0.4) ##### Bug Fixes - **xy:** compute per series and global minPointsDistance ([#​2571](https://togithub.com/elastic/elastic-charts/issues/2571)) ([8dae2c1](https://togithub.com/elastic/elastic-charts/commit/8dae2c1f4c99146aa757b2d3eec9d72846248cc7)) ##### Performance Improvements - fix unnecessary re-render ([#​2573](https://togithub.com/elastic/elastic-charts/issues/2573)) ([feacfd6](https://togithub.com/elastic/elastic-charts/commit/feacfd6247b9580a8d32bc5d6284329b2035c1ba))
--- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://togithub.com/renovatebot/renovate). --------- Co-authored-by: elastic-renovate-prod[bot] <174716857+elastic-renovate-prod[bot]@users.noreply.github.com> Co-authored-by: nickofthyme Co-authored-by: adcoelho Co-authored-by: Marco Vettorello Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .github/CODEOWNERS | 1 + package.json | 3 ++- .../components/views_stats/views_chart.tsx | 18 +++++++------- .../content_insights_public/tsconfig.json | 1 + packages/kbn-charts-theme/README.md | 24 +++++++++++++++++++ packages/kbn-charts-theme/index.ts | 23 ++++++++++++++++++ packages/kbn-charts-theme/jest.config.js | 14 +++++++++++ packages/kbn-charts-theme/kibana.jsonc | 5 ++++ packages/kbn-charts-theme/package.json | 6 +++++ packages/kbn-charts-theme/tsconfig.json | 19 +++++++++++++++ .../public/services/theme/theme.test.tsx | 2 +- tsconfig.base.json | 2 ++ .../public/app/components/chart_panel.tsx | 9 ++++--- .../plugins/private/data_usage/tsconfig.json | 1 + .../memory_usage/memory_tree_map/tree_map.tsx | 20 ++++------------ .../platform/plugins/shared/ml/tsconfig.json | 1 + .../ui_components/chart_preview/index.tsx | 8 +++---- .../distribution/index.tsx | 9 ++++--- .../observability_solution/apm/tsconfig.json | 1 + .../alert_details_app_section/index.tsx | 7 +++--- .../infra/tsconfig.json | 3 ++- .../public/hooks/use_chart_theme.tsx | 9 ++++--- .../observability_shared/tsconfig.json | 1 + .../.storybook/decorator.tsx | 7 ++++-- .../plugins/triggers_actions_ui/tsconfig.json | 3 ++- .../public/hooks/use_chart_theme.ts | 8 +++---- .../tsconfig.json | 1 + .../overview/overview/metric_item.tsx | 5 ++-- .../waterfall/waterfall_bar_chart.tsx | 4 ++-- .../waterfall/waterfall_chart_fixed_axis.tsx | 4 ++-- .../public/hooks/use_base_chart_theme.ts | 18 -------------- .../plugins/synthetics/tsconfig.json | 3 ++- .../components/waterfall_bar_chart.tsx | 4 ++-- .../components/waterfall_chart_fixed_axis.tsx | 4 ++-- .../hooks/use_base_chart_theme.ts | 17 ------------- .../plugins/uptime/tsconfig.json | 1 + .../migration_result_panel.tsx | 12 ++++------ .../plugins/security_solution/tsconfig.json | 3 ++- yarn.lock | 12 ++++++---- 39 files changed, 174 insertions(+), 119 deletions(-) create mode 100644 packages/kbn-charts-theme/README.md create mode 100644 packages/kbn-charts-theme/index.ts create mode 100644 packages/kbn-charts-theme/jest.config.js create mode 100644 packages/kbn-charts-theme/kibana.jsonc create mode 100644 packages/kbn-charts-theme/package.json create mode 100644 packages/kbn-charts-theme/tsconfig.json delete mode 100644 x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts delete mode 100644 x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a6d5f85891f62..655c8ef55079e 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/package.json b/package.json index 0b62d48e35a04..fe6bf82ad0350 100644 --- a/package.json +++ b/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", diff --git a/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx b/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx index f05f8c2dbca69..c207f8fb18e19 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx +++ b/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,8 +29,7 @@ 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; @@ -35,11 +37,7 @@ export const ViewsChart = ({ data }: { data: Array<[week: number, views: number] return ( - + + + {/* ... */} + + ) +} +``` \ No newline at end of file diff --git a/packages/kbn-charts-theme/index.ts b/packages/kbn-charts-theme/index.ts new file mode 100644 index 0000000000000..933af3cc77257 --- /dev/null +++ b/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] + ); +} diff --git a/packages/kbn-charts-theme/jest.config.js b/packages/kbn-charts-theme/jest.config.js new file mode 100644 index 0000000000000..9216db5e10b6b --- /dev/null +++ b/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: ['/packages/kbn-charts-theme'], +}; diff --git a/packages/kbn-charts-theme/kibana.jsonc b/packages/kbn-charts-theme/kibana.jsonc new file mode 100644 index 0000000000000..b43497bc92ba9 --- /dev/null +++ b/packages/kbn-charts-theme/kibana.jsonc @@ -0,0 +1,5 @@ +{ + "type": "shared-common", + "id": "@kbn/charts-theme", + "owner": "@elastic/kibana-visualizations" +} diff --git a/packages/kbn-charts-theme/package.json b/packages/kbn-charts-theme/package.json new file mode 100644 index 0000000000000..1aa732346ed3b --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/kbn-charts-theme/tsconfig.json b/packages/kbn-charts-theme/tsconfig.json new file mode 100644 index 0000000000000..87f865132f4b4 --- /dev/null +++ b/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": [] +} diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx index df0acfbede1cf..b478dc284d0d6 100644 --- a/src/plugins/charts/public/services/theme/theme.test.tsx +++ b/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(); diff --git a/tsconfig.base.json b/tsconfig.base.json index 10c2066c09866..744538cf60313 100644 --- a/tsconfig.base.json +++ b/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"], diff --git a/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx b/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx index 9a7700a5de828..464c23d28fbee 100644 --- a/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx +++ b/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx @@ -6,7 +6,7 @@ */ import React, { useCallback, useMemo } from 'react'; -import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui'; +import { EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui'; import { Chart, Axis, @@ -14,10 +14,9 @@ import { 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 = ({ 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 = ({ = ({ 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(); diff --git a/x-pack/platform/plugins/shared/ml/tsconfig.json b/x-pack/platform/plugins/shared/ml/tsconfig.json index dce8710d648f3..4d5a3668403eb 100644 --- a/x-pack/platform/plugins/shared/ml/tsconfig.json +++ b/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", ] } diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx index 0136fcfb88f39..c895be7294a2c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx +++ b/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} /> String(threshold); const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) => { const { logsShared } = useKibanaContextForPlugin().services; const theme = useTheme(); + const baseTheme = useElasticChartsTheme(); const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]); const alertEnd = alert.fields[ALERT_END] ? moment(alert.fields[ALERT_END]).valueOf() : undefined; const interval = `${rule.params.timeSize}${rule.params.timeUnit}`; @@ -93,7 +94,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) => { const themeOverrides: PartialTheme = { diff --git a/x-pack/plugins/observability_solution/observability_shared/tsconfig.json b/x-pack/plugins/observability_solution/observability_shared/tsconfig.json index 15ae8d34c7f55..84c98161d5d46 100644 --- a/x-pack/plugins/observability_solution/observability_shared/tsconfig.json +++ b/x-pack/plugins/observability_solution/observability_shared/tsconfig.json @@ -46,6 +46,7 @@ "@kbn/es-query", "@kbn/serverless", "@kbn/data-views-plugin", + "@kbn/charts-theme", "@kbn/deeplinks-observability", ], "exclude": ["target/**/*", ".storybook/**/*.js"] diff --git a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx index 8947cf9f6bbe8..fcaf0ce7597ce 100644 --- a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx +++ b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx @@ -15,7 +15,7 @@ import { KibanaThemeProvider, KibanaServices } from '@kbn/kibana-react-plugin/pu import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import type { NotificationsStart, ApplicationStart } from '@kbn/core/public'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { DARK_THEME, LIGHT_THEME } from '@elastic/charts'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { KibanaContextProvider } from '../public/common/lib/kibana'; import { ExperimentalFeaturesService } from '../public/common/experimental_features_service'; import { getHttp } from './context/http'; @@ -74,6 +74,9 @@ export const StorybookContextDecorator: FC @@ -99,7 +102,7 @@ export const StorybookContextDecorator: FC (darkMode ? DARK_THEME : LIGHT_THEME), + useChartsBaseTheme: () => baseTheme, useSparklineOverrides: () => ({ lineSeriesStyle: { point: { diff --git a/x-pack/plugins/triggers_actions_ui/tsconfig.json b/x-pack/plugins/triggers_actions_ui/tsconfig.json index 7004ad1b1b08c..2fd21149f4e8f 100644 --- a/x-pack/plugins/triggers_actions_ui/tsconfig.json +++ b/x-pack/plugins/triggers_actions_ui/tsconfig.json @@ -74,7 +74,8 @@ "@kbn/core-application-browser", "@kbn/cloud-plugin", "@kbn/response-ops-rule-form", - "@kbn/core-user-profile-browser-mocks" + "@kbn/core-user-profile-browser-mocks", + "@kbn/charts-theme" ], "exclude": ["target/**/*"] } diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts index 65873a13de506..063d4c4eef5f4 100644 --- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts +++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts @@ -5,14 +5,12 @@ * 2.0. */ -import { DARK_THEME, LIGHT_THEME, PartialTheme } from '@elastic/charts'; -import { useEuiTheme } from '@elastic/eui'; +import { PartialTheme } from '@elastic/charts'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { useMemo } from 'react'; export function useChartTheme() { - const theme = useEuiTheme(); - - const baseTheme = theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME; + const baseTheme = useElasticChartsTheme(); return useMemo(() => { const themeOverrides: PartialTheme = { diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json index af075027d9cd4..212a36a502441 100644 --- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json +++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json @@ -80,6 +80,7 @@ "@kbn/observability-ai-common", "@kbn/llm-tasks-plugin", "@kbn/product-doc-common", + "@kbn/charts-theme", "@kbn/ai-assistant-icon", ], "exclude": [ diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx index 37836f6ef0711..c8c266db63736 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx @@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts'; import { EuiPanel, EuiSpacer } from '@elastic/eui'; -import { DARK_THEME } from '@elastic/charts'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { useTheme } from '@kbn/observability-shared-plugin/public'; import moment from 'moment'; import { useSelector, useDispatch } from 'react-redux'; @@ -132,8 +132,7 @@ export const MetricItem = ({ }); } }} - // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md - baseTheme={DARK_THEME} + baseTheme={useElasticChartsTheme()} locale={i18n.getLocale()} /> { - const baseChartTheme = useBaseChartTheme(); + const baseChartTheme = useElasticChartsTheme(); const { euiTheme } = useEuiTheme(); const { onElementClick, onProjectionClick } = useWaterfallContext(); const handleElementClick = useMemo(() => onElementClick, [onElementClick]); diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx index 6ec71ee66f1a4..1d496c0f1e48b 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx @@ -21,7 +21,7 @@ import { } from '@elastic/charts'; import { useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { WaterfallChartFixedAxisContainer } from './styles'; import { WaterfallChartMarkers } from './waterfall_marker/waterfall_markers'; @@ -32,7 +32,7 @@ interface Props { } export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => { - const baseChartTheme = useBaseChartTheme(); + const baseChartTheme = useElasticChartsTheme(); const { euiTheme } = useEuiTheme(); return ( diff --git a/x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts b/x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts deleted file mode 100644 index 413081b998aec..0000000000000 --- a/x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; -import { useMemo } from 'react'; -import { useDarkMode } from '@kbn/kibana-react-plugin/public'; - -export const useBaseChartTheme = (): Theme => { - const darkMode = useDarkMode(false); - - return useMemo(() => { - return darkMode ? DARK_THEME : LIGHT_THEME; - }, [darkMode]); -}; diff --git a/x-pack/solutions/observability/plugins/synthetics/tsconfig.json b/x-pack/solutions/observability/plugins/synthetics/tsconfig.json index ece2a3934e60c..075ef1d3c6443 100644 --- a/x-pack/solutions/observability/plugins/synthetics/tsconfig.json +++ b/x-pack/solutions/observability/plugins/synthetics/tsconfig.json @@ -107,7 +107,8 @@ "@kbn/core-rendering-browser", "@kbn/index-lifecycle-management-common-shared", "@kbn/core-http-server-utils", - "@kbn/apm-data-access-plugin" + "@kbn/apm-data-access-plugin", + "@kbn/charts-theme" ], "exclude": ["target/**/*"] } diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx index 57b20eb3a179c..8f2c5dcf05da5 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx @@ -21,9 +21,9 @@ import { Tooltip, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { useAppFixedViewport } from '@kbn/core-rendering-browser'; import { BAR_HEIGHT } from './constants'; -import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme'; import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles'; import { useWaterfallContext, WaterfallData } from '..'; import { WaterfallTooltipContent } from './waterfall_tooltip_content'; @@ -76,7 +76,7 @@ export const WaterfallBarChart = ({ barStyleAccessor, index, }: Props) => { - const baseChartTheme = useBaseChartTheme(); + const baseChartTheme = useElasticChartsTheme(); const { onElementClick, onProjectionClick } = useWaterfallContext(); const handleElementClick = useMemo(() => onElementClick, [onElementClick]); const handleProjectionClick = useMemo(() => onProjectionClick, [onProjectionClick]); diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx index 25d9f554f9fa4..4038b2f2d731e 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx @@ -20,7 +20,7 @@ import { Tooltip, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; -import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { WaterfallChartFixedAxisContainer } from './styles'; import { WaterfallChartMarkers } from './waterfall_markers'; @@ -31,7 +31,7 @@ interface Props { } export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => { - const baseChartTheme = useBaseChartTheme(); + const baseChartTheme = useElasticChartsTheme(); return ( diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts deleted file mode 100644 index 007d463c63e1b..0000000000000 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { useMemo } from 'react'; -import { useDarkMode } from '@kbn/kibana-react-plugin/public'; -import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; - -export const useBaseChartTheme = (): Theme => { - const darkMode = useDarkMode(); - return useMemo(() => { - return darkMode ? DARK_THEME : LIGHT_THEME; - }, [darkMode]); -}; diff --git a/x-pack/solutions/observability/plugins/uptime/tsconfig.json b/x-pack/solutions/observability/plugins/uptime/tsconfig.json index 6761601deb208..75d0e1521db38 100644 --- a/x-pack/solutions/observability/plugins/uptime/tsconfig.json +++ b/x-pack/solutions/observability/plugins/uptime/tsconfig.json @@ -78,6 +78,7 @@ "@kbn/deeplinks-observability", "@kbn/ebt-tools", "@kbn/core-rendering-browser", + "@kbn/charts-theme", "@kbn/charts-plugin", ], "exclude": ["target/**/*"] diff --git a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx index cce11abcd8eb7..c8f12d4374834 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx @@ -16,11 +16,11 @@ import { EuiBasicTable, EuiHealth, EuiText, - useEuiTheme, } from '@elastic/eui'; -import { Chart, BarSeries, Settings, ScaleType, DARK_THEME, LIGHT_THEME } from '@elastic/charts'; +import { Chart, BarSeries, Settings, ScaleType } from '@elastic/charts'; import { SecurityPageName } from '@kbn/security-solution-navigation'; import { AssistantIcon } from '@kbn/ai-assistant-icon'; +import { useElasticChartsTheme } from '@kbn/charts-theme'; import { PanelText } from '../../../../common/components/panel_text'; import { convertTranslationResultIntoText, @@ -120,7 +120,7 @@ MigrationResultPanel.displayName = 'MigrationResultPanel'; const TranslationResultsChart = React.memo<{ translationStats: RuleMigrationTranslationStats; }>(({ translationStats }) => { - const { colorMode } = useEuiTheme(); + const baseTheme = useElasticChartsTheme(); const translationResultColors = useResultVisColors(); const data = [ { @@ -154,11 +154,7 @@ const TranslationResultsChart = React.memo<{ return ( - +