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/package.json b/package.json index 74e36e83621af..524e1e02cf6a2 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.1", + "@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/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 3f5039a96e9f6..c2d5fd0f32632 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 @@ -29,6 +29,7 @@ import { Settings, TooltipType, Tooltip, + PartialTheme, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query'; @@ -223,22 +224,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, @@ -486,7 +483,7 @@ const FieldStatsComponent: React.FC = ({ = ({ 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..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 @@ -6,7 +6,514 @@ exports[`GaugeComponent renders the chart 1`] = ` > 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 e541918801b59..d36f8f54b9365 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 @@ -155,7 +155,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(() => { @@ -541,13 +540,8 @@ export const HeatmapComponent: FC = memo( grid: { stroke: { width: - args.gridConfig.strokeWidth ?? - chartTheme.axes?.gridLine?.horizontal?.strokeWidth ?? - 1, - color: - args.gridConfig.strokeColor ?? - chartTheme.axes?.gridLine?.horizontal?.stroke ?? - '#D3DAE6', + args.gridConfig.strokeWidth ?? chartBaseTheme.axes.gridLine.horizontal.strokeWidth, + color: args.gridConfig.strokeColor ?? chartBaseTheme.axes.gridLine.horizontal.stroke, }, }, cell: { @@ -566,13 +560,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: { @@ -713,7 +707,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 a0d02562d7623..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 @@ -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; @@ -327,18 +325,18 @@ export const MetricVis = ({ locale={i18n.getLocale()} theme={[ { - background: { color: 'transparent' }, + background: { color: defaultColor }, metric: { - background: defaultColor, barBackground: euiThemeVars.euiColorLightShade, + emptyBackground: euiThemeVars.euiColorEmptyShade, + blendingBackground: euiThemeVars.euiColorEmptyShade, }, - ...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/__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..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 @@ -236,7 +236,514 @@ 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 {}, + ] + } + /> + { hasOpenedOnAggBasedEditor, } = props; const visParams = useMemo(() => filterOutConfig(visType, preVisParams), [preVisParams, visType]); - const chartTheme = props.chartsThemeService.useChartsTheme(); const chartBaseTheme = props.chartsThemeService.useChartsBaseTheme(); const { @@ -377,12 +376,19 @@ 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 +580,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_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 = ({
(null); - const chartTheme = chartsThemeService.useChartsTheme(); const chartBaseTheme = chartsThemeService.useChartsBaseTheme(); const darkMode = chartsThemeService.useDarkMode(); const filteredLayers = getFilteredLayers(layers); @@ -796,9 +796,7 @@ export function XYChart({ legendSize={LegendSizeToPixels[legend.legendSize ?? DEFAULT_LEGEND_SIZE]} theme={[ { - ...chartTheme, barSeriesStyle: { - ...chartTheme.barSeriesStyle, ...valueLabelsStyling, }, background: { @@ -809,7 +807,8 @@ export function XYChart({ }, // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { - ...chartTheme.chartPaddings, + // Temporary margin defaults + ...LEGACY_LIGHT_THEME.chartMargins, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, @@ -993,9 +992,9 @@ export function XYChart({ rangeAnnotations.length && shouldHideDetails ? 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 + ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding ?? 0) + + chartBaseTheme.axes.tickLabel.fontSize + : Math.max(chartBaseTheme.axes.tickLine.size, OUTSIDE_RECT_ANNOTATION_WIDTH) } /> ) : null} 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/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..b8ee2301dbb82 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -11,20 +11,14 @@ 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'; 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,22 +45,11 @@ export class ThemeService { return value; }; - /** A React hook for consuming the charts theme */ + /** + * @deprecated No longer need to use theme on top of baseTheme, see https://github.com/elastic/kibana/pull/170914#issuecomment-1823014121 + */ 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; + return {}; }; /** A React hook for consuming the charts theme */ @@ -91,8 +74,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); }); } 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}

+ (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 9f88adf53ca45..0874ef8593258 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/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..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 @@ -7,27 +7,29 @@ */ 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/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 e6c4e7b573335..615816852a13b 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 @@ -190,7 +190,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' }); @@ -474,7 +473,6 @@ export const DocumentCountChart: FC = (props) => { setMlBrushMarginLeft(projection.left); setMlBrushWidth(projection.width); }} - theme={chartTheme} baseTheme={chartBaseTheme} debugState={window._echDebugStateFlag ?? false} showLegend={false} @@ -499,6 +497,7 @@ export const DocumentCountChart: FC = (props) => { yScaleType={ScaleType.Linear} xAccessor="time" yAccessors={['value']} + stackAccessors={['true']} data={adjustedChartPoints} timeZone={timeZone} color={barColor} @@ -514,6 +513,7 @@ export const DocumentCountChart: FC = (props) => { yScaleType={ScaleType.Linear} xAccessor="time" yAccessors={['value']} + stackAccessors={['true']} data={adjustedChartPointsSplit} timeZone={timeZone} color={barHighlightColor} diff --git a/x-pack/packages/ml/data_grid/components/column_chart.tsx b/x-pack/packages/ml/data_grid/components/column_chart.tsx index 9d71c16224b0c..9f8b866bea930 100644 --- a/x-pack/packages/ml/data_grid/components/column_chart.tsx +++ b/x-pack/packages/ml/data_grid/components/column_chart.tsx @@ -8,7 +8,7 @@ import React, { type FC } from 'react'; import { css } from '@emotion/react'; -import { BarSeries, Chart, Settings, ScaleType } from '@elastic/charts'; +import { BarSeries, Chart, Settings, ScaleType, LEGACY_LIGHT_THEME } from '@elastic/charts'; import { euiTextTruncate, type EuiDataGridColumn } from '@elastic/eui'; import { euiThemeVars } from '@kbn/ui-theme'; @@ -81,8 +81,9 @@ export const ColumnChart: 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/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..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 @@ -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'; @@ -101,11 +99,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { showLegend showLegendExtra legendPosition={Position.Bottom} - theme={ - theme.darkMode - ? EUI_CHARTS_THEME_DARK.theme - : EUI_CHARTS_THEME_LIGHT.theme - } + theme={theme.darkMode ? DARK_THEME : LIGHT_THEME} locale={i18n.getLocale()} /> 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/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 58c06b2d35e7d..d986d5a97c2f6 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 @@ -209,7 +209,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' }); @@ -136,7 +135,6 @@ export const DocumentCountChart: FC = ({ diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx index 32bf2d29a8a6c..51af8c47cc684 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx @@ -7,7 +7,7 @@ import React, { FC, useMemo } from 'react'; import { EuiSpacer } from '@elastic/eui'; -import { Axis, BarSeries, Chart, Settings, ScaleType } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Settings, ScaleType, LEGACY_LIGHT_THEME } from '@elastic/charts'; import { FormattedMessage } from '@kbn/i18n-react'; import { roundToDecimalPlace } from '@kbn/ml-number-utils'; @@ -74,7 +74,13 @@ export const BooleanContent: FC = ({ 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 = ({ > - + - + - + - + [ @@ -127,7 +126,6 @@ export const AnalyticsCollectionChart: React.FC< ) : ( { diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx index f67cccd4ddcdd..587024e87581e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx @@ -10,7 +10,15 @@ import React, { MouseEvent } from 'react'; import { parsePath } from 'history'; import { useValues } from 'kea'; -import { AreaSeries, Chart, CurveType, ScaleType, Settings, Tooltip } from '@elastic/charts'; +import { + AreaSeries, + Chart, + CurveType, + ScaleType, + Settings, + Tooltip, + LEGACY_LIGHT_THEME, +} from '@elastic/charts'; import { EuiBadge, EuiCard, @@ -175,6 +183,8 @@ export const AnalyticsCollectionCard: React.FC< {!isLoading && data?.some(([, y]) => y && y !== 0) && ( { 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..3267e88e07af7 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 @@ -39,11 +39,7 @@ export const AnalyticsChart: React.FC = ({ height = 300, lines }) => { return ( moment(tooltip.value).format(TOOLTIP_DATE_FORMAT)} /> - + {lines.map(({ id, data, isDashed }) => ( ; 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 05b8c53f9ded9..e730767ee0d76 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, @@ -129,7 +129,7 @@ const AlertDetailsAppSection = ({ ({ 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 e55a70978a748..a0f2a34df8f36 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 @@ -104,7 +104,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/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx index 566b601991c7b..d51b1ff370fe3 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx @@ -6,12 +6,17 @@ */ import React, { useMemo } from 'react'; -import { Chart, Settings, AreaSeries, ScaleType, TooltipType, Tooltip } from '@elastic/charts'; import { - EUI_CHARTS_THEME_LIGHT, - EUI_SPARKLINE_THEME_PARTIAL, - EUI_CHARTS_THEME_DARK, -} from '@elastic/eui/dist/eui_charts_theme'; + Chart, + Settings, + AreaSeries, + ScaleType, + TooltipType, + Tooltip, + LIGHT_THEME, + DARK_THEME, +} from '@elastic/charts'; +import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme'; import { i18n } from '@kbn/i18n'; import { useIsDarkMode } from '../../../../../hooks/use_is_dark_mode'; import { useKibanaTimeZoneSetting } from '../../../../../hooks/use_kibana_time_zone_setting'; @@ -35,15 +40,7 @@ export const SingleMetricSparkline: React.FunctionComponent<{ }> = ({ metric, timeRange }) => { const isDarkMode = useIsDarkMode(); const timeZone = useKibanaTimeZoneSetting(); - - const theme = useMemo( - () => [ - // localThemeOverride, - EUI_SPARKLINE_THEME_PARTIAL, - isDarkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, - ], - [isDarkMode] - ); + const baseTheme = useMemo(() => (isDarkMode ? DARK_THEME : LIGHT_THEME), [isDarkMode]); const xDomain = useMemo( () => ({ @@ -56,7 +53,13 @@ export const SingleMetricSparkline: React.FunctionComponent<{ return ( - + + 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 handleColorChange(color)} color={currentColor} aria-label={colorLabel} - showAlpha={false} + showAlpha swatches={euiPaletteColorBlind()} /> 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 355f66f2bf9fd..ab19e7c19b93e 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,20 +10,11 @@ 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: { - useChartsTheme: jest.fn(() => { - return { - crosshair: { - line: { - stroke: 'black', - strokeWidth: 1, - dash: [4, 4], - }, - }, - }; - }), + useChartsBaseTheme: jest.fn(() => LIGHT_THEME), }, activeCursor: { activeCursor$: new BehaviorSubject({ diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx index 1eb4fc62b472d..7d6a2755348ae 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx @@ -19,6 +19,7 @@ import { RecursivePartial, ScaleType, Settings, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { EuiIcon } from '@elastic/eui'; @@ -127,8 +128,9 @@ export const DecisionPathChart = ({ size={{ height: DECISION_PATH_MARGIN + decisionPathData.length * DECISION_PATH_ROW_HEIGHT }} > 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_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js index 169f739de41cd..175b58a72c0a5 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..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'; @@ -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, @@ -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/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..ebbae3fff924f 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,13 +64,7 @@ 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 }, - [isDarkTheme] - ); + const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]); const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures(); @@ -173,7 +166,7 @@ export const JobMemoryTreeMap: FC = ({ node, type, height }) => { {data.length ? ( - + id="memoryUsageTreeMap" data={data} 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 } /> 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/alert_details_app_section.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx index c9b17b4f48c92..ce9a651a7a1e3 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 @@ -63,7 +63,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/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 5669f7a190f81..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 @@ -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'; @@ -81,9 +81,9 @@ 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 ? 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 9598aabcbf70f..674ce1c579756 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 7731792f7b322..fbb728b4b81aa 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 5f28676eb37b6..7e9fbfce9d682 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/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/pages/alerts/alerts.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts.tsx index c1b1493daa3d9..daf02e9f6fd09 100644 --- a/x-pack/plugins/observability/public/pages/alerts/alerts.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/alerts.tsx @@ -80,7 +80,6 @@ function InternalAlertsPage() { } }; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), onBrushEnd, }; 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/metrics/metric_with_sparkline.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx index bbd3b9acd224c..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,15 +5,19 @@ * 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 { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeContext } from 'styled-components'; import { i18n } from '@kbn/i18n'; @@ -29,10 +33,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 +55,12 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }: - + 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/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() { } diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx index e6ebd1197c5c2..ee3a475e13110 100644 --- a/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx +++ b/x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx @@ -40,7 +40,6 @@ export interface Props { export function WideChart({ chart, data, id, isLoading, state }: Props) { const { charts, uiSettings } = useKibana().services; - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const { euiTheme } = useEuiTheme(); const dateFormat = uiSettings.get('dateFormat'); @@ -64,7 +63,6 @@ export function WideChart({ chart, data, id, isLoading, state }: Props) { } 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 dfa52e6e572a0..81556c2feb0f7 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 @@ -77,7 +77,6 @@ export function DataPreviewChart({ isError, } = useDebouncedGetPreviewData(isIndicatorSectionValid, watch('indicator'), range); - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const dateFormat = uiSettings.get('dateFormat'); const numberFormat = @@ -196,7 +195,6 @@ export function DataPreviewChart({ showLegend={false} theme={[ { - ...theme, lineSeriesStyle: { point: { visible: false }, }, @@ -231,7 +229,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/observability/public/pages/slo_edit/slo_edit.test.tsx b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx index cd3459975d011..857cbdc7338a3 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/card_view/slo_card_item.tsx b/x-pack/plugins/observability/public/pages/slos/components/card_view/slo_card_item.tsx index 8da351e5ba0e3..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, @@ -153,7 +153,8 @@ export function SloCardChart({ return ( { if (isMetricElementEvent(d)) { navigateToUrl(sloDetailsUrl); 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 0beb36f587ff1..0bb96b39d0649 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 @@ -41,7 +41,6 @@ export interface Props { export function SloSparkline({ chart, data, id, isLoading, size, state }: Props) { const charts = useKibana().services.charts; - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const { euiTheme } = useEuiTheme(); @@ -61,7 +60,7 @@ export function SloSparkline({ chart, data, id, isLoading, size, 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 2051da5f43036..3794fa1e269c6 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 @@ -66,7 +66,6 @@ export function KibanaReactStorybookDecorator(Story: ComponentType) { charts: { theme: { useChartsBaseTheme: () => {}, - useChartsTheme: () => {}, }, activeCursor: () => {}, }, 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 87e9e61036a71..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,38 +5,36 @@ * 2.0. */ -import { PartialTheme } from '@elastic/charts'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { LIGHT_THEME, DARK_THEME, PartialTheme, Theme } from '@elastic/charts'; import { useMemo } from 'react'; import { useTheme } from './use_theme'; -export function useChartTheme(): PartialTheme[] { +export function useChartThemes(): { baseTheme: Theme; theme: PartialTheme[] } { const theme = useTheme(); - const baseChartTheme = theme.darkMode - ? EUI_CHARTS_THEME_DARK.theme - : EUI_CHARTS_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 { + theme: [themeOverrides], + baseTheme, + }; + }, [baseTheme]); } diff --git a/x-pack/plugins/observability_shared/public/index.ts b/x-pack/plugins/observability_shared/public/index.ts index ecd00f627321b..2fdb1a1960c09 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 33879e1fa55d4..cbebc80606703 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 { PartialTheme, Settings, Tooltip, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -123,6 +124,8 @@ export function FlameGraph({ { const selectedElement = elements[0] as Maybe; if (Number.isNaN(selectedElement?.vmIndex)) { 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/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/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..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 @@ -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'; @@ -114,8 +114,8 @@ 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; + // 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, 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/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} /> 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 ? ( { 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 7a53a21ca0590..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 @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { Chart, Datum, - LIGHT_THEME, + LEGACY_LIGHT_THEME, PartialTheme, Partition, PartitionLayout, @@ -69,7 +69,9 @@ export const NetworkTimingsDonut = () => { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx index d6e4a185ded23..2d44735857f40 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx @@ -22,7 +22,7 @@ import { } from '@elastic/charts'; import { useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { useChartTheme } from '../../../../../../hooks/use_chart_theme'; +import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme'; import { BAR_HEIGHT } from './constants'; import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles'; import { WaterfallData } from '../../common/network_data/types'; @@ -77,7 +77,7 @@ export const WaterfallBarChart = ({ barStyleAccessor, index, }: Props) => { - 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/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_base_chart_theme.ts similarity index 61% 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 f9faca7927d9d..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 { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +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 darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + 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 = ({ { 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 4d2945f86ed23..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, @@ -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 } }, }} /> 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 019b6018e69b9..48a49acf5ad7c 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/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx index ec34ef4b300d2..4999496f669c3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx @@ -18,7 +18,15 @@ import { EuiLoadingChart, } from '@elastic/eui'; import { euiLightVars as lightEuiTheme } from '@kbn/ui-theme'; -import { Axis, BarSeries, Chart, CurveType, LineSeries, Settings } from '@elastic/charts'; +import { + Axis, + BarSeries, + Chart, + CurveType, + LineSeries, + Settings, + LEGACY_LIGHT_THEME, +} from '@elastic/charts'; import { assign, fill } from 'lodash'; import moment from 'moment'; import { formatMillisForDisplay } from '../../../lib/execution_duration_utils'; @@ -106,13 +114,14 @@ export const ExecutionDurationChart: React.FunctionComponent = ({ <> diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx index 409d646553908..8e5da4fa970ab 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx @@ -111,6 +111,7 @@ export const DurationChartComponent = ({ onBrushEnd={onBrushEnd} onLegendItemClick={legendToggleVisibility} locale={i18n.getLocale()} + // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md {...chartTheme} /> = ({ 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 ( - + = ({ 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_base_chart_theme.ts similarity index 61% rename from x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts rename to x-pack/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts index f9faca7927d9d..f8cb8dfd4134f 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts +++ b/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts @@ -5,16 +5,13 @@ * 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, Theme } from '@elastic/charts'; -export const useChartTheme = () => { +export const useBaseChartTheme = (): Theme => { const [darkMode] = useUiSetting$('theme:darkMode'); - - const theme = useMemo(() => { - return darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + return useMemo(() => { + return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); - - return theme; }; diff --git a/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx b/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx index 955fade76f57a..9b304be467dfa 100644 --- a/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx +++ b/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx @@ -45,7 +45,7 @@ export const mockContextValue: AppDeps = { settings: settingsServiceMock.createStartContract(), toasts: notificationServiceMock.createSetupContract().toasts, theme: { - useChartsTheme: jest.fn(), + useChartsBaseTheme: jest.fn(), } as any, // For our test harness, we don't use this mocked out http service http: httpServiceMock.createSetupContract(), diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx index cf55178fdb961..5d50690d3ecae 100644 --- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx +++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/watch_visualization.tsx @@ -12,6 +12,7 @@ import { Chart, LineAnnotation, LineSeries, + PartialTheme, Position, ScaleType, Settings, @@ -33,7 +34,7 @@ import { comparators } from '../../../../models/watch/comparators'; import { SectionError, Error } from '../../../../components'; import { useAppContext } from '../../../../app_context'; -const customTheme = () => { +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 ? ( rect', tile, 500) + )?.getAttribute('fill'), showingTrendline: Boolean( - await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) + await this.getMetricElementIfExists('.echSingleMetricSparkline', tile, 500) ), }; }, diff --git a/yarn.lock b/yarn.lock index 1bcbde9d29c4a..1db13cef13340 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1544,10 +1544,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@60.0.1": - version "60.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-60.0.1.tgz#da8f8afd7200651d7efbf7d71b2dd60bee9299d1" - integrity sha512-Sl386SApHeK+IIx7R/8hAA8ribkyRi+Qi5iI7ENqywtRp1en4A75OSS9+wWy03uUvN8OcrA3Aaia2gTYHA+x0w== +"@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"