From 57e9f1228f739535124c7fd0225985f364f51ef2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 8 Nov 2023 22:23:26 +0000 Subject: [PATCH 01/30] Update dependency @elastic/charts to v61 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4e4c2441fe9fc..f5172a7365746 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "60.0.0", + "@elastic/charts": "61.0.0", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.0", diff --git a/yarn.lock b/yarn.lock index 68faac71450cc..b0d56d35b484a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@60.0.0": - version "60.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-60.0.0.tgz#088c19debf1db48aed72c84bda51e98e7c291d54" - integrity sha512-oGNdvKhuZ2g2i/k4Zgv5QSUcEu+DOJSlIxV/1a7JBR/uJ2AzpV4uFyrNBUnUkM+CPJvsEn5MYABAzwUwveTgHA== +"@elastic/charts@61.0.0": + version "61.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.0.tgz#8303fb9617b26f95cec731f03cd259da03cce404" + integrity sha512-iqU+I8LXLChZu+c/xs5c4QAQIUZRElYvlSgQaTYX0QyL0UsyYzTw3IHQVwTM0okbYKk0nTY+iBDaM3UUwgODCg== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From ca167d5bbf390ca799fe5819d3f392ce5fb79472 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 18:28:39 -0700 Subject: [PATCH 02/30] fix: metric background breaking change --- .../expression_metric/public/components/metric_vis.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index a0d02562d7623..964c7d4685493 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -327,9 +327,8 @@ export const MetricVis = ({ locale={i18n.getLocale()} theme={[ { - background: { color: 'transparent' }, + background: { color: defaultColor }, metric: { - background: defaultColor, barBackground: euiThemeVars.euiColorLightShade, }, ...chartTheme, From b3f8e2755b974efc781910b7a97d035c3c49c310 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 18:31:52 -0700 Subject: [PATCH 03/30] chore: migrate all current theme usage to legacy, merge eui usages --- .../views/timeseries/utils/theme.test.ts | 20 +++++++++---------- .../views/timeseries/utils/theme.ts | 8 ++++---- .../distribution/index.tsx | 10 ++++------ .../common/components/threshold.stories.tsx | 3 +-- .../common/components/threshold.test.tsx | 3 +-- .../alerting/common/components/threshold.tsx | 2 +- .../alert_details_app_section/index.tsx | 6 +++--- .../single_metric_sparkline.tsx | 6 ++---- .../memory_usage/memory_tree_map/tree_map.tsx | 12 ++++------- .../components/alert_status_indicator.tsx | 6 +++--- .../criterion_preview_chart.tsx | 4 ++-- .../components/custom_threshold.stories.tsx | 3 +-- .../components/custom_threshold.test.tsx | 3 +-- .../components/custom_threshold.tsx | 2 +- .../metrics/metric_with_sparkline.tsx | 12 ++++------- .../public/hooks/use_chart_theme.tsx | 7 ++----- .../common/components/charts/common.test.tsx | 6 +++--- .../common/components/charts/common.tsx | 4 ++-- .../components/charts/donutchart.test.tsx | 6 +++--- .../network_timings_donut.tsx | 5 +++-- .../contexts/synthetics_theme_context.tsx | 3 --- .../public/hooks/use_chart_theme.ts | 4 ++-- .../mock/alert_summary_widget/index.ts | 2 -- .../sections/alert_summary_widget/types.ts | 2 +- .../contexts/uptime_theme_context.tsx | 3 --- .../legacy_uptime/hooks/use_chart_theme.ts | 4 ++-- 26 files changed, 60 insertions(+), 86 deletions(-) diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts index 0e7dbb81233e2..489b5c6c14510 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts @@ -7,27 +7,27 @@ */ import { getBaseTheme } from './theme'; -import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; describe('TSVB theme', () => { it('should return the basic themes if no bg color is specified', () => { // use original dark/light theme - expect(getBaseTheme(LIGHT_THEME)).toEqual(LIGHT_THEME); - expect(getBaseTheme(DARK_THEME)).toEqual(DARK_THEME); + expect(getBaseTheme(LEGACY_LIGHT_THEME)).toEqual(LEGACY_LIGHT_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME)).toEqual(LEGACY_DARK_THEME); // discard any wrong/missing bg color - expect(getBaseTheme(DARK_THEME, null)).toEqual(DARK_THEME); - expect(getBaseTheme(DARK_THEME, '')).toEqual(DARK_THEME); - expect(getBaseTheme(DARK_THEME, undefined)).toEqual(DARK_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME, null)).toEqual(LEGACY_DARK_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME, '')).toEqual(LEGACY_DARK_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME, undefined)).toEqual(LEGACY_DARK_THEME); }); it('should return a highcontrast color theme for a different background', () => { // red use a near full-black color - expect(getBaseTheme(LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)'); + expect(getBaseTheme(LEGACY_LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)'); // violet increased the text color to full white for higer contrast - expect(getBaseTheme(LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)'); + expect(getBaseTheme(LEGACY_LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)'); - // light yellow, prefer the LIGHT_THEME fill color because already with a good contrast - expect(getBaseTheme(LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333'); + // light yellow, prefer the LEGACY_LIGHT_THEME fill color because already with a good contrast + expect(getBaseTheme(LEGACY_LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333'); }); }); diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts index 82567f8e8223e..6c1142d8b7e0f 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts @@ -8,7 +8,7 @@ // @ts-ignore import colorJS from 'color'; -import { Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { Theme, LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; function computeRelativeLuminosity(rgb: string) { return colorJS(rgb).luminosity(); @@ -96,11 +96,11 @@ export function getBaseTheme(baseTheme: Theme, bgColor?: string | null): Theme { } const bgLuminosity = computeRelativeLuminosity(bgColor); - const mainTheme = bgLuminosity <= 0.179 ? DARK_THEME : LIGHT_THEME; + const mainTheme = bgLuminosity <= 0.179 ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; const color = findBestContrastColor( bgColor, - LIGHT_THEME.axes.axisTitle.fill, - DARK_THEME.axes.axisTitle.fill + LEGACY_LIGHT_THEME.axes.axisTitle.fill, + LEGACY_DARK_THEME.axes.axisTitle.fill ); return { ...mainTheme, diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx index 2c4c9eec27e26..3d451cf485393 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx @@ -14,12 +14,10 @@ import { ScaleType, Settings, Tooltip, + LIGHT_THEME, + DARK_THEME, } from '@elastic/charts'; import { EuiTitle } from '@elastic/eui'; -import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, -} from '@elastic/eui/dist/eui_charts_theme'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; @@ -103,8 +101,8 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { legendPosition={Position.Bottom} theme={ theme.darkMode - ? EUI_CHARTS_THEME_DARK.theme - : EUI_CHARTS_THEME_LIGHT.theme + ? DARK_THEME + : LIGHT_THEME } locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx b/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx index f933c5129a691..73361902799c6 100644 --- a/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx +++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ComponentMeta } from '@storybook/react'; import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { Comparator } from '../../../../common/alerting/metrics'; import { Props, Threshold as Component } from './threshold'; @@ -30,7 +29,7 @@ export default { } as ComponentMeta; const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx b/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx index fd50c54b65f61..b78216b78f60c 100644 --- a/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx +++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx @@ -6,7 +6,6 @@ */ import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { Comparator } from '../../../../common/alerting/metrics'; import { render } from '@testing-library/react'; import { Props, Threshold } from './threshold'; @@ -15,7 +14,7 @@ import React from 'react'; describe('Threshold', () => { const renderComponent = (props: Partial = {}) => { const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx index 79e065ae7b1f3..d9ca396f9aa33 100644 --- a/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx @@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n'; import { Comparator } from '../../../../common/alerting/metrics'; export interface ChartProps { - theme: PartialTheme; + theme?: PartialTheme; baseTheme: Theme; } diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx index 15b30ab3b79cf..415624ef4dfab 100644 --- a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx +++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx @@ -6,7 +6,7 @@ */ import React, { useEffect } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; -import { LIGHT_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME } from '@elastic/charts'; import { EuiPanel } from '@elastic/eui'; import { ALERT_CONTEXT, @@ -126,7 +126,7 @@ const AlertDetailsAppSection = ({ [ // localThemeOverride, EUI_SPARKLINE_THEME_PARTIAL, - isDarkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, + isDarkMode ? DARK_THEME : LIGHT_THEME, ], [isDarkMode] ); diff --git a/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx b/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx index 0cf65ec6d0949..62e8e75a5a0d6 100644 --- a/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx +++ b/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx @@ -11,10 +11,9 @@ import { Settings, Partition, PartitionLayout, - LIGHT_THEME, DARK_THEME, + LIGHT_THEME, } from '@elastic/charts'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common'; import { EuiComboBox, EuiComboBoxOptionOption, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -65,11 +64,8 @@ export const JobMemoryTreeMap: FC = ({ node, type, height }) => { } = useMlKibana(); const isDarkTheme = useIsDarkTheme(themeService); - const { theme, baseTheme } = useMemo( - () => - isDarkTheme - ? { theme: EUI_CHARTS_THEME_DARK, baseTheme: DARK_THEME } - : { theme: EUI_CHARTS_THEME_LIGHT, baseTheme: LIGHT_THEME }, + const baseTheme = useMemo( + () => isDarkTheme ? DARK_THEME : LIGHT_THEME, [isDarkTheme] ); @@ -173,7 +169,7 @@ export const JobMemoryTreeMap: FC = ({ node, type, height }) => { {data.length ? ( - + id="memoryUsageTreeMap" data={data} diff --git a/x-pack/plugins/observability/public/components/alert_status_indicator.tsx b/x-pack/plugins/observability/public/components/alert_status_indicator.tsx index 8090e26d4596f..9dcdbe660e6fe 100644 --- a/x-pack/plugins/observability/public/components/alert_status_indicator.tsx +++ b/x-pack/plugins/observability/public/components/alert_status_indicator.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiHealth, EuiText } from '@elastic/eui'; import { ALERT_STATUS_ACTIVE, AlertStatus } from '@kbn/rule-data-utils'; -import { LIGHT_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME } from '@elastic/charts'; interface AlertStatusIndicatorProps { alertStatus: AlertStatus; @@ -19,7 +19,7 @@ interface AlertStatusIndicatorProps { export function AlertStatusIndicator({ alertStatus, textSize = 'xs' }: AlertStatusIndicatorProps) { if (alertStatus === ALERT_STATUS_ACTIVE) { return ( - + {i18n.translate('xpack.observability.alertsTGrid.statusActiveDescription', { defaultMessage: 'Active', })} @@ -28,7 +28,7 @@ export function AlertStatusIndicator({ alertStatus, textSize = 'xs' }: AlertStat } return ( - + {i18n.translate('xpack.observability.alertsTGrid.statusRecoveredDescription', { defaultMessage: 'Recovered', diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx index a5ed7cd38c580..b04bdc6b0c0d3 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx @@ -7,7 +7,7 @@ import React, { useMemo } from 'react'; import { niceTimeFormatter } from '@elastic/charts'; -import { Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { Theme, LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { EuiLoadingChart, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -76,7 +76,7 @@ export const getDomain = (series: Series, stacked: boolean = false) => { // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md export const getChartTheme = (isDarkMode: boolean): Theme => { - return isDarkMode ? DARK_THEME : LIGHT_THEME; + return isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; }; export const EmptyContainer: React.FC = ({ children }) => ( diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx index 8e1e6b590e601..6552f2a7f704b 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ComponentMeta } from '@storybook/react'; import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { Comparator } from '../../../../common/custom_threshold_rule/types'; import { Props, Threshold as Component } from './custom_threshold'; @@ -31,7 +30,7 @@ export default { } as ComponentMeta; const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx index a1d61e0ce28cd..9c3e0aa88b69e 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx @@ -6,7 +6,6 @@ */ import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { render } from '@testing-library/react'; import { Props, Threshold } from './custom_threshold'; @@ -16,7 +15,7 @@ import { Comparator } from '../../../../common/custom_threshold_rule/types'; describe('Threshold', () => { const renderComponent = (props: Partial = {}) => { const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx index 0dad6a2d98a18..f38cab724a451 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx @@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n'; import { Comparator } from '../../../../common/custom_threshold_rule/types'; export interface ChartProps { - theme: PartialTheme; + theme?: PartialTheme; baseTheme: Theme; } diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx index bbd3b9acd224c..5404b08bed376 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx @@ -5,13 +5,11 @@ * 2.0. */ -import { Chart, Settings, AreaSeries, TooltipType, Tooltip } from '@elastic/charts'; +import { Chart, Settings, AreaSeries, TooltipType, Tooltip, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiTextColor } from '@elastic/eui'; import React, { useContext } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, EUI_SPARKLINE_THEME_PARTIAL, } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeContext } from 'styled-components'; @@ -29,10 +27,8 @@ interface Props { export function MetricWithSparkline({ id, formatter, value, timeseries, color }: Props) { const themeCTX = useContext(ThemeContext); const isDarkTheme = (themeCTX && themeCTX.darkMode) || false; - const theme = [ - EUI_SPARKLINE_THEME_PARTIAL, - isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, - ]; + const theme = [EUI_SPARKLINE_THEME_PARTIAL]; + const baseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME; const colors = theme[1].colors?.vizColors ?? []; @@ -53,7 +49,7 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }: - + [ diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx index 572706719eb88..71c3c0793d72b 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx @@ -19,7 +19,7 @@ import { WrappedByAutoSizer, useThemes, } from './common'; -import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; jest.mock('../../lib/kibana'); @@ -181,14 +181,14 @@ describe('checkIfAllValuesAreZero', () => { (useUiSetting as jest.Mock).mockImplementation(() => false); const { result } = renderHook(() => useThemes()); - expect(result.current.baseTheme).toBe(LIGHT_THEME); + expect(result.current.baseTheme).toBe(LEGACY_LIGHT_THEME); }); it('should return dark baseTheme when isDarkMode true', () => { (useUiSetting as jest.Mock).mockImplementation(() => true); const { result } = renderHook(() => useThemes()); - expect(result.current.baseTheme).toBe(DARK_THEME); + expect(result.current.baseTheme).toBe(LEGACY_DARK_THEME); }); }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx index bf8f561cdfdf3..5bc211bc6f375 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx @@ -17,7 +17,7 @@ import type { BarSeriesStyle, Theme, } from '@elastic/charts'; -import { DARK_THEME, LIGHT_THEME, Position } from '@elastic/charts'; +import { LEGACY_DARK_THEME, LEGACY_LIGHT_THEME, Position } from '@elastic/charts'; import { EuiFlexGroup } from '@elastic/eui'; import React from 'react'; import styled from 'styled-components'; @@ -115,7 +115,7 @@ const theme: PartialTheme = { export const useThemes = (): { baseTheme: Theme; theme: PartialTheme } => { const isDarkMode = useUiSetting(DEFAULT_DARK_MODE); // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md - const baseTheme = isDarkMode ? DARK_THEME : LIGHT_THEME; + const baseTheme = isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; return { baseTheme, theme, diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx index 18313b002b223..e29b72fbc0004 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; -import { LIGHT_THEME, Partition, Settings } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME, Partition, Settings } from '@elastic/charts'; import { parsedMockAlertsData } from '../../../overview/components/detection_response/alerts_by_status/mock_data'; import { render } from '@testing-library/react'; import type { DonutChartProps } from './donutchart'; @@ -47,7 +47,7 @@ jest.mock('./draggable_legend', () => { }; }); -const mockBaseTheme = LIGHT_THEME; +const mockBaseTheme = LEGACY_LIGHT_THEME; jest.mock('./common', () => { return { useThemes: jest.fn(() => ({ @@ -93,7 +93,7 @@ describe('DonutChart', () => { expect(container.querySelector(`[data-test-subj="es-chart-settings"]`)).toBeInTheDocument(); const settingsProps = (Settings as jest.Mock).mock.calls[0][0]; - expect(settingsProps.baseTheme).toEqual(LIGHT_THEME); + expect(settingsProps.baseTheme).toEqual(LEGACY_LIGHT_THEME); expect(settingsProps.theme[0]).toEqual({ chartMargins: { bottom: 0, left: 0, right: 0, top: 0 }, partition: { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx index 7a53a21ca0590..193d86587fd93 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { Chart, Datum, - LIGHT_THEME, + LEGACY_LIGHT_THEME, PartialTheme, Partition, PartitionLayout, @@ -69,7 +69,8 @@ export const NetworkTimingsDonut = () => { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx index 1415b1076cdd9..c2c19f815b90f 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx @@ -7,7 +7,6 @@ import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; import React, { createContext, useContext, useMemo } from 'react'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; export interface SyntheticsAppColors { @@ -46,7 +45,6 @@ const defaultContext: SyntheticsThemeContextValues = { }, chartTheme: { baseTheme: LIGHT_THEME, - theme: EUI_CHARTS_THEME_LIGHT.theme, }, }; @@ -89,7 +87,6 @@ export const SyntheticsThemeContextProvider: React.FC = ({ colors, chartTheme: { baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, - theme: darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, }, }; }, [colors, darkMode]); diff --git a/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts b/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts index f9faca7927d9d..24582b475dbec 100644 --- a/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts +++ b/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { DARK_THEME, LIGHT_THEME } from '@elastic/charts'; import { useMemo } from 'react'; import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; @@ -13,7 +13,7 @@ export const useChartTheme = () => { const [darkMode] = useUiSetting$('theme:darkMode'); const theme = useMemo(() => { - return darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); return theme; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts b/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts index b155e08a77f99..bb07375721059 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts @@ -6,7 +6,6 @@ */ import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { AlertSummaryTimeRange, ChartProps } from '../../sections/alert_summary_widget/types'; export const mockedAlertSummaryResponse = { @@ -40,6 +39,5 @@ export const mockedAlertSummaryTimeRange: AlertSummaryTimeRange = { }; export const mockedChartProps: ChartProps = { - theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts index 7e7e7355e1a2a..40337098bd117 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts @@ -25,7 +25,7 @@ export interface AlertSummaryTimeRange { } export interface ChartProps { - theme: PartialTheme; + theme?: PartialTheme; baseTheme: Theme; onBrushEnd?: BrushEndListener; } diff --git a/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx b/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx index b37856b03e87e..e50c076423dfb 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx @@ -7,7 +7,6 @@ import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; import React, { createContext, useMemo } from 'react'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { UptimeAppColors } from '../app/uptime_app'; @@ -36,7 +35,6 @@ const defaultContext: UptimeThemeContextValues = { }, chartTheme: { baseTheme: LIGHT_THEME, - theme: EUI_CHARTS_THEME_LIGHT.theme, }, }; @@ -76,7 +74,6 @@ export const UptimeThemeContextProvider: React.FC = ({ darkMo colors, chartTheme: { baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, - theme: darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, }, }; }, [colors, darkMode]); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts b/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts index f9faca7927d9d..300daa3047f12 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts +++ b/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts @@ -5,15 +5,15 @@ * 2.0. */ -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { useMemo } from 'react'; import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; +import { DARK_THEME, LIGHT_THEME } from '@elastic/charts'; export const useChartTheme = () => { const [darkMode] = useUiSetting$('theme:darkMode'); const theme = useMemo(() => { - return darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); return theme; From 31bbe7427265e7eec6ced5d201d485d3832c5572 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 18:32:34 -0700 Subject: [PATCH 04/30] chore: remove unneeded size hacks on tickLine styles --- src/plugins/charts/common/static/styles/multilayer_timeaxis.ts | 2 +- .../pages/slo_edit/components/common/data_preview_chart.tsx | 2 +- .../components/alert_summary_widget_full_size.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts b/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts index 478cc7b52a73a..4b22feaa92751 100644 --- a/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts +++ b/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts @@ -20,7 +20,7 @@ export const MULTILAYER_TIME_AXIS_STYLE: RecursivePartial = { }, tickLine: { visible: true, - size: 0.0001, + size: 0, padding: 4, }, }; diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx index 7dc2e00f60829..1a3b151b010b9 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx @@ -224,7 +224,7 @@ export function DataPreviewChart({ timeAxisLayerCount={2} gridLine={{ visible: true }} style={{ - tickLine: { size: 0.0001, padding: 4, visible: true }, + tickLine: { size: 0, padding: 4, visible: true }, tickLabel: { alignment: { horizontal: Position.Left, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx index 4d2945f86ed23..9638fd6900794 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx @@ -86,7 +86,7 @@ export const AlertSummaryWidgetFullSize = ({ visible: true, }} style={{ - tickLine: { size: 0.0001, padding: 4 }, + tickLine: { size: 0, padding: 4 }, tickLabel: { alignment: { horizontal: Position.Left, vertical: Position.Bottom } }, }} /> From f5a8ecfd0ebeb323e0c846e1ed30ef7345cdcc21 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 19:43:17 -0700 Subject: [PATCH 05/30] chore: remove usage of chart plugin theme.useChartsTheme --- .../src/components/field_stats/field_stats.tsx | 15 ++++++--------- .../public/components/gauge_component.tsx | 4 +--- .../public/components/heatmap_component.tsx | 12 ++++-------- .../public/__mocks__/theme_service.ts | 1 - .../public/components/metric_vis.tsx | 9 +++------ .../public/components/partition_vis_component.tsx | 6 ++---- .../expression_xy/public/components/xy_chart.tsx | 10 +++------- .../public/components/timelion_vis_component.tsx | 3 --- .../components/vis_types/timeseries/vis.test.js | 9 --------- .../visualizations/views/timeseries/index.js | 12 +++--------- .../document_count_chart/document_count_chart.tsx | 2 -- .../components/mini_histogram/mini_histogram.tsx | 5 +++-- .../compliance_charts/compliance_score_chart.tsx | 1 - .../document_count_chart/document_count_chart.tsx | 2 -- .../analytics_collection_chart.tsx | 2 -- .../analytics/components/analytics_chart.test.tsx | 1 - .../analytics/components/analytics_chart.tsx | 1 - .../components/alert_details_app_section.tsx | 1 - .../components/expression_chart.test.tsx | 1 - .../asset_details/__stories__/decorator.tsx | 1 - .../asset_details/tabs/overview/alerts.tsx | 1 - .../components/tabs/alerts/alerts_tab_content.tsx | 1 - .../public/utils/use_timeline_chart_theme.ts | 5 ----- .../contexts/kibana/__mocks__/kibana_context.ts | 13 ------------- .../explorer_chart_distribution.js | 6 +++--- .../explorer_chart_distribution.test.js | 2 +- .../explorer_chart_single_metric.js | 6 +++--- .../explorer_chart_single_metric.test.js | 2 +- .../explorer_charts/explorer_charts_container.js | 2 +- .../components/alert_details_app_section.tsx | 1 - .../observability/public/pages/alerts/alerts.tsx | 1 - .../public/pages/overview/overview.tsx | 1 - .../public/pages/rule_details/rule_details.tsx | 5 ++--- .../pages/slo_details/components/wide_chart.tsx | 2 -- .../components/common/data_preview_chart.tsx | 2 -- .../public/pages/slo_edit/slo_edit.test.tsx | 1 - .../pages/slos/components/slo_sparkline.tsx | 3 +-- .../utils/kibana_react.storybook_decorator.tsx | 1 - .../public/hooks/use_profiling_charts_theme.ts | 8 +++----- .../public/rule_types/threshold/visualization.tsx | 6 +++--- .../helpers/app_context.mock.tsx | 2 +- .../threshold_watch_edit/watch_visualization.tsx | 8 +++++--- 42 files changed, 49 insertions(+), 128 deletions(-) diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx index 4f5b71384b326..7542d0634ecf0 100755 --- a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx +++ b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx @@ -28,6 +28,7 @@ import { Settings, TooltipType, Tooltip, + PartialTheme, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query'; @@ -222,22 +223,18 @@ const FieldStatsComponent: React.FC = ({ }; }, []); - const chartTheme = charts.theme.useChartsTheme(); const chartBaseTheme = charts.theme.useChartsBaseTheme(); - const customChartTheme: typeof chartTheme = useMemo(() => { + const chartThemeOverrides = useMemo(() => { return color ? { - ...chartTheme, barSeriesStyle: { - ...chartTheme.barSeriesStyle, rect: { - ...(chartTheme.barSeriesStyle?.rect || {}), fill: color, }, }, } - : chartTheme; - }, [chartTheme, color]); + : {}; + }, [color]); const { isLoading, @@ -485,7 +482,7 @@ const FieldStatsComponent: React.FC = ({ = ({ diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index ea8342462f05e..6565673cea0da 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -261,8 +261,6 @@ export const GaugeComponent: FC = memo( return null; } - const chartTheme = chartsThemeService.useChartsTheme(); - const metricColumn = table.columns.find((col) => col.id === accessors.metric); const chartData = table.rows.filter( @@ -366,7 +364,7 @@ export const GaugeComponent: FC = memo( } debugState={window._echDebugStateFlag ?? false} - theme={[{ background: { color: 'transparent' } }, chartTheme]} + theme={[{ background: { color: 'transparent' } }]} baseTheme={chartBaseTheme} ariaLabel={args.ariaLabel} ariaUseDefaultSummary={!args.ariaLabel} diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index f0794318e6001..c17c6cf94969c 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -159,7 +159,6 @@ export const HeatmapComponent: FC = memo( overrides, }) => { const chartRef = useRef(null); - const chartTheme = chartsThemeService.useChartsTheme(); const isDarkTheme = chartsThemeService.useDarkMode(); // legacy heatmap legend is handled by the uiState const [showLegend, setShowLegend] = useState(() => { @@ -548,12 +547,10 @@ export const HeatmapComponent: FC = memo( stroke: { width: args.gridConfig.strokeWidth ?? - chartTheme.axes?.gridLine?.horizontal?.strokeWidth ?? - 1, + chartBaseTheme.axes.gridLine.horizontal.strokeWidth, color: args.gridConfig.strokeColor ?? - chartTheme.axes?.gridLine?.horizontal?.stroke ?? - '#D3DAE6', + chartBaseTheme.axes.gridLine.horizontal.stroke, }, }, cell: { @@ -572,13 +569,13 @@ export const HeatmapComponent: FC = memo( yAxisLabel: { visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible, // eui color subdued - textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d', + textColor: chartBaseTheme.axes.tickLabel.fill, padding: yAxisColumn?.name ? 8 : 0, }, xAxisLabel: { visible: Boolean(args.gridConfig.isXAxisLabelVisible && xAxisColumn), // eui color subdued - textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`, + textColor: chartBaseTheme.axes.tickLabel.fill, padding: xAxisColumn?.name ? 8 : 0, }, brushMask: { @@ -719,7 +716,6 @@ export const HeatmapComponent: FC = memo( debugState={window._echDebugStateFlag ?? false} theme={[ themeOverrides, - chartTheme, ...(Array.isArray(settingsThemeOverrides) ? settingsThemeOverrides : [settingsThemeOverrides]), diff --git a/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts b/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts index b00ec8a6ee569..c3c23e41c01db 100644 --- a/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts +++ b/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts @@ -8,7 +8,6 @@ export const getThemeService = () => { return { - useChartsTheme: () => ({}), useChartsBaseTheme: () => ({ metric: { minHeight: 64 } }), }; }; diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 964c7d4685493..ecf0f2535925e 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -154,7 +154,6 @@ export const MetricVis = ({ filterable, overrides, }: MetricVisComponentProps) => { - const chartTheme = getThemeService().useChartsTheme(); const onRenderChange = useCallback( (isRendered) => { if (isRendered) { @@ -167,8 +166,7 @@ export const MetricVis = ({ const [scrollChildHeight, setScrollChildHeight] = useState('100%'); const scrollContainerRef = useRef(null); const scrollDimensions = useResizeObserver(scrollContainerRef.current); - - const baseTheme = getThemeService().useChartsBaseTheme(); + const chartBaseTheme = getThemeService().useChartsBaseTheme(); const primaryMetricColumn = getColumnByAccessor(config.dimensions.metric, data.columns)!; const formatPrimaryMetric = getMetricFormatter(config.dimensions.metric, data.columns); @@ -275,7 +273,7 @@ export const MetricVis = ({ } = config; const numRows = metricConfigs.length / maxCols; - const minHeight = chartTheme.metric?.minHeight ?? baseTheme.metric.minHeight; + const minHeight = chartBaseTheme.metric.minHeight; useEffect(() => { const minimumRequiredVerticalSpace = minHeight * numRows; @@ -331,13 +329,12 @@ export const MetricVis = ({ metric: { barBackground: euiThemeVars.euiColorLightShade, }, - ...chartTheme, }, ...(Array.isArray(settingsThemeOverrides) ? settingsThemeOverrides : [settingsThemeOverrides]), ]} - baseTheme={baseTheme} + baseTheme={chartBaseTheme} onRenderChange={onRenderChange} onElementClick={ filterable diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx index 09b85a0413c59..707b0629a26ec 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx @@ -113,7 +113,6 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { hasOpenedOnAggBasedEditor, } = props; const visParams = useMemo(() => filterOutConfig(visType, preVisParams), [preVisParams, visType]); - const chartTheme = props.chartsThemeService.useChartsTheme(); const chartBaseTheme = props.chartsThemeService.useChartsBaseTheme(); const { @@ -377,12 +376,12 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { getPartitionTheme( visType, visParams, - chartTheme, + chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor ), - [visType, visParams, chartTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] + [visType, visParams, chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] ); const fixedViewPort = document.getElementById('app-fixed-viewport'); @@ -574,7 +573,6 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { // Chart background should be transparent for the usage at Canvas. { background: { color: 'transparent' } }, themeOverrides, - chartTheme, { legend: { labelOptions: { diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 5b1b40798aa29..4f994fde9f455 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -101,7 +101,6 @@ import { Annotations, getAnnotationsGroupedByInterval, isRangeAnnotation, - OUTSIDE_RECT_ANNOTATION_WIDTH, OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION, } from './annotations'; import { AxisExtentModes, SeriesTypes, ValueLabelModes, XScaleTypes } from '../../common/constants'; @@ -227,7 +226,6 @@ export function XYChart({ annotations, } = args; const chartRef = useRef(null); - const chartTheme = chartsThemeService.useChartsTheme(); const chartBaseTheme = chartsThemeService.useChartsBaseTheme(); const darkMode = chartsThemeService.useDarkMode(); const filteredLayers = getFilteredLayers(layers); @@ -798,9 +796,7 @@ export function XYChart({ legendSize={LegendSizeToPixels[legend.legendSize ?? DEFAULT_LEGEND_SIZE]} theme={[ { - ...chartTheme, barSeriesStyle: { - ...chartTheme.barSeriesStyle, ...valueLabelsStyling, }, background: { @@ -811,7 +807,7 @@ export function XYChart({ }, // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { - ...chartTheme.chartPaddings, + ...chartBaseTheme.chartPaddings, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, @@ -996,8 +992,8 @@ export function XYChart({ ? OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION : shouldUseNewTimeAxis ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding || 0) + - Number(chartTheme.axes?.tickLabel?.fontSize || 0) - : Number(chartTheme.axes?.tickLine?.size) || OUTSIDE_RECT_ANNOTATION_WIDTH + chartBaseTheme.axes.tickLabel.fontSize + : chartBaseTheme.axes.tickLine.size } /> ) : null} diff --git a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx index 9eb41c09394d9..983a2ec74c12a 100644 --- a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx +++ b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx @@ -113,8 +113,6 @@ export const TimelionVisComponent = ({ const chartRef = useRef(null); const chart = seriesList.list; const chartsService = getCharts(); - - const chartTheme = chartsService.theme.useChartsTheme(); const chartBaseTheme = chartsService.theme.useChartsBaseTheme(); const handleCursorUpdate = useActiveCursor(chartsService.activeCursor, chartRef, { @@ -216,7 +214,6 @@ export const TimelionVisComponent = ({ externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, }} - theme={chartTheme} baseTheme={chartBaseTheme} ariaLabel={ariaLabel} ariaUseDefaultSummary={!ariaLabel} diff --git a/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js b/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js index fe6f73ce66f79..d2c343d676ed9 100644 --- a/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js +++ b/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js @@ -38,15 +38,6 @@ describe('TimeseriesVisualization', () => { setCharts({ theme: { - useChartsTheme: () => ({ - axes: { - tickLabel: { - padding: { - inner: 0, - }, - }, - }, - }), useChartsBaseTheme: () => ({ axes: { tickLabel: { diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js index 418d1c0c19969..6a3359dbeadd6 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js @@ -89,7 +89,7 @@ export const TimeSeries = ({ const { theme: themeService, activeCursor: activeCursorService } = getCharts(); const chartRef = useRef(); - const chartTheme = themeService.useChartsTheme(); + const chartBaseTheme = getBaseTheme(themeService.useChartsBaseTheme(), backgroundColor); const handleCursorUpdate = useActiveCursor(activeCursorService, chartRef, { isDateHistogram: true, @@ -127,8 +127,6 @@ export const TimeSeries = ({ // apply legend style change if bgColor is configured const classes = classNames(getChartClasses(backgroundColor)); - const baseTheme = getBaseTheme(themeService.useChartsBaseTheme(), backgroundColor); - const onBrushEndListener = ({ x }) => { if (!x) { return; @@ -196,15 +194,12 @@ export const TimeSeries = ({ pointerUpdateDebounce={0} theme={[ { - crosshair: { - ...chartTheme.crosshair, - }, axes: { tickLabel: { padding: { inner: hasVisibleAnnotations ? TICK_LABEL_WITH_ANNOTATIONS_PADDING - : chartTheme.axes.tickLabel.padding.inner, + : chartBaseTheme.axes.tickLabel.padding.inner, }, }, }, @@ -226,9 +221,8 @@ export const TimeSeries = ({ labelOptions: { maxLines: truncateLegend ? maxLegendLines ?? 1 : 0 }, }, }, - chartTheme, ]} - baseTheme={baseTheme} + baseTheme={chartBaseTheme} externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, }} diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx index 7fa45baa1fdc6..3ea94490b2ec1 100644 --- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx +++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx @@ -200,7 +200,6 @@ export const DocumentCountChart: FC = (props) => { const { data, uiSettings, fieldFormats, charts } = dependencies; - const chartTheme = charts.theme.useChartsTheme(); const chartBaseTheme = charts.theme.useChartsBaseTheme(); const xAxisFormatter = fieldFormats.deserialize({ id: 'date' }); @@ -484,7 +483,6 @@ export const DocumentCountChart: FC = (props) => { setMlBrushMarginLeft(projection.left); setMlBrushWidth(projection.width); }} - theme={chartTheme} baseTheme={chartBaseTheme} debugState={window._echDebugStateFlag ?? false} showLegend={false} diff --git a/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx b/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx index 1e65c797cacbb..9b5293988551a 100644 --- a/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx +++ b/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx @@ -46,7 +46,7 @@ export const MiniHistogram: FC = ({ const { charts } = useAiopsAppContext(); const euiTheme = useEuiTheme(); - const defaultChartTheme = charts.theme.useChartsTheme(); + const chartBaseTheme = charts.theme.useChartsBaseTheme(); const miniHistogramChartTheme: PartialTheme = { chartMargins: { @@ -107,7 +107,8 @@ export const MiniHistogram: FC = ({ diff --git a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx index 956f63ed2d3bd..f3b41a582611b 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx @@ -91,7 +91,6 @@ const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => { )} /> = ({ services: { data, uiSettings, fieldFormats, charts }, } = useDataVisualizerKibana(); - const chartTheme = charts.theme.useChartsTheme(); const chartBaseTheme = charts.theme.useChartsBaseTheme(); const xAxisFormatter = fieldFormats.deserialize({ id: 'date' }); @@ -152,7 +151,6 @@ export const DocumentCountChart: FC = ({ xDomain={xDomain} onBrushEnd={onBrushEnd as BrushEndListener} onElementClick={onElementClick} - theme={chartTheme} baseTheme={chartBaseTheme} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx index 3cda9a274cd69..231af9e9afd96 100644 --- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx @@ -62,7 +62,6 @@ export const AnalyticsCollectionChart: React.FC< const { uiSettings, charts: chartSettings } = useValues(KibanaLogic); const fromDateParsed = DateMath.parse(timeRange.from); const toDataParsed = DateMath.parse(timeRange.to); - const chartTheme = chartSettings.theme.useChartsTheme(); const baseChartTheme = chartSettings.theme.useChartsBaseTheme(); const charts = useMemo( () => [ @@ -127,7 +126,6 @@ export const AnalyticsCollectionChart: React.FC< ) : ( { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx index 5f56ac24afb38..ded32c853be43 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx @@ -35,7 +35,6 @@ describe('AnalyticsChart', () => { expect(wrapper.find(Chart).prop('size')).toEqual({ height: 300 }); expect(wrapper.find(Axis)).toHaveLength(2); - expect(mockKibanaValues.charts.theme.useChartsTheme).toHaveBeenCalled(); expect(mockKibanaValues.charts.theme.useChartsBaseTheme).toHaveBeenCalled(); expect(wrapper.find(LineSeries)).toHaveLength(1); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx index c53d22fbcee05..a09536bced2d6 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx @@ -40,7 +40,6 @@ export const AnalyticsChart: React.FC = ({ height = 300, lines }) => { moment(tooltip.value).format(TOOLTIP_DATE_FORMAT)} /> diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx index 466d032b5c01f..0b1f377a82457 100644 --- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx +++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx @@ -72,7 +72,6 @@ export function AlertDetailsAppSection({ [createDerivedIndexPattern] ); const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]); diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx index a932821b118b3..d27692b22f06b 100644 --- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx +++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx @@ -26,7 +26,6 @@ jest.mock('../../../hooks/use_kibana', () => ({ activeCursor: jest.fn(), theme: { useChartsBaseTheme: jest.fn(() => ({})), - useChartsTheme: jest.fn(() => ({})), }, }, }, diff --git a/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx b/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx index 11401bd256feb..77885e4efa24f 100644 --- a/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx @@ -91,7 +91,6 @@ export const DecorateWithKibanaContext: DecoratorFn = (story) => { }, charts: { theme: { - useChartsTheme: () => ({} as Theme), useChartsBaseTheme: () => ({} as Theme), }, }, diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx index 9b964a0974a23..4d22688debc8c 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx @@ -97,7 +97,6 @@ const MemoAlertSummaryWidget = React.memo( const { getAlertSummaryWidget: AlertSummaryWidget } = triggersActionsUi; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx index 245a7ee752a64..5a64a4040b288 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx @@ -91,7 +91,6 @@ const MemoAlertSummaryWidget = React.memo( }; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), onBrushEnd, }; diff --git a/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts b/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts index 7c562c90ab434..47aac1cc26bfa 100644 --- a/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts +++ b/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts @@ -16,19 +16,15 @@ export function useTimelineChartTheme(): Pick { - return { - crosshair: { - line: { - stroke: 'black', - strokeWidth: 1, - dash: [4, 4], - }, - }, - }; - }), - }, activeCursor: { activeCursor$: new BehaviorSubject({ cursor: { diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js index 51fbb39f9f733..7c03412ec4fcc 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js @@ -326,9 +326,9 @@ export class ExplorerChartDistribution extends React.Component { return `M${xPosition},${chartHeight} ${xPosition},0`; }) // Use elastic chart's cursor line style if possible - .style('stroke', `${chartTheme.crosshair.line.stroke ?? 'black'}`) - .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth ?? '1'}px`) - .style('stroke-dasharray', chartTheme.crosshair.line.dash ?? '4,4'); + .style('stroke', chartTheme.crosshair.line.stroke) + .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth}px`) + .style('stroke-dasharray', chartTheme.crosshair.line.dash?.join(',') ?? '4,4'); cursorMouseLine.exit().remove(); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js index d77b66b960625..5a146c51b61c1 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js @@ -22,7 +22,7 @@ import { kibanaContextMock } from '../../contexts/kibana/__mocks__/kibana_contex const utilityProps = { timeBuckets: timeBucketsMock, - chartTheme: kibanaContextMock.services.charts.theme.useChartsTheme(), + chartTheme: kibanaContextMock.services.charts.theme.useChartsBaseTheme(), onPointerUpdate: jest.fn(), cursor: { x: 10432423, diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js index b93555e8c2ff9..95933451d6f47 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js @@ -257,9 +257,9 @@ export class ExplorerChartSingleMetric extends React.Component { return `M${xPosition},${chartHeight} ${xPosition},0`; }) // Use elastic chart's cursor line style if possible - .style('stroke', `${chartTheme.crosshair.line.stroke ?? 'black'}`) - .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth ?? '1'}px`) - .style('stroke-dasharray', chartTheme.crosshair.line.dash ?? '4,4'); + .style('stroke', chartTheme.crosshair.line.stroke) + .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth}px`) + .style('stroke-dasharray', chartTheme.crosshair.line.dash?.join(',') ?? '4,4'); cursorMouseLine.exit().remove(); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js index abe8c0c991cc4..3bc38c5754e88 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js @@ -22,7 +22,7 @@ import { kibanaContextMock } from '../../contexts/kibana/__mocks__/kibana_contex const utilityProps = { timeBuckets: timeBucketsMock, - chartTheme: kibanaContextMock.services.charts.theme.useChartsTheme(), + chartTheme: kibanaContextMock.services.charts.theme.useChartsBaseTheme(), onPointerUpdate: jest.fn(), cursor: { x: 10432423, diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index fb340977dfae8..bd0ce88e86d34 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -188,7 +188,7 @@ function ExplorerChartContainer({ const chartRef = useRef(null); const { euiTheme } = useEuiTheme(); - const chartTheme = chartsService.theme.useChartsTheme(); + const chartTheme = chartsService.theme.useChartsBaseTheme(); const handleCursorUpdate = useActiveCursor(chartsService.activeCursor, chartRef, { isDateHistogram: true, diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx index 11a85e6b17bc2..87532851280b5 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx @@ -67,7 +67,6 @@ export default function AlertDetailsAppSection({ const [, setDataViewError] = useState(); const ruleParams = rule.params as RuleTypeParams & AlertParams; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]); diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts.tsx index 9e80d01ed82e4..4d7cecb1f6c02 100644 --- a/x-pack/plugins/observability/public/pages/alerts/alerts.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/alerts.tsx @@ -82,7 +82,6 @@ function InternalAlertsPage() { } }; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), onBrushEnd, }; diff --git a/x-pack/plugins/observability/public/pages/overview/overview.tsx b/x-pack/plugins/observability/public/pages/overview/overview.tsx index 6b623e1636dab..17121be51c668 100644 --- a/x-pack/plugins/observability/public/pages/overview/overview.tsx +++ b/x-pack/plugins/observability/public/pages/overview/overview.tsx @@ -102,7 +102,6 @@ export function OverviewPage() { ); const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; diff --git a/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx b/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx index b3b9ea17d5cac..6a9c38b1b1e80 100644 --- a/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx +++ b/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx @@ -50,7 +50,7 @@ export function RuleDetailsPage() { const { application: { capabilities, navigateToUrl }, charts: { - theme: { useChartsBaseTheme, useChartsTheme }, + theme: { useChartsBaseTheme }, }, http: { basePath }, share: { @@ -70,7 +70,6 @@ export function RuleDetailsPage() { const { ruleId } = useParams(); const { search } = useLocation(); - const theme = useChartsTheme(); const baseTheme = useChartsBaseTheme(); const { rule, isLoading, isError, refetch } = useFetchRule({ ruleId }); @@ -234,7 +233,7 @@ export function RuleDetailsPage() { } onPointerUpdate={handleCursorUpdate} externalPointerEvents={{ diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx index 1a3b151b010b9..386661ae0d318 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx @@ -70,7 +70,6 @@ export function DataPreviewChart({ isError, } = useDebouncedGetPreviewData(isIndicatorSectionValid, watch('indicator')); - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const dateFormat = uiSettings.get('dateFormat'); const numberFormat = @@ -189,7 +188,6 @@ export function DataPreviewChart({ showLegend={false} theme={[ { - ...theme, lineSeriesStyle: { point: { visible: false }, }, diff --git a/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx index 8d4d45a08d709..e347c0dcd43d6 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx @@ -74,7 +74,6 @@ const mockKibana = () => { }, charts: { theme: { - useChartsTheme: () => {}, useChartsBaseTheme: () => {}, }, }, diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx index 3f2e9915cd6cc..daaa3df2be0ea 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx @@ -40,7 +40,6 @@ export interface Props { export function SloSparkline({ chart, data, id, isLoading, state }: Props) { const charts = useKibana().services.charts; - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const { euiTheme } = useEuiTheme(); @@ -57,7 +56,7 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) { diff --git a/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx b/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx index d5714924bdc97..a3cfb7833f16e 100644 --- a/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx +++ b/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx @@ -68,7 +68,6 @@ export function KibanaReactStorybookDecorator(Story: ComponentType) { charts: { theme: { useChartsBaseTheme: () => {}, - useChartsTheme: () => {}, }, activeCursor: () => {}, }, diff --git a/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts b/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts index 8e9eb4b689541..40d3d68379094 100644 --- a/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts +++ b/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts @@ -4,11 +4,10 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { RecursivePartial, Theme } from '@elastic/charts'; -import { merge } from 'lodash'; +import { PartialTheme } from '@elastic/charts'; import { useProfilingDependencies } from '../components/contexts/profiling_dependencies/use_profiling_dependencies'; -const profilingTheme: RecursivePartial = { +const profilingThemeOverrides: PartialTheme = { barSeriesStyle: { rectBorder: { strokeOpacity: 1, @@ -38,10 +37,9 @@ export function useProfilingChartsTheme() { } = useProfilingDependencies(); const chartsBaseTheme = charts.theme.useChartsBaseTheme(); - const chartsTheme = charts.theme.useChartsTheme(); return { chartsBaseTheme, - chartsTheme: merge({}, chartsTheme, profilingTheme), + chartsTheme: profilingThemeOverrides, }; } diff --git a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx index c16d3dd0bdb55..c8996d9fcaa4b 100644 --- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx +++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx @@ -18,6 +18,7 @@ import { ScaleType, Settings, niceTimeFormatter, + PartialTheme, } from '@elastic/charts'; import moment from 'moment-timezone'; import { @@ -41,7 +42,7 @@ import { } from './index_threshold_api'; import { IndexThresholdRuleParams } from './types'; -const customTheme = () => { +const chartThemeOverrides = (): PartialTheme => { return { lineSeriesStyle: { line: { @@ -182,7 +183,6 @@ export const ThresholdVisualization: React.FunctionComponent = ({ if (!charts || !uiSettings || !dataFieldsFormats) { return null; } - const chartsTheme = charts.theme.useChartsTheme(); const chartsBaseTheme = charts.theme.useChartsBaseTheme(); const domain = getDomain(alertInterval, startVisualizationAt); @@ -265,7 +265,7 @@ export const ThresholdVisualization: React.FunctionComponent = ({ {alertVisualizationDataKeys.length ? ( { +const customTheme = (): PartialTheme => { return { lineSeriesStyle: { line: { @@ -90,7 +91,7 @@ const getTimeBuckets = (watch: any, timeBuckets: any) => { export const WatchVisualization = () => { const { createTimeBuckets, theme, uiSettings } = useAppContext(); const { watch } = useContext(WatchContext); - const chartsTheme = theme.useChartsTheme(); + const chartBaseTheme = theme.useChartsBaseTheme(); const { index, timeField, @@ -216,7 +217,8 @@ export const WatchVisualization = () => { {watchVisualizationDataKeys.length ? ( Date: Tue, 14 Nov 2023 03:18:16 +0000 Subject: [PATCH 06/30] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../public/components/heatmap_component.tsx | 7 ++----- .../components/partition_vis_component.tsx | 9 +++++++- .../views/timeseries/utils/theme.test.ts | 4 +++- .../distribution/index.tsx | 6 +----- .../analytics/components/analytics_chart.tsx | 5 +---- .../single_metric_sparkline.tsx | 13 +++++++++--- .../memory_usage/memory_tree_map/tree_map.tsx | 5 +---- .../metrics/metric_with_sparkline.tsx | 21 ++++++++++++++----- 8 files changed, 42 insertions(+), 28 deletions(-) diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index c17c6cf94969c..96d0b23cac0bc 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -546,11 +546,8 @@ export const HeatmapComponent: FC = memo( grid: { stroke: { width: - args.gridConfig.strokeWidth ?? - chartBaseTheme.axes.gridLine.horizontal.strokeWidth, - color: - args.gridConfig.strokeColor ?? - chartBaseTheme.axes.gridLine.horizontal.stroke, + args.gridConfig.strokeWidth ?? chartBaseTheme.axes.gridLine.horizontal.strokeWidth, + color: args.gridConfig.strokeColor ?? chartBaseTheme.axes.gridLine.horizontal.stroke, }, }, cell: { diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx index 707b0629a26ec..fb2e56771c2e7 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx @@ -381,7 +381,14 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { rescaleFactor, hasOpenedOnAggBasedEditor ), - [visType, visParams, chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] + [ + visType, + visParams, + chartBaseTheme, + containerDimensions, + rescaleFactor, + hasOpenedOnAggBasedEditor, + ] ); const fixedViewPort = document.getElementById('app-fixed-viewport'); diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts index 489b5c6c14510..8983d76eca15b 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts @@ -25,7 +25,9 @@ describe('TSVB theme', () => { expect(getBaseTheme(LEGACY_LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)'); // violet increased the text color to full white for higer contrast - expect(getBaseTheme(LEGACY_LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)'); + expect(getBaseTheme(LEGACY_LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual( + 'rgb(255,255,255)' + ); // light yellow, prefer the LEGACY_LIGHT_THEME fill color because already with a good contrast expect(getBaseTheme(LEGACY_LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333'); diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx index 3d451cf485393..b79f30505e5db 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx @@ -99,11 +99,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { showLegend showLegendExtra legendPosition={Position.Bottom} - theme={ - theme.darkMode - ? DARK_THEME - : LIGHT_THEME - } + theme={theme.darkMode ? DARK_THEME : LIGHT_THEME} locale={i18n.getLocale()} /> = ({ height = 300, lines }) => { return ( moment(tooltip.value).format(TOOLTIP_DATE_FORMAT)} /> - + {lines.map(({ id, data, isDashed }) => ( = ({ node, type, height }) => { } = useMlKibana(); const isDarkTheme = useIsDarkTheme(themeService); - const baseTheme = useMemo( - () => isDarkTheme ? DARK_THEME : LIGHT_THEME, - [isDarkTheme] - ); + const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]); const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures(); diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx index 5404b08bed376..3e4b0476b5075 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx @@ -5,13 +5,19 @@ * 2.0. */ -import { Chart, Settings, AreaSeries, TooltipType, Tooltip, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { + Chart, + Settings, + AreaSeries, + TooltipType, + Tooltip, + LIGHT_THEME, + DARK_THEME, +} from '@elastic/charts'; import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiTextColor } from '@elastic/eui'; import React, { useContext } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { - EUI_SPARKLINE_THEME_PARTIAL, -} from '@elastic/eui/dist/eui_charts_theme'; +import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeContext } from 'styled-components'; import { i18n } from '@kbn/i18n'; @@ -49,7 +55,12 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }: - + Date: Tue, 14 Nov 2023 08:47:54 -0700 Subject: [PATCH 07/30] chore: remove theme from charts theme service --- .../charts/public/services/theme/README.md | 29 ++----- .../charts/public/services/theme/mock.ts | 10 +-- .../public/services/theme/theme.test.tsx | 80 ------------------- .../charts/public/services/theme/theme.ts | 28 +------ 4 files changed, 11 insertions(+), 136 deletions(-) diff --git a/src/plugins/charts/public/services/theme/README.md b/src/plugins/charts/public/services/theme/README.md index fb4f941f79344..eca74a14019aa 100644 --- a/src/plugins/charts/public/services/theme/README.md +++ b/src/plugins/charts/public/services/theme/README.md @@ -8,11 +8,7 @@ The `theme` service offers utilities to interact with the kibana theme. EUI prov Default `baseTheme` from `@elastic/charts` (i.e. light). -## `chartsDefaultTheme` - -Default `theme` from `@elastic/eui` (i.e. light). - -## `useChartsTheme` and `useChartsBaseTheme` +## `useChartsBaseTheme` A **React hook** for simple fetching of the correct EUI `theme` and `baseTheme`. @@ -23,7 +19,7 @@ import { Chart, Settings } from '@elastic/charts'; export const YourComponent = () => ( {/* ... */} @@ -31,20 +27,18 @@ export const YourComponent = () => ( ); ``` -## `chartsTheme$` and `chartsBaseTheme$` +## `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; } @@ -52,16 +46,14 @@ export class YourComponent extends Component - this.setState({ chartsTheme, chartsBaseTheme }) + ).subscribe(([chartsBaseTheme]) => + this.setState({ chartsBaseTheme }) ); } @@ -72,21 +64,14 @@ export class YourComponent extends Component - + {/* ... */} ); } } ``` - -## 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` TS type in `@elastic/charts` without having to update the `@elastic/eui` themes for every ``. diff --git a/src/plugins/charts/public/services/theme/mock.ts b/src/plugins/charts/public/services/theme/mock.ts index ec5d00508c510..d41f9f20dd382 100644 --- a/src/plugins/charts/public/services/theme/mock.ts +++ b/src/plugins/charts/public/services/theme/mock.ts @@ -6,14 +6,11 @@ * Side Public License, v 1. */ -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { LIGHT_THEME } from '@elastic/charts'; import { ThemeService } from './theme'; export const themeServiceMock: ThemeService = { - chartsDefaultTheme: EUI_CHARTS_THEME_LIGHT.theme, - chartsTheme$: jest.fn(() => ({ - subscribe: jest.fn(), - })), + chartsDefaultBaseTheme: LIGHT_THEME, chartsBaseTheme$: jest.fn(() => ({ subscribe: jest.fn(), })), @@ -21,6 +18,5 @@ export const themeServiceMock: ThemeService = { subscribe: jest.fn(), })), useDarkMode: jest.fn().mockReturnValue(false), - useChartsTheme: jest.fn().mockReturnValue({}), - useChartsBaseTheme: jest.fn().mockReturnValue({}), + useChartsBaseTheme: jest.fn().mockReturnValue(LIGHT_THEME), } as any; diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx index d13050d0a506f..d71d2beda6bb0 100644 --- a/src/plugins/charts/public/services/theme/theme.test.tsx +++ b/src/plugins/charts/public/services/theme/theme.test.tsx @@ -13,7 +13,6 @@ import { renderHook, act } from '@testing-library/react-hooks'; import { render, act as renderAct } from '@testing-library/react'; import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeService } from './theme'; import { coreMock } from '@kbn/core/public/mocks'; @@ -51,31 +50,6 @@ describe('ThemeService', () => { }); }); - describe('chartsTheme$', () => { - it('returns the light theme when not in dark mode', async () => { - setUpMockTheme.theme$ = createTheme$Mock(false); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( - EUI_CHARTS_THEME_LIGHT.theme - ); - }); - - describe('in dark mode', () => { - it(`returns the dark theme`, async () => { - // Fake dark theme turned returning true - setUpMockTheme.theme$ = createTheme$Mock(true); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( - EUI_CHARTS_THEME_DARK.theme - ); - }); - }); - }); - describe('chartsBaseTheme$', () => { it('returns the light theme when not in dark mode', async () => { setUpMockTheme.theme$ = createTheme$Mock(false); @@ -98,60 +72,6 @@ describe('ThemeService', () => { }); }); - describe('useChartsTheme', () => { - it('updates when the user profile settings change', () => { - setUpMockTheme.theme$ = createTheme$Mock(false); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - const { useChartsTheme } = themeService; - - const { result } = renderHook(() => useChartsTheme()); - expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); - - act(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - expect(result.current).toBe(EUI_CHARTS_THEME_DARK.theme); - act(() => { - setUpMockTheme.theme$ = createTheme$Mock(false); - themeService.init(setUpMockTheme); - }); - expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); - }); - - it('should not rerender when emitting the same value', () => { - setUpMockTheme.theme$ = createTheme$Mock(false); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - const { useChartsTheme } = themeService; - - const renderCounter = jest.fn(); - const Wrapper = () => { - useChartsTheme(); - renderCounter(); - return null; - }; - - render(); - expect(renderCounter).toHaveBeenCalledTimes(1); - renderAct(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - expect(renderCounter).toHaveBeenCalledTimes(2); - renderAct(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - renderAct(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - expect(renderCounter).toHaveBeenCalledTimes(2); - }); - }); - describe('useBaseChartTheme', () => { it('updates when the theme setting change', () => { setUpMockTheme.theme$ = createTheme$Mock(false); diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index dff300a02aa8a..c155bbb93702b 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -10,21 +10,15 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup, CoreTheme } from '@kbn/core/public'; -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'; +import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; export class ThemeService { /** Returns default charts theme */ - public readonly chartsDefaultTheme = EUI_CHARTS_THEME_LIGHT.theme; public readonly chartsDefaultBaseTheme = LIGHT_THEME; private theme$?: Observable; - private _chartsTheme$ = new BehaviorSubject(this.chartsDefaultTheme); private _chartsBaseTheme$ = new BehaviorSubject(this.chartsDefaultBaseTheme); - /** An observable of the current charts theme */ - public chartsTheme$ = this._chartsTheme$.asObservable(); - /** An observable of the current charts base theme */ public chartsBaseTheme$ = this._chartsBaseTheme$.asObservable(); @@ -51,24 +45,6 @@ export class ThemeService { return value; }; - /** A React hook for consuming the charts theme */ - public useChartsTheme = (): PartialTheme => { - const [value, update] = useState(this._chartsTheme$.getValue()); - const ref = useRef(value); - - useEffect(() => { - const s = this.chartsTheme$.subscribe((val) => { - if (val !== ref.current) { - ref.current = val; - update(val); - } - }); - return () => s.unsubscribe(); - }, []); - - return value; - }; - /** A React hook for consuming the charts theme */ public useChartsBaseTheme = (): Theme => { const [value, update] = useState(this._chartsBaseTheme$.getValue()); @@ -91,8 +67,6 @@ export class ThemeService { public init(theme: CoreSetup['theme']) { this.theme$ = theme.theme$; this.theme$.subscribe(({ darkMode }) => { - const selectedTheme = darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - this._chartsTheme$.next(selectedTheme); this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME); }); } From 8c7eec54f926eed5196704215fb912c7fde5aa48 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 14 Nov 2023 08:48:31 -0700 Subject: [PATCH 08/30] fix: type and test errors --- .../application/contexts/kibana/__mocks__/kibana_context.ts | 4 ++++ .../components/alert_summary_widget_compact.tsx | 2 +- .../components/alert_summary_widget_full_size.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts index 013b4a1717e7b..c4831b223ee99 100644 --- a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts +++ b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts @@ -10,8 +10,12 @@ import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks' import { BehaviorSubject } from 'rxjs'; import { mlApiServicesMock } from '../../../services/__mocks__/ml_api_services'; import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks'; +import { LIGHT_THEME } from '@elastic/charts'; export const chartsServiceMock = { + theme: { + useChartsBaseTheme: jest.fn(() => LIGHT_THEME), + }, activeCursor: { activeCursor$: new BehaviorSubject({ cursor: { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx index ec4e91de1e9a3..2f53ada96bca6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx @@ -43,7 +43,7 @@ export const AlertSummaryWidgetCompact = ({ onClick, }: AlertSummaryWidgetCompactProps) => { const chartTheme = [ - theme, + ...(theme ? [theme] : []), EUI_SPARKLINE_THEME_PARTIAL, { chartMargins: { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx index 9638fd6900794..3f2b5a111566b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx @@ -41,7 +41,7 @@ export const AlertSummaryWidgetFullSize = ({ hideChart, }: AlertSummaryWidgetFullSizeProps) => { const chartTheme = [ - theme, + ...(theme ? [theme] : []), { chartPaddings: { top: 7, From dbf047ce9256494a8e8fd4550f1d674ca3ffb559 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 15 Nov 2023 08:42:00 -0700 Subject: [PATCH 09/30] fix bad chart margins in xy expression renderer --- .../expression_xy/public/components/xy_chart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 4f994fde9f455..9e89468e08019 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -30,6 +30,7 @@ import { Tooltip, XYChartSeriesIdentifier, SettingsProps, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -807,7 +808,8 @@ export function XYChart({ }, // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { - ...chartBaseTheme.chartPaddings, + // Temporary margin defaults + ...LEGACY_LIGHT_THEME.chartMargins, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, From e43fe2d49de7c93e608a1bffc29b82e95078582f Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 15 Nov 2023 08:56:05 -0700 Subject: [PATCH 10/30] use max of old outsideDimensions --- .../expression_xy/public/components/xy_chart.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 9e89468e08019..ce199a5ba580d 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -102,6 +102,7 @@ import { Annotations, getAnnotationsGroupedByInterval, isRangeAnnotation, + OUTSIDE_RECT_ANNOTATION_WIDTH, OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION, } from './annotations'; import { AxisExtentModes, SeriesTypes, ValueLabelModes, XScaleTypes } from '../../common/constants'; @@ -993,9 +994,9 @@ export function XYChart({ rangeAnnotations.length && shouldHideDetails ? OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION : shouldUseNewTimeAxis - ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding || 0) + + ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding ?? 0) + chartBaseTheme.axes.tickLabel.fontSize - : chartBaseTheme.axes.tickLine.size + : Math.max(chartBaseTheme.axes.tickLine.size, OUTSIDE_RECT_ANNOTATION_WIDTH) } /> ) : null} From 3e7bf25294e4e912d66c468e242e79d2a525e308 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 15 Nov 2023 10:59:07 -0700 Subject: [PATCH 11/30] verify and update screenshot changes --- .../gauge_component.test.tsx.snap | 509 +- .../partition_vis_component.test.tsx.snap | 3188 +++++++++- .../__snapshots__/xy_chart.test.tsx.snap | 5152 ++++++++++++++++- .../__snapshots__/donut_chart.test.tsx.snap | 360 +- 4 files changed, 8835 insertions(+), 374 deletions(-) diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index 17eb7b358bb47..7b42fb3275714 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -6,7 +6,513 @@ exports[`GaugeComponent renders the chart 1`] = ` > diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 451f25f93f9e2..2ce521981866d 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -236,7 +236,513 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` /> - } - onElementClick={[Function]} - onRenderChange={[Function]} - showLegend={true} - theme={ - Array [ - Object { - "background": Object { - "color": "transparent", + baseTheme={ + Object { + "arcSeriesStyle": Object { + "arc": Object { + "opacity": 1, + "stroke": "black", + "strokeWidth": 1, + "visible": true, }, }, - Object { - "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "areaSeriesStyle": Object { + "area": Object { + "opacity": 0.3, + "visible": true, }, - "partition": Object { - "circlePadding": 4, - "emptySizeRatio": 0, - "fontFamily": undefined, - "linkLabel": Object { - "fontSize": 11, - "maxCount": 5, - "maxTextLength": 100, - "textColor": undefined, + "fit": Object { + "area": Object { + "fill": "__use__series__color__", + "opacity": 0.15, + "visible": true, + }, + "line": Object { + "dash": Array [ + 5, + 5, + ], + "opacity": 1, + "stroke": "__use__series__color__", + "visible": true, }, - "maxFontSize": 16, - "minFontSize": 10, - "outerSizeRatio": undefined, - "sectorLineStroke": undefined, - "sectorLineWidth": 1.5, + }, + "isolatedPoint": Object { + "fill": "white", + "opacity": 1, + "radius": 2, + "stroke": "__use__series__color__", + "strokeWidth": 1, + "visible": true, + }, + "line": Object { + "opacity": 1, + "strokeWidth": 2, + "visible": true, + }, + "point": Object { + "fill": "#FFF", + "opacity": 1, + "radius": 3, + "stroke": "__use__series__color__", + "strokeWidth": 2, + "visible": false, }, }, - Object {}, - Object { - "legend": Object { - "labelOptions": Object { - "maxLines": 1, + "axes": Object { + "axisLine": Object { + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + "axisPanelTitle": Object { + "fill": "#333", + "fontFamily": "sans-serif", + "fontSize": 10, + "padding": Object { + "inner": 8, + "outer": 0, + }, + "visible": true, + }, + "axisTitle": Object { + "fill": "#343741", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 12, + "padding": Object { + "inner": 10, + "outer": 0, + }, + "visible": true, + }, + "gridLine": Object { + "horizontal": Object { + "dash": Array [ + 0, + 0, + ], + "opacity": 1, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + "lumaSteps": Array [ + 224, + 184, + 128, + 96, + 64, + 32, + 16, + 8, + 4, + 2, + 1, + 0, + 0, + 0, + 0, + 0, + ], + "vertical": Object { + "dash": Array [ + 4, + 4, + ], + "opacity": 1, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + }, + "tickLabel": Object { + "alignment": Object { + "horizontal": "near", + "vertical": "near", }, + "fill": "#646a77", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, + "fontStyle": "normal", + "offset": Object { + "reference": "local", + "x": 0, + "y": 0, + }, + "padding": Object { + "inner": 10, + "outer": 8, + }, + "rotation": 0, + "visible": true, + }, + "tickLine": Object { + "padding": 10, + "size": 10, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": false, }, }, - Object {}, - ] - } - /> - + } + onElementClick={[Function]} + onRenderChange={[Function]} + showLegend={true} + theme={ + Array [ + Object { + "background": Object { + "color": "transparent", + }, + }, + Object { + "chartMargins": Object { + "bottom": 0, + "left": 0, + "right": 0, + "top": 0, + }, + "partition": Object { + "circlePadding": 4, + "emptySizeRatio": 0, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "linkLabel": Object { + "fontSize": 11, + "maxCount": 5, + "maxTextLength": 100, + "textColor": "#343741", + }, + "maxFontSize": 16, + "minFontSize": 10, + "outerSizeRatio": undefined, + "sectorLineStroke": "#FFF", + "sectorLineWidth": 1.5, + }, + }, + Object { + "legend": Object { + "labelOptions": Object { + "maxLines": 1, + }, + }, + }, + Object {}, + ] + } + /> + From 47c3f05d5b314814b42c55d52b3901fd819ed055 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 16 Nov 2023 07:22:54 -0700 Subject: [PATCH 12/30] fix fn tests due to metric changes part 1 --- .../functional/apps/lens/group6/metric.ts | 30 +++++++++++----- .../apps/lens/open_in_lens/agg_based/goal.ts | 36 ++++++++++++++----- .../lens/open_in_lens/agg_based/metric.ts | 36 ++++++++++++++----- .../test/functional/page_objects/lens_page.ts | 15 ++++++-- 4 files changed, 87 insertions(+), 30 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index c2276e1cdf5ab..60d6c593ad484 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,7 +127,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -136,7 +138,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -145,7 +149,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -154,7 +160,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -163,7 +171,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -172,7 +182,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -270,7 +282,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ color }) => color)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); + expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); }); const expectedDynamicColors = [ @@ -288,7 +300,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ color }) => color)).to.eql(expectedDynamicColors); + expect(data.map(({ trendlineColor }) => trendlineColor)).to.eql(expectedDynamicColors); }); it('converts color stops to number', async () => { @@ -303,7 +315,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); expect( - (await PageObjects.lens.getMetricVisualizationData()).map(({ color }) => color) + (await PageObjects.lens.getMetricVisualizationData()).map(({ trendlineColor }) => trendlineColor) ).to.eql(expectedDynamicColors); // colors shouldn't change await PageObjects.lens.closePaletteEditor(); diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index 78d0e220c61bd..3dc37db5ff2cc 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -48,7 +48,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '140.05%', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -79,7 +81,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '131,040,360.81%', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -110,7 +114,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14.37%', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -153,7 +159,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,047,486.03', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -162,7 +170,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '66,144,823.35', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -171,7 +181,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,933,477.76', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -180,7 +192,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,157,898.23', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -189,7 +203,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,365,950.93', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -198,7 +214,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(0, 0, 0, 0)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index af22bc8408de3..0b5b1d89b40b2 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -49,7 +49,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14,005', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -79,7 +81,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '13,104,036,080.615', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -109,7 +113,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '1,437', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -163,7 +169,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,228,964,670.613', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -172,7 +180,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,186,695,551.251', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -181,7 +191,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,073,190,186.423', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -190,7 +202,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,031,579,645.108', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -199,7 +213,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,009,497,206.823', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -208,7 +224,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 45b451721b2cd..21d408673573d 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1332,6 +1332,11 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getMetricTiles() { return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, + async getChartBackground(): Promise { + return await ( + await findService.byCssSelector('[data-test-subj="mtrVis"] .echChart .echChartBackground') + )?.getComputedStyle('background-color') + }, async getMetricElementIfExists(selector: string, container: WebElementWrapper) { return (await findService.descendantExistsByCssSelector(selector, container)) @@ -1351,25 +1356,29 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont value: await ( await this.getMetricElementIfExists('.echMetricText__value', tile) )?.getVisibleText(), - color: await ( + foregroundColor: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), + trendlineColor: await( + await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile) + )?.getAttribute('fill'), showingTrendline: Boolean( await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) ), - }; + }; }, async getMetricVisualizationData() { const tiles = await this.getMetricTiles(); const showingBar = Boolean(await findService.existsByCssSelector('.echSingleMetricProgress')); + const backgroundColor = await this.getChartBackground(); const metricDataPromises = []; for (const tile of tiles) { metricDataPromises.push(this.getMetricDatum(tile)); } const metricData = await Promise.all(metricDataPromises); - return metricData.map((d) => ({ ...d, showingBar })); + return metricData.map((d) => ({ ...d, showingBar, backgroundColor })); }, /** From 3b5d884d108c8e3b5bd11cdc6b2fb14ae11bbc50 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 16 Nov 2023 15:10:08 +0000 Subject: [PATCH 13/30] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- x-pack/test/functional/apps/lens/group6/metric.ts | 8 ++++++-- x-pack/test/functional/page_objects/lens_page.ts | 8 ++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index 60d6c593ad484..54bb44353e8ab 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -282,7 +282,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); + expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql( + new Array(6).fill('rgba(0, 0, 0, 1)') + ); }); const expectedDynamicColors = [ @@ -315,7 +317,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); expect( - (await PageObjects.lens.getMetricVisualizationData()).map(({ trendlineColor }) => trendlineColor) + (await PageObjects.lens.getMetricVisualizationData()).map( + ({ trendlineColor }) => trendlineColor + ) ).to.eql(expectedDynamicColors); // colors shouldn't change await PageObjects.lens.closePaletteEditor(); diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 21d408673573d..8a4cf7bbe0e2c 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1335,7 +1335,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getChartBackground(): Promise { return await ( await findService.byCssSelector('[data-test-subj="mtrVis"] .echChart .echChartBackground') - )?.getComputedStyle('background-color') + )?.getComputedStyle('background-color'); }, async getMetricElementIfExists(selector: string, container: WebElementWrapper) { @@ -1359,13 +1359,13 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont foregroundColor: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), - trendlineColor: await( + trendlineColor: await ( await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile) - )?.getAttribute('fill'), + )?.getAttribute('fill'), showingTrendline: Boolean( await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) ), - }; + }; }, async getMetricVisualizationData() { From cd8ca2facf7be7f206a4dc3443ba42d15a2ebb47 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sun, 19 Nov 2023 22:16:27 -0700 Subject: [PATCH 14/30] fix metric empty background color --- package.json | 2 +- .../expression_metric/public/components/metric_vis.tsx | 1 + yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index d4044cda5b796..fd3b2a74a6f6a 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.0", + "@elastic/charts": "61.0.1", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index ecf0f2535925e..b8e5d1862e007 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -328,6 +328,7 @@ export const MetricVis = ({ background: { color: defaultColor }, metric: { barBackground: euiThemeVars.euiColorLightShade, + emptyBackground: euiThemeVars.euiColorEmptyShade, }, }, ...(Array.isArray(settingsThemeOverrides) diff --git a/yarn.lock b/yarn.lock index fd5efdc4ee695..35a808982c31f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.0": - version "61.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.0.tgz#8303fb9617b26f95cec731f03cd259da03cce404" - integrity sha512-iqU+I8LXLChZu+c/xs5c4QAQIUZRElYvlSgQaTYX0QyL0UsyYzTw3IHQVwTM0okbYKk0nTY+iBDaM3UUwgODCg== +"@elastic/charts@61.0.1": + version "61.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.1.tgz#7384c6797a9e5638346e1b335ac1cfe613c7fc32" + integrity sha512-Npb7H/AmFriPG5ZtKo4BJ1THLKLLaRy3CWIHs7sszvh6gpZhTV4/q8vF7AxR08WlHtyRcobGylykPzrY0U97eA== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From e31fb5f57cf753b3c1c042d81720f5f899ce031f Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Nov 2023 20:55:16 -0700 Subject: [PATCH 15/30] update charts with changes to background colors --- package.json | 2 +- .../public/components/metric_vis.tsx | 1 + .../metric/dimension_editor.tsx | 2 +- .../lens/group3/dashboard_inline_editing.ts | 1 + .../functional/apps/lens/group6/metric.ts | 28 ++++++------------- .../lens/open_in_lens/agg_based/metric.ts | 27 ++++++------------ .../test/functional/page_objects/lens_page.ts | 10 ++----- yarn.lock | 8 +++--- 8 files changed, 28 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index fd3b2a74a6f6a..fbb1dd1c27147 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.1", + "@elastic/charts": "61.0.2", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index b8e5d1862e007..ba3ef124d7ed2 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -329,6 +329,7 @@ export const MetricVis = ({ metric: { barBackground: euiThemeVars.euiColorLightShade, emptyBackground: euiThemeVars.euiColorEmptyShade, + blendingBackground: euiThemeVars.euiColorEmptyShade, }, }, ...(Array.isArray(settingsThemeOverrides) diff --git a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx index c84fa45834fa0..6e71d21519231 100644 --- a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx +++ b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx @@ -446,7 +446,7 @@ function StaticColorControls({ onChange={(color: string) => handleColorChange(color)} color={currentColor} aria-label={colorLabel} - showAlpha={false} + showAlpha swatches={euiPaletteColorBlind()} /> diff --git a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts index da5858e0ffc1d..be052791dd5bf 100644 --- a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts +++ b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts @@ -73,6 +73,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { extraText: 'Maximum of bytes 19,986', value: '5,727.322', color: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: false, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index 54bb44353e8ab..0f12b8d6c2da3 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,8 +127,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -138,8 +137,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -149,8 +147,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -160,8 +157,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -171,8 +167,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -182,8 +177,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -282,9 +276,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql( - new Array(6).fill('rgba(0, 0, 0, 1)') - ); + expect(data.map(({ color }) => color)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); }); const expectedDynamicColors = [ @@ -302,7 +294,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ trendlineColor }) => trendlineColor)).to.eql(expectedDynamicColors); + expect(data.map(({ color }) => color)).to.eql(expectedDynamicColors); }); it('converts color stops to number', async () => { @@ -317,9 +309,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); expect( - (await PageObjects.lens.getMetricVisualizationData()).map( - ({ trendlineColor }) => trendlineColor - ) + (await PageObjects.lens.getMetricVisualizationData()).map(({ color }) => color) ).to.eql(expectedDynamicColors); // colors shouldn't change await PageObjects.lens.closePaletteEditor(); diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index 0b5b1d89b40b2..94616f6eda6f7 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -49,8 +49,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14,005', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -81,8 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '13,104,036,080.615', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -113,8 +111,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '1,437', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -169,8 +166,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,228,964,670.613', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -180,8 +176,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,186,695,551.251', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -191,8 +186,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,073,190,186.423', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -202,8 +196,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,031,579,645.108', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -213,8 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,009,497,206.823', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -224,8 +216,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingBar: false, showingTrendline: false, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 8a4cf7bbe0e2c..20caacf7f3b45 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1332,11 +1332,6 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getMetricTiles() { return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, - async getChartBackground(): Promise { - return await ( - await findService.byCssSelector('[data-test-subj="mtrVis"] .echChart .echChartBackground') - )?.getComputedStyle('background-color'); - }, async getMetricElementIfExists(selector: string, container: WebElementWrapper) { return (await findService.descendantExistsByCssSelector(selector, container)) @@ -1356,7 +1351,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont value: await ( await this.getMetricElementIfExists('.echMetricText__value', tile) )?.getVisibleText(), - foregroundColor: await ( + color: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), trendlineColor: await ( @@ -1371,14 +1366,13 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getMetricVisualizationData() { const tiles = await this.getMetricTiles(); const showingBar = Boolean(await findService.existsByCssSelector('.echSingleMetricProgress')); - const backgroundColor = await this.getChartBackground(); const metricDataPromises = []; for (const tile of tiles) { metricDataPromises.push(this.getMetricDatum(tile)); } const metricData = await Promise.all(metricDataPromises); - return metricData.map((d) => ({ ...d, showingBar, backgroundColor })); + return metricData.map((d) => ({ ...d, showingBar })); }, /** diff --git a/yarn.lock b/yarn.lock index 35a808982c31f..8decb6d8d2c7a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.1": - version "61.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.1.tgz#7384c6797a9e5638346e1b335ac1cfe613c7fc32" - integrity sha512-Npb7H/AmFriPG5ZtKo4BJ1THLKLLaRy3CWIHs7sszvh6gpZhTV4/q8vF7AxR08WlHtyRcobGylykPzrY0U97eA== +"@elastic/charts@61.0.2": + version "61.0.2" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.2.tgz#612a2fa842b65844ca618a0fb0176c89a4167b42" + integrity sha512-WL/5lpEIbni65LYMSZc0Rao3ZJ93a+Iou7Ak9sogG5bDwp40Y1bQdkAeQl2JoYkNGqBMQFtyEZ0pPlZc6OVMnQ== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From 7eeab53efd0eee6e8aa2df0208353e8c9ed9f18a Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 22 Nov 2023 08:46:10 -0700 Subject: [PATCH 16/30] update merge errors and fix snapshots --- .../__snapshots__/gauge_component.test.tsx.snap | 1 + .../partition_vis_component.test.tsx.snap | 6 ++++++ .../components/__snapshots__/xy_chart.test.tsx.snap | 10 ++++++++++ src/plugins/charts/public/services/theme/theme.ts | 9 ++++++++- .../slo_details/components/events_chart_panel.tsx | 2 -- 5 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index 7b42fb3275714..afd6ce21ad36f 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -431,6 +431,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 2ce521981866d..241e2ac6f4faf 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -661,6 +661,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -1563,6 +1564,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -2525,6 +2527,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -3489,6 +3492,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -4391,6 +4395,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -5248,6 +5253,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 250a2333792f2..912cf7256df89 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -1003,6 +1003,7 @@ exports[`XYChart component it renders area 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -2524,6 +2525,7 @@ exports[`XYChart component it renders bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -4045,6 +4047,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -5566,6 +5569,7 @@ exports[`XYChart component it renders line 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -7087,6 +7091,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -8608,6 +8613,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -10129,6 +10135,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -11680,6 +11687,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -13439,6 +13447,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -15191,6 +15200,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index c155bbb93702b..b8ee2301dbb82 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -10,7 +10,7 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup, CoreTheme } from '@kbn/core/public'; -import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; +import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; export class ThemeService { /** Returns default charts theme */ @@ -45,6 +45,13 @@ export class ThemeService { return value; }; + /** + * @deprecated No longer need to use theme on top of baseTheme, see https://github.com/elastic/kibana/pull/170914#issuecomment-1823014121 + */ + public useChartsTheme = (): PartialTheme => { + return {}; + }; + /** A React hook for consuming the charts theme */ public useChartsBaseTheme = (): Theme => { const [value, update] = useState(this._chartsBaseTheme$.getValue()); diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx index 10655cd98b121..fdb911c80c206 100644 --- a/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx +++ b/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx @@ -46,7 +46,6 @@ export function EventsChartPanel({ slo, range }: Props) { const { charts, uiSettings } = useKibana().services; const { euiTheme } = useEuiTheme(); const { isLoading, data } = useGetPreviewData(true, slo.indicator, range); - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const chartRef = useRef(null); const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, { @@ -88,7 +87,6 @@ export function EventsChartPanel({ slo, range }: Props) { showLegend showLegendExtra={false} legendPosition={Position.Left} - theme={[theme]} noResults={ } From 6e161aa9598cd59c06fab906a52f838946d74ed5 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 29 Nov 2023 09:32:01 -0700 Subject: [PATCH 17/30] update jest tests and fix margin issue --- .../expression_xy/public/components/xy_chart.tsx | 3 ++- .../common/charts/__snapshots__/donut_chart.test.tsx.snap | 1 + .../apps/lens/group3/dashboard_inline_editing.ts | 1 + .../functional/apps/lens/open_in_lens/agg_based/metric.ts | 2 +- x-pack/test/functional/page_objects/lens_page.ts | 8 ++++---- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 77d3ef35c4b93..638bc72861560 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -31,6 +31,7 @@ import { XYChartSeriesIdentifier, SettingsProps, LEGACY_LIGHT_THEME, + LEGACY_CHART_MARGINS, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -808,7 +809,7 @@ export function XYChart({ // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { // Temporary margin defaults - ...LEGACY_LIGHT_THEME.chartMargins, + ...LEGACY_CHART_MARGINS, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 30aa31c104866..acf41bdf93448 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -444,6 +444,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts index be052791dd5bf..1f09b68fbf4f2 100644 --- a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts +++ b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts @@ -139,6 +139,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { extraText: '', value: '5,727.322', color: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: false, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index 94616f6eda6f7..89cb1d7880baa 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -216,7 +216,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 8e0897e0bbc71..590d95c17d340 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1333,8 +1333,8 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, - async getMetricElementIfExists(selector: string, container: WebElementWrapper) { - return (await findService.descendantExistsByCssSelector(selector, container)) + async getMetricElementIfExists(selector: string, container: WebElementWrapper, timeout?: number) { + return (await findService.descendantExistsByCssSelector(selector, container, timeout)) ? await container.findByCssSelector(selector) : undefined; }, @@ -1355,10 +1355,10 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), trendlineColor: await ( - await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile) + await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile, 500) )?.getAttribute('fill'), showingTrendline: Boolean( - await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) + await this.getMetricElementIfExists('.echSingleMetricSparkline', tile, 500) ), }; }, From b8f771cc8f4f1ea475007086778053163b64898b Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 29 Nov 2023 09:36:20 -0700 Subject: [PATCH 18/30] fix chart margin export constant --- .../expression_xy/public/components/xy_chart.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 638bc72861560..00c0f05330ad2 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -30,8 +30,6 @@ import { Tooltip, XYChartSeriesIdentifier, SettingsProps, - LEGACY_LIGHT_THEME, - LEGACY_CHART_MARGINS, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -116,6 +114,13 @@ import { TooltipHeader } from './tooltip'; import { LegendColorPickerWrapperContext, LegendColorPickerWrapper } from './legend_color_picker'; import { createSplitPoint, getTooltipActions, getXSeriesPoint } from './tooltip/tooltip_actions'; +export const LEGACY_CHART_MARGINS = { + left: 10, + right: 10, + top: 10, + bottom: 10, +}; + declare global { interface Window { /** From fbe0866ffec4aafc5969d9a7bfe1c8ecee2bdff1 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 29 Nov 2023 17:20:19 +0000 Subject: [PATCH 19/30] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- x-pack/test/functional/page_objects/lens_page.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 590d95c17d340..9f71c816be845 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1333,7 +1333,11 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, - async getMetricElementIfExists(selector: string, container: WebElementWrapper, timeout?: number) { + async getMetricElementIfExists( + selector: string, + container: WebElementWrapper, + timeout?: number + ) { return (await findService.descendantExistsByCssSelector(selector, container, timeout)) ? await container.findByCssSelector(selector) : undefined; From 54b921bc991d6af6667e8af9e0758697e19dbc64 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 29 Nov 2023 13:25:15 -0700 Subject: [PATCH 20/30] update functional test assertions and jest snapshots --- package.json | 2 +- .../__snapshots__/xy_chart.test.tsx.snap | 80 +++++++++---------- .../public/components/xy_chart.tsx | 10 +-- .../functional/apps/lens/group6/metric.ts | 24 +++--- .../apps/lens/open_in_lens/agg_based/goal.ts | 27 +++---- yarn.lock | 8 +- 6 files changed, 68 insertions(+), 83 deletions(-) diff --git a/package.json b/package.json index d33d31af823f0..6383dba9c04cc 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.2", + "@elastic/charts": "61.0.3", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 912cf7256df89..60539247d3b3b 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -1127,10 +1127,10 @@ exports[`XYChart component it renders area 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -2649,10 +2649,10 @@ exports[`XYChart component it renders bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -4171,10 +4171,10 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -5693,10 +5693,10 @@ exports[`XYChart component it renders line 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -7215,10 +7215,10 @@ exports[`XYChart component it renders stacked area 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -8737,10 +8737,10 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -10259,10 +10259,10 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -11811,10 +11811,10 @@ exports[`XYChart component split chart should render split chart if both, splitR }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -13571,10 +13571,10 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -15324,10 +15324,10 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 00c0f05330ad2..77d3ef35c4b93 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -30,6 +30,7 @@ import { Tooltip, XYChartSeriesIdentifier, SettingsProps, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -114,13 +115,6 @@ import { TooltipHeader } from './tooltip'; import { LegendColorPickerWrapperContext, LegendColorPickerWrapper } from './legend_color_picker'; import { createSplitPoint, getTooltipActions, getXSeriesPoint } from './tooltip/tooltip_actions'; -export const LEGACY_CHART_MARGINS = { - left: 10, - right: 10, - top: 10, - bottom: 10, -}; - declare global { interface Window { /** @@ -814,7 +808,7 @@ export function XYChart({ // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { // Temporary margin defaults - ...LEGACY_CHART_MARGINS, + ...LEGACY_LIGHT_THEME.chartMargins, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index 0f12b8d6c2da3..e1e2644907096 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,8 +127,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -137,8 +137,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -147,8 +147,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -157,8 +157,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -167,8 +167,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -177,8 +177,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index 3dc37db5ff2cc..d1a63f853144b 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -48,8 +48,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '140.05%', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -81,8 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '131,040,360.81%', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -114,8 +112,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14.37%', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -159,8 +156,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,047,486.03', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -170,8 +166,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '66,144,823.35', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -181,8 +176,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,933,477.76', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -192,8 +186,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,157,898.23', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -203,8 +196,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,365,950.93', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -214,8 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - backgroundColor: 'rgba(0, 0, 0, 0)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingBar: true, showingTrendline: false, diff --git a/yarn.lock b/yarn.lock index ca9a32607abf7..457db5cdfbff8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1544,10 +1544,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.2": - version "61.0.2" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.2.tgz#612a2fa842b65844ca618a0fb0176c89a4167b42" - integrity sha512-WL/5lpEIbni65LYMSZc0Rao3ZJ93a+Iou7Ak9sogG5bDwp40Y1bQdkAeQl2JoYkNGqBMQFtyEZ0pPlZc6OVMnQ== +"@elastic/charts@61.0.3": + version "61.0.3" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.3.tgz#77a2e1f18a39dd4b421a91edfd30f19cde740594" + integrity sha512-TY7hUieULTchNFgvpi6Rt7wMxrYMCmuZ4bbS6szOGBIY4WKJvZCgMfgZ2kUdC5MVG/jEzd8Qu+Xixce7GDpRxw== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From 1c568cdbfeac150248c8d806caba96a003416998 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 30 Nov 2023 08:38:36 -0700 Subject: [PATCH 21/30] update empty color in fn test case --- x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index d1a63f853144b..55cb376db2e24 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -206,7 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, From f6dda7dc80378d4cc08eb23dd51c412d7d6da295 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 1 Dec 2023 10:44:28 -0700 Subject: [PATCH 22/30] fix document count chart --- .../src/document_count_chart/document_count_chart.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx index 3ea94490b2ec1..7bdf00aadcc61 100644 --- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx +++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx @@ -507,6 +507,7 @@ export const DocumentCountChart: FC = (props) => { yScaleType={ScaleType.Linear} xAccessor="time" yAccessors={['value']} + stackAccessors={['true']} data={adjustedChartPoints} timeZone={timeZone} color={barColor} @@ -522,6 +523,7 @@ export const DocumentCountChart: FC = (props) => { yScaleType={ScaleType.Linear} xAccessor="time" yAccessors={['value']} + stackAccessors={['true']} data={adjustedChartPointsSplit} timeZone={timeZone} color={barHighlightColor} From b6ed57602d40b151a6ba7acfe9982fcbf9b1f19c Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 1 Dec 2023 10:46:48 -0700 Subject: [PATCH 23/30] fix memory preview chart theme --- .../memory_usage/nodes_overview/memory_preview_chart.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx b/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx index dc75907e771b2..269dd2e3fb400 100644 --- a/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx +++ b/x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx @@ -18,12 +18,14 @@ import { LineAnnotation, AnnotationDomainType, Tooltip, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { EuiIcon } from '@elastic/eui'; import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common'; import { NodeDeploymentStatsResponse } from '../../../../common/types/trained_models'; import { useFieldFormatter } from '../../contexts/kibana/use_field_formatter'; import { getMemoryItemColor } from '../memory_item_colors'; +import { useMlKibana } from '../../contexts/kibana'; interface MemoryPreviewChartProps { memoryOverview: NodeDeploymentStatsResponse['memory_overview']; @@ -31,6 +33,9 @@ interface MemoryPreviewChartProps { export const MemoryPreviewChart: FC = ({ memoryOverview }) => { const bytesFormatter = useFieldFormatter(FIELD_FORMAT_IDS.BYTES); + const { + services: { charts: chartsService }, + } = useMlKibana(); const groups = useMemo( () => ({ @@ -117,7 +122,8 @@ export const MemoryPreviewChart: FC = ({ memoryOverview } /> From 2cc35413fc2eb1a27f4891fc88a1d137e621521a Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 1 Dec 2023 12:10:56 -0700 Subject: [PATCH 24/30] update chart setting usages with no defined themes This updates cases where no theme was used to the previously used legacy chart theme --- .../app/pages/page_reducer_stream/index.tsx | 16 +++++- .../public/components/tagcloud_component.tsx | 10 +++- .../ml/data_grid/components/column_chart.tsx | 5 +- .../vulnerability_trend_graph.tsx | 10 +++- .../boolean_content.tsx | 10 +++- .../field_data_row/column_chart.tsx | 12 ++++- .../metric_distribution_chart.tsx | 8 ++- .../charts/data_drift_distribution_chart.tsx | 17 ++++++- .../charts/overlap_distribution_chart.tsx | 8 ++- .../charts/single_distribution_chart.tsx | 17 ++++++- .../analytics_collection_card.tsx | 12 ++++- .../single_metric_sparkline.tsx | 18 +++---- .../decision_path_chart.tsx | 4 +- .../feature_importance_summary.tsx | 4 +- .../explorer_charts_container.js | 11 +++- .../explorer/swimlane_container.tsx | 4 +- .../datafeed_chart_flyout.tsx | 4 +- .../charts/anomaly_chart/anomaly_chart.tsx | 5 +- .../event_rate_chart/event_rate_chart.tsx | 4 +- .../criterion_preview_chart.tsx | 2 +- .../components/expression_chart.tsx | 3 ++ .../embeddable/slo/overview/slo_overview.tsx | 4 +- .../components/sections/apm/apm_section.tsx | 6 +-- .../components/sections/logs/logs_section.tsx | 6 +-- .../sections/uptime/uptime_section.tsx | 6 +-- .../components/card_view/slo_card_item.tsx | 1 + .../public/hooks/use_chart_theme.tsx | 51 ++++++++++--------- .../observability_shared/public/index.ts | 2 +- .../public/components/flamegraph/index.tsx | 3 ++ .../common/components/charts/common.tsx | 2 +- .../monitor_status/monitor_status_panel.tsx | 4 +- .../overview/overview/metric_item.tsx | 1 + .../network_timings_donut.tsx | 1 + .../waterfall/waterfall_bar_chart.tsx | 8 +-- .../waterfall/waterfall_chart_fixed_axis.tsx | 7 +-- ...chart_theme.ts => use_base_chart_theme.ts} | 9 ++-- .../components/barchart/barchart.tsx | 12 ++++- .../components/execution_duration_chart.tsx | 13 ++++- .../common/charts/duration_chart.tsx | 1 + .../common/charts/monitor_bar_series.tsx | 1 + .../common/charts/ping_histogram.tsx | 1 + .../components/waterfall_bar_chart.tsx | 7 +-- .../components/waterfall_chart_fixed_axis.tsx | 12 +++-- ...chart_theme.ts => use_base_chart_theme.ts} | 9 ++-- 44 files changed, 250 insertions(+), 101 deletions(-) rename x-pack/plugins/synthetics/public/hooks/{use_chart_theme.ts => use_base_chart_theme.ts} (76%) rename x-pack/plugins/uptime/public/legacy_uptime/hooks/{use_chart_theme.ts => use_base_chart_theme.ts} (76%) diff --git a/examples/response_stream/public/containers/app/pages/page_reducer_stream/index.tsx b/examples/response_stream/public/containers/app/pages/page_reducer_stream/index.tsx index a55f25292cf5d..cfa672748f7ff 100644 --- a/examples/response_stream/public/containers/app/pages/page_reducer_stream/index.tsx +++ b/examples/response_stream/public/containers/app/pages/page_reducer_stream/index.tsx @@ -8,7 +8,15 @@ import React, { useEffect, useState, FC } from 'react'; -import { Chart, Settings, Axis, BarSeries, Position, ScaleType } from '@elastic/charts'; +import { + Chart, + Settings, + Axis, + BarSeries, + Position, + ScaleType, + LEGACY_LIGHT_THEME, +} from '@elastic/charts'; import { EuiBadge, @@ -113,7 +121,11 @@ export const PageReducerStream: FC = () => {
- + diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx index a00bbb93e4a58..0c7f855c66390 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx @@ -12,7 +12,13 @@ import { i18n } from '@kbn/i18n'; import { throttle } from 'lodash'; import { EuiIconTip, EuiResizeObserver } from '@elastic/eui'; import { IconChartTagcloud } from '@kbn/chart-icons'; -import { Chart, Settings, Wordcloud, RenderChangeListener } from '@elastic/charts'; +import { + Chart, + Settings, + Wordcloud, + RenderChangeListener, + LEGACY_LIGHT_THEME, +} from '@elastic/charts'; import { EmptyPlaceholder } from '@kbn/charts-plugin/public'; import { PaletteRegistry, @@ -234,6 +240,8 @@ export const TagCloudChart = ({
= ({
{ >
- + = ({ config, onAddFilter }) = tickFormat={(d: any) => getFormattedValue(d, count)} /> - + = ({ {!isUnsupportedChartData(chartData) && data.length > 0 && ( i)} theme={{ chartMargins: zeroSize, diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx index 179968580653b..0ea2bff99ae0f 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx @@ -19,6 +19,7 @@ import { Settings, TooltipHeaderFormatter, Tooltip, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { MetricDistributionChartTooltipHeader } from './metric_distribution_chart_tooltip_header'; @@ -84,7 +85,12 @@ export const MetricDistributionChart: FC = ({ > - + - + - + - + y && y !== 0) && ( = ({ metric, timeRange }) => { const isDarkMode = useIsDarkMode(); const timeZone = useKibanaTimeZoneSetting(); - - const theme = useMemo( - () => [ - // localThemeOverride, - EUI_SPARKLINE_THEME_PARTIAL, - isDarkMode ? DARK_THEME : LIGHT_THEME, - ], - [isDarkMode] - ); + const baseTheme = useMemo(() => (isDarkMode ? DARK_THEME : LIGHT_THEME), [isDarkMode]); const xDomain = useMemo( () => ({ @@ -61,7 +53,13 @@ export const SingleMetricSparkline: React.FunctionComponent<{ return ( - + diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx index 00e52934b0627..a3e55a0e09064 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx @@ -19,6 +19,7 @@ import { AxisStyle, PartialTheme, BarSeriesProps, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -295,8 +296,9 @@ export const FeatureImportanceSummaryPanel: FC diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index bd0ce88e86d34..9e84a1f546b04 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -43,7 +43,7 @@ import { ExplorerChartsErrorCallOuts } from './explorer_charts_error_callouts'; import { addItemToRecentlyAccessed } from '../../util/recently_accessed'; import { EmbeddedMapComponentWrapper } from './explorer_chart_embedded_map'; import { useActiveCursor } from '@kbn/charts-plugin/public'; -import { BarSeries, Chart, Settings } from '@elastic/charts'; +import { BarSeries, Chart, Settings, LEGACY_LIGHT_THEME } from '@elastic/charts'; import useObservable from 'react-use/lib/useObservable'; import { escapeKueryForFieldValuePair } from '../../util/string_utils'; @@ -238,7 +238,14 @@ function ExplorerChartContainer({ {/* so that we can use chart's ref which controls the activeCursor api */}
- } width={0} height={0} locale={i18n.getLocale()} /> + } + width={0} + height={0} + locale={i18n.getLocale()} + /> {/* Just need an empty chart to access cursor service */} diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx index 65ec5c9350269..7051060b6a255 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx +++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx @@ -31,6 +31,7 @@ import { TooltipProps, TooltipValue, Tooltip, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import moment from 'moment'; import { i18n } from '@kbn/i18n'; @@ -449,8 +450,9 @@ export const SwimlaneContainer: FC = ({ = ({ annotations.lines[0].datum.modelSnapshot ); }} - // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md theme={{ lineSeriesStyle: { point: { @@ -427,6 +427,8 @@ export const DatafeedChartFlyout: FC = ({ }, }, }} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md + baseTheme={LEGACY_LIGHT_THEME} locale={i18n.getLocale()} /> = ({ diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx index 0afee34e406d7..04553dda99255 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx @@ -15,6 +15,7 @@ import { BrushEndListener, PartialTheme, Tooltip, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; @@ -77,8 +78,9 @@ export const EventRateChart: FC = ({ diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx index aaecb59df08dd..806844e2531f6 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx @@ -81,7 +81,7 @@ export const getDomain = (series: Series, stacked: boolean = false) => { return { yMin: min || 0, yMax: max || 0, xMin: minTimestamp, xMax: maxTimestamp }; }; -// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md +// TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md export const getChartTheme = (isDarkMode: boolean): Theme => { return isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; }; diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/expression_chart.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/expression_chart.tsx index c18b2860df95d..010642acdf551 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/expression_chart.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/expression_chart.tsx @@ -15,6 +15,7 @@ import { RectAnnotation, Settings, Tooltip, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -192,6 +193,8 @@ export function ExpressionChart({ tooltip: { visible: true }, }} theme={getChartTheme(isDarkMode)} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md + baseTheme={LEGACY_LIGHT_THEME} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx b/x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx index 873c37f89eca2..c3bf3b64b7415 100644 --- a/x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx +++ b/x-pack/plugins/observability/public/embeddable/slo/overview/slo_overview.tsx @@ -8,7 +8,7 @@ import React, { useCallback, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiIcon, useEuiBackgroundColor } from '@elastic/eui'; -import { Chart, Metric, MetricTrendShape, Settings } from '@elastic/charts'; +import { Chart, Metric, MetricTrendShape, Settings, LEGACY_LIGHT_THEME } from '@elastic/charts'; import numeral from '@elastic/numeral'; import { ALL_VALUE } from '@kbn/slo-schema'; import { EuiLoadingChart } from '@elastic/eui'; @@ -141,6 +141,8 @@ export function SloOverview({ <> { navigateToUrl( basePath.prepend( diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx index cfbe160590401..ed6f55006c5e7 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx @@ -22,7 +22,7 @@ import moment from 'moment'; import React, { useContext } from 'react'; import { useHistory } from 'react-router-dom'; import { ThemeContext } from 'styled-components'; -import { useChartTheme, FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes, FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; import { useDatePickerContext } from '../../../../../hooks/use_date_picker_context'; import { SectionContainer } from '../section_container'; import { getDataHandler } from '../../../../../context/has_data_context/data_handler'; @@ -55,7 +55,7 @@ function formatTpmStat(value?: number) { export function APMSection({ bucketSize }: Props) { const theme = useContext(ThemeContext); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const history = useHistory(); const { forceUpdate, hasDataMap } = useHasData(); const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } = @@ -147,7 +147,7 @@ export function APMSection({ bucketSize }: Props) { onBrushEnd({ x: (event as XYBrushEvent).x, history })} - theme={chartTheme} + {...chartThemes} showLegend={false} xDomain={{ min, max }} locale={i18n.getLocale()} diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx index 4097fbcb5bb87..63087aad6dd30 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx @@ -22,7 +22,7 @@ import { isEmpty } from 'lodash'; import moment from 'moment'; import React, { Fragment } from 'react'; import { useHistory } from 'react-router-dom'; -import { useChartTheme, FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes, FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; import { SectionContainer } from '../section_container'; import { getDataHandler } from '../../../../../context/has_data_context/data_handler'; import { useHasData } from '../../../../../hooks/use_has_data'; @@ -55,7 +55,7 @@ function getColorPerItem(series?: LogsFetchDataResponse['series']) { export function LogsSection({ bucketSize }: Props) { const history = useHistory(); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const { forceUpdate, hasDataMap } = useHasData(); const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } = useDatePickerContext(); @@ -138,7 +138,7 @@ export function LogsSection({ bucketSize }: Props) { onBrushEnd({ x: (event as XYBrushEvent).x, history })} - theme={chartTheme} + {...chartThemes} showLegend legendPosition={Position.Right} xDomain={{ min, max }} diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/uptime/uptime_section.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/uptime/uptime_section.tsx index ffdd3b5ab7026..673ee81c9b79c 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/uptime/uptime_section.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/uptime/uptime_section.tsx @@ -25,7 +25,7 @@ import { useHistory } from 'react-router-dom'; import { ThemeContext } from 'styled-components'; import { useTimeZone, - useChartTheme, + useChartThemes, useFetcher, FETCH_STATUS, } from '@kbn/observability-shared-plugin/public'; @@ -45,7 +45,7 @@ interface Props { export function UptimeSection({ bucketSize }: Props) { const theme = useContext(ThemeContext); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const history = useHistory(); const { forceUpdate, hasDataMap } = useHasData(); const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } = @@ -146,7 +146,7 @@ export function UptimeSection({ bucketSize }: Props) { onBrushEnd({ x: (event as XYBrushEvent).x, history })} - theme={chartTheme} + {...chartThemes} showLegend={false} legendPosition={Position.Right} xDomain={{ min, max }} diff --git a/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx b/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx index 07ad3caf1fd00..c465f84529c90 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx @@ -108,6 +108,7 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, cards > { if (isMetricElementEvent(d)) { diff --git a/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx index 07bc2726367d6..20270cbe1dd13 100644 --- a/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx +++ b/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx @@ -5,35 +5,36 @@ * 2.0. */ -import { PartialTheme, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { LIGHT_THEME, DARK_THEME, SettingsProps, PartialTheme } from '@elastic/charts'; import { useMemo } from 'react'; import { useTheme } from './use_theme'; -export function useChartTheme(): PartialTheme[] { +export function useChartThemes(): Pick { const theme = useTheme(); - const baseChartTheme = theme.darkMode ? DARK_THEME : LIGHT_THEME; + const baseTheme = theme.darkMode ? DARK_THEME : LIGHT_THEME; - return useMemo( - () => [ - { - chartMargins: { - left: 10, - right: 10, - top: 35, - bottom: 10, - }, - background: { - color: 'transparent', - }, - lineSeriesStyle: { - point: { visible: false }, - }, - areaSeriesStyle: { - point: { visible: false }, - }, + return useMemo(() => { + const themeOverrides: PartialTheme = { + chartMargins: { + left: 10, + right: 10, + top: 35, + bottom: 10, }, - baseChartTheme, - ], - [baseChartTheme] - ); + background: { + color: 'transparent', + }, + lineSeriesStyle: { + point: { visible: false }, + }, + areaSeriesStyle: { + point: { visible: false }, + }, + }; + + return { + themeOverrides, + baseTheme, + }; + }, [baseTheme]); } diff --git a/x-pack/plugins/observability_shared/public/index.ts b/x-pack/plugins/observability_shared/public/index.ts index 8d8556e509e25..fba157bc04359 100644 --- a/x-pack/plugins/observability_shared/public/index.ts +++ b/x-pack/plugins/observability_shared/public/index.ts @@ -58,7 +58,7 @@ export { export type { TrackEvent } from './hooks/use_track_metric'; export { useQuickTimeRanges } from './hooks/use_quick_time_ranges'; export { useTimeZone } from './hooks/use_time_zone'; -export { useChartTheme } from './hooks/use_chart_theme'; +export { useChartThemes } from './hooks/use_chart_theme'; export { useLinkProps, shouldHandleLinkEvent } from './hooks/use_link_props'; export type { LinkDescriptor, Options as UseLinkPropsOptions } from './hooks/use_link_props'; export { NavigationWarningPromptProvider, Prompt } from './components/navigation_warning_prompt'; diff --git a/x-pack/plugins/profiling/public/components/flamegraph/index.tsx b/x-pack/plugins/profiling/public/components/flamegraph/index.tsx index 56b0dcf62412a..bdac73a2e5b64 100644 --- a/x-pack/plugins/profiling/public/components/flamegraph/index.tsx +++ b/x-pack/plugins/profiling/public/components/flamegraph/index.tsx @@ -14,6 +14,7 @@ import { Settings, Tooltip, FlameSpec, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import { Maybe } from '@kbn/observability-plugin/common/typings'; @@ -119,6 +120,8 @@ export function FlameGraph({ { const selectedElement = elements[0] as Maybe; if (Number.isNaN(selectedElement?.vmIndex)) { diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx index 5bc211bc6f375..73fab4a3a8890 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx @@ -114,7 +114,7 @@ const theme: PartialTheme = { }; export const useThemes = (): { baseTheme: Theme; theme: PartialTheme } => { const isDarkMode = useUiSetting(DEFAULT_DARK_MODE); - // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md const baseTheme = isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; return { baseTheme, diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx index 84a9dc772d04c..fc75701098761 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx @@ -8,7 +8,7 @@ import React, { useMemo } from 'react'; import { EuiPanel, useEuiTheme, EuiResizeObserver, EuiSpacer } from '@elastic/eui'; -import { Chart, Settings, Heatmap, ScaleType, Tooltip } from '@elastic/charts'; +import { Chart, Settings, Heatmap, ScaleType, Tooltip, LEGACY_LIGHT_THEME } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { usePingStatusesIsLoading } from '../hooks/use_ping_statuses'; import { MonitorStatusHeader } from './monitor_status_header'; @@ -73,6 +73,8 @@ export const MonitorStatusPanel = ({ showLegend={false} xDomain={xDomain} theme={{ heatmap }} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md + baseTheme={LEGACY_LIGHT_THEME} onBrushEnd={(brushArea) => { onBrushed?.(getBrushData(brushArea)); }} diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx index 2eaad6a876133..caea2441ae364 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx @@ -119,6 +119,7 @@ export const MetricItem = ({ }); } }} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md baseTheme={DARK_THEME} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx index 193d86587fd93..96c75246193b1 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx @@ -70,6 +70,7 @@ export const NetworkTimingsDonut = () => { { - const theme = useChartTheme(); + const baseChartTheme = useBaseChartTheme(); const { euiTheme } = useEuiTheme(); const { onElementClick, onProjectionClick } = useWaterfallContext(); const handleElementClick = useMemo(() => onElementClick, [onElementClick]); @@ -100,7 +100,9 @@ export const WaterfallBarChart = ({ { - const theme = useChartTheme(); + const baseChartTheme = useBaseChartTheme(); const { euiTheme } = useEuiTheme(); return ( @@ -48,8 +48,9 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor } color: 'transparent', }, }, - theme, ]} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md + baseTheme={baseChartTheme} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts b/x-pack/plugins/synthetics/public/hooks/use_base_chart_theme.ts similarity index 76% rename from x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts rename to x-pack/plugins/synthetics/public/hooks/use_base_chart_theme.ts index 24582b475dbec..be10a050905e6 100644 --- a/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts +++ b/x-pack/plugins/synthetics/public/hooks/use_base_chart_theme.ts @@ -5,16 +5,13 @@ * 2.0. */ -import { DARK_THEME, LIGHT_THEME } from '@elastic/charts'; +import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; import { useMemo } from 'react'; import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; -export const useChartTheme = () => { +export const useBaseChartTheme = (): Theme => { const [darkMode] = useUiSetting$('theme:darkMode'); - - const theme = useMemo(() => { + return useMemo(() => { return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); - - return theme; }; diff --git a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.tsx b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.tsx index 31fff05ab2dce..3e3c47216ebc6 100644 --- a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.tsx +++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.tsx @@ -6,7 +6,15 @@ */ import React, { VFC } from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { + Axis, + BarSeries, + Chart, + Position, + ScaleType, + Settings, + LEGACY_LIGHT_THEME, +} from '@elastic/charts'; import { EuiComboBoxOptionOption, EuiThemeProvider } from '@elastic/eui'; import { TimeRangeBounds } from '@kbn/data-plugin/common'; import { i18n } from '@kbn/i18n'; @@ -51,6 +59,8 @@ export const IndicatorsBarChart: VFC = ({ = ({ <> = ({ onBrushEnd={onBrushEnd} onElementClick={onBarClicked} locale={i18n.getLocale()} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md {...chartTheme} /> { - const theme = useChartTheme(); + const baseChartTheme = useBaseChartTheme(); const { onElementClick, onProjectionClick } = useWaterfallContext(); const handleElementClick = useMemo(() => onElementClick, [onElementClick]); const handleProjectionClick = useMemo(() => onProjectionClick, [onProjectionClick]); @@ -97,7 +97,8 @@ export const WaterfallBarChart = ({ { - const theme = useChartTheme(); + const baseChartTheme = useBaseChartTheme(); return ( - + { +export const useBaseChartTheme = (): Theme => { const [darkMode] = useUiSetting$('theme:darkMode'); - - const theme = useMemo(() => { + return useMemo(() => { return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); - - return theme; }; From fef7db7963228d3ef9a3806f59aed49c2dc158f1 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 1 Dec 2023 13:45:07 -0700 Subject: [PATCH 25/30] fix useChartThemes usages and type errors --- .../services_table/storage_details_per_service.tsx | 7 ++++--- .../components/app/storage_explorer/storage_chart.tsx | 7 ++++--- .../components/shared/charts/breakdown_chart/index.tsx | 7 ++++--- .../shared/charts/duration_distribution_chart/index.tsx | 7 ++++--- .../charts/instances_latency_distribution_chart/index.tsx | 7 ++++--- .../public/components/shared/charts/spark_plot/index.tsx | 7 ++++--- .../public/components/shared/charts/timeseries_chart.tsx | 7 ++++--- .../components/shared/critical_path_flamegraph/index.tsx | 7 ++++--- .../observability_shared/public/hooks/use_chart_theme.tsx | 6 +++--- 9 files changed, 35 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx b/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx index 96c28caa3134d..62a4aa6a1f38c 100644 --- a/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx +++ b/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx @@ -17,7 +17,7 @@ import { EuiFlexGrid, EuiSpacer, } from '@elastic/eui'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { Chart, Partition, @@ -80,7 +80,7 @@ export function StorageDetailsPerService({ indexLifecyclePhase, }: Props) { const { core } = useApmPluginContext(); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const router = useApmRouter(); const { euiTheme } = useEuiTheme(); @@ -202,8 +202,9 @@ export function StorageDetailsPerService({ emptySizeRatio: 0.3, }, }, - ...chartTheme, + ...chartThemes.theme, ]} + baseTheme={chartThemes.baseTheme} locale={i18n.getLocale()} showLegend /> diff --git a/x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx b/x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx index e0a3eec1eb228..98f130c71d461 100644 --- a/x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx +++ b/x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx @@ -15,7 +15,7 @@ import { ScaleType, Settings, } from '@elastic/charts'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { i18n } from '@kbn/i18n'; import { useProgressiveFetcher } from '../../../hooks/use_progressive_fetcher'; import { useTimeRange } from '../../../hooks/use_time_range'; @@ -29,7 +29,7 @@ import { asDynamicBytes } from '../../../../common/utils/formatters'; export function StorageChart() { const { core } = useApmPluginContext(); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const euiPaletteColorBlindRotations = 3; const groupedPalette = euiPaletteColorBlind({ @@ -99,8 +99,9 @@ export function StorageChart() { area: { opacity: 1 }, }, }, - ...chartTheme, + ...chartThemes.theme, ]} + baseTheme={chartThemes.baseTheme} showLegend legendPosition={Position.Right} locale={i18n.getLocale()} diff --git a/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx index c215c50c9e327..89e409aacd2f9 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx @@ -25,7 +25,7 @@ import { i18n } from '@kbn/i18n'; import moment from 'moment'; import React from 'react'; import { useHistory } from 'react-router-dom'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { Annotation } from '../../../../../common/annotations'; import { asAbsoluteDateTime, @@ -70,7 +70,7 @@ export function BreakdownChart({ id, }: Props) { const history = useHistory(); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const { core } = useApmPluginContext(); const { chartRef, updatePointerEvent } = useChartPointerEventContext(); const { @@ -115,7 +115,8 @@ export function BreakdownChart({ showLegend showLegendExtra legendPosition={Position.Bottom} - theme={chartTheme} + theme={chartThemes.theme} + baseTheme={chartThemes.baseTheme} xDomain={{ min, max }} flatLegend onPointerUpdate={updatePointerEvent} diff --git a/x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx index ac1b4251e83f8..9d34e2b8b3280 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx @@ -29,7 +29,7 @@ import { euiPaletteColorBlind } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { ProcessorEvent } from '@kbn/observability-plugin/common'; import { getDurationFormatter } from '../../../../../common/utils/formatters'; @@ -111,7 +111,7 @@ export function DurationDistributionChart({ status, eventType, }: DurationDistributionChartProps) { - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const euiTheme = useTheme(); const markerPercentile = DEFAULT_PERCENTILE_THRESHOLD; @@ -202,8 +202,9 @@ export function DurationDistributionChart({ }, }, }, - ...chartTheme, + ...chartThemes.theme, ]} + baseTheme={chartThemes.baseTheme} showLegend={true} legendPosition={Position.Bottom} onBrushEnd={onChartSelection} diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx index 02ab62585643a..c7f5ab023713c 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx @@ -23,7 +23,7 @@ import { EuiPanel, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useHistory } from 'react-router-dom'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_text'; import { SERVICE_NODE_NAME } from '../../../../../common/es_fields/apm'; import { @@ -58,7 +58,7 @@ export function InstancesLatencyDistributionChart({ const hasData = items.length > 0; const theme = useTheme(); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const maxLatency = Math.max(...items.map((item) => item.latency ?? 0)); const latencyFormatter = getDurationFormatter(maxLatency); @@ -129,7 +129,8 @@ export function InstancesLatencyDistributionChart({ legendPosition={Position.Bottom} onElementClick={handleElementClick} showLegend - theme={chartTheme} + theme={chartThemes.theme} + baseTheme={chartThemes.baseTheme} xDomain={xDomain} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx index 3375a8186e3f1..f7baf95c488ad 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx @@ -23,7 +23,7 @@ import { EuiLoadingChart, } from '@elastic/eui'; import React from 'react'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { i18n } from '@kbn/i18n'; import { Coordinate } from '../../../../../typings/timeseries'; import { useTheme } from '../../../../hooks/use_theme'; @@ -103,7 +103,7 @@ function SparkPlotItem({ comparisonSeriesColor?: string; }) { const theme = useTheme(); - const defaultChartTheme = useChartTheme(); + const defaultChartThemes = useChartThemes(); const comparisonChartTheme = getComparisonChartTheme(); const hasComparisonSeries = !!comparisonSeries?.length; @@ -142,7 +142,8 @@ function SparkPlotItem({ return ( diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx index 1fd876d61b3d3..cc8f85f347ddd 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx @@ -28,7 +28,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { ReactElement } from 'react'; import { useHistory } from 'react-router-dom'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { isExpectedBoundsComparison } from '../time_comparison/get_comparison_options'; import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context'; @@ -74,7 +74,7 @@ export function TimeseriesChart({ const history = useHistory(); const { chartRef, updatePointerEvent } = useChartPointerEventContext(); const theme = useTheme(); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const anomalyChartTimeseries = getChartAnomalyTimeseries({ anomalyTimeseries, theme, @@ -189,8 +189,9 @@ export function TimeseriesChart({ line: { visible: false }, }, }, - ...chartTheme, + ...chartThemes.theme, ]} + baseTheme={chartThemes.baseTheme} onPointerUpdate={updatePointerEvent} externalPointerEvents={{ tooltip: { visible: true }, diff --git a/x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx b/x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx index 6a505efee23b2..2e694070ceaed 100644 --- a/x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx @@ -12,7 +12,7 @@ import { euiPaletteColorBlind, } from '@elastic/eui'; import { css } from '@emotion/css'; -import { useChartTheme } from '@kbn/observability-shared-plugin/public'; +import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { uniqueId } from 'lodash'; import React, { useMemo, useRef } from 'react'; import { i18n } from '@kbn/i18n'; @@ -73,7 +73,7 @@ export function CriticalPathFlamegraph( [timerange, traceIds, serviceName, transactionName] ); - const chartTheme = useChartTheme(); + const chartThemes = useChartThemes(); const isLoading = isPending(traceIdsFetchStatus) || isPending(criticalPathFetchStatus); @@ -143,8 +143,9 @@ export function CriticalPathFlamegraph( chartMargins: themeOverrides.chartMargins, chartPaddings: themeOverrides.chartPaddings, }, - ...chartTheme, + ...chartThemes.theme, ]} + baseTheme={chartThemes.baseTheme} onElementClick={(elements) => {}} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx index 20270cbe1dd13..fc989e0026943 100644 --- a/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx +++ b/x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx @@ -5,11 +5,11 @@ * 2.0. */ -import { LIGHT_THEME, DARK_THEME, SettingsProps, PartialTheme } from '@elastic/charts'; +import { LIGHT_THEME, DARK_THEME, PartialTheme, Theme } from '@elastic/charts'; import { useMemo } from 'react'; import { useTheme } from './use_theme'; -export function useChartThemes(): Pick { +export function useChartThemes(): { baseTheme: Theme; theme: PartialTheme[] } { const theme = useTheme(); const baseTheme = theme.darkMode ? DARK_THEME : LIGHT_THEME; @@ -33,7 +33,7 @@ export function useChartThemes(): Pick { }; return { - themeOverrides, + theme: [themeOverrides], baseTheme, }; }, [baseTheme]); From ae7a83dfcdcef7544330daa28f39305020f1a451 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 4 Dec 2023 09:05:28 -0700 Subject: [PATCH 26/30] fix charts with no settings used --- .../public/components/diagnostics_flyout.tsx | 14 +++++++++++++- .../components/chart/metric_chart_wrapper.tsx | 13 ++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/plugins/files_management/public/components/diagnostics_flyout.tsx b/src/plugins/files_management/public/components/diagnostics_flyout.tsx index 0eef44d26188f..8a9528db4472c 100644 --- a/src/plugins/files_management/public/components/diagnostics_flyout.tsx +++ b/src/plugins/files_management/public/components/diagnostics_flyout.tsx @@ -21,7 +21,15 @@ import { EuiSpacer, EuiFlexItem, } from '@elastic/eui'; -import { Chart, Axis, Position, HistogramBarSeries, ScaleType } from '@elastic/charts'; +import { + Chart, + Axis, + Position, + HistogramBarSeries, + ScaleType, + Settings, + LEGACY_LIGHT_THEME, +} from '@elastic/charts'; import numeral from '@elastic/numeral'; import type { FunctionComponent } from 'react'; import React from 'react'; @@ -90,6 +98,10 @@ export const DiagnosticsFlyout: FunctionComponent = ({ onClose }) => {

{i18nTexts.diagnosticsBreakdownsStatus}

+ + From f68cf642cbefc66641e5b79d4b6c488c27223509 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 4 Dec 2023 09:27:41 -0700 Subject: [PATCH 27/30] assign stack accessor to current usage of histogram bar series --- .../profiling/public/components/stacked_bar_chart/index.tsx | 1 + .../alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx b/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx index ad4aedfc81b46..2d73d795c09ca 100644 --- a/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx +++ b/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx @@ -132,6 +132,7 @@ export function StackedBarChart({ color={chart.Color} xAccessor={'Timestamp'} yAccessors={['Count']} + stackAccessors={['true']} stackMode={asPercentages ? StackMode.Percentage : undefined} xScaleType={ScaleType.Time} timeZone={timeZone} diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx index 7137ba563d365..9f96b375abc98 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx @@ -95,6 +95,7 @@ export const AlertsHistogram = React.memo( yScaleType={ScaleType.Linear} xAccessor="x" yAccessors={yAccessors} + stackAccessors={['true']} splitSeriesAccessors={splitSeriesAccessors} data={data} /> From 385536d44b8b914e0c51289d0574a79c701d05b5 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 8 Dec 2023 11:14:17 -0700 Subject: [PATCH 28/30] use previous theme on slo_card_item chart --- .../public/pages/slos/components/card_view/slo_card_item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx b/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx index ba753c620edb5..dad94a1a0c984 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx @@ -9,8 +9,8 @@ import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { Chart, - DARK_THEME, isMetricElementEvent, + LEGACY_DARK_THEME, Metric, MetricTrendShape, Settings, @@ -154,7 +154,7 @@ export function SloCardChart({ { if (isMetricElementEvent(d)) { navigateToUrl(sloDetailsUrl); From eb7807f7981a7e508aa1f1eec998a9e4464e6926 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Fri, 8 Dec 2023 18:50:45 +0000 Subject: [PATCH 29/30] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7852202821f5a..b682006f1267c 100644 --- a/package.json +++ b/package.json @@ -1658,4 +1658,4 @@ "yargs": "^15.4.1", "yarn-deduplicate": "^6.0.2" } -} +} \ No newline at end of file From 2ebefe7403b10d85d968c14f34c05b18961d7cdc Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 8 Dec 2023 13:52:48 -0700 Subject: [PATCH 30/30] udapte jest snapshot --- .../common/charts/__snapshots__/donut_chart.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index ccce17c89737b..acf41bdf93448 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -523,7 +523,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 500, + "maxWidth": 260, }, } }