@@ -166,7 +159,7 @@ function MultipleInstanceCustomTooltip({
*/
export function CustomTooltip(props: TooltipInfo & { latencyFormatter: TimeFormatter }) {
const { values } = props;
- const theme = useTheme();
+ const { euiTheme } = useEuiTheme();
return (
@@ -175,7 +168,7 @@ export function CustomTooltip(props: TooltipInfo & { latencyFormatter: TimeForma
) : (
)}
-
+
{clickToFilterDescription}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
index fec3fc4cfe2d..6e5ce28e8cd2 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
@@ -19,7 +19,7 @@ import {
TooltipType,
Tooltip,
} from '@elastic/charts';
-import { EuiPanel, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { useHistory } from 'react-router-dom';
@@ -28,7 +28,6 @@ import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_te
import { SERVICE_NODE_NAME } from '../../../../../common/es_fields/apm';
import { asTransactionRate, getDurationFormatter } from '../../../../../common/utils/formatters';
import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
-import { useTheme } from '../../../../hooks/use_theme';
import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
import * as urlHelpers from '../../links/url_helpers';
import { ChartContainer } from '../chart_container';
@@ -54,7 +53,7 @@ export function InstancesLatencyDistributionChart({
const history = useHistory();
const hasData = items.length > 0;
- const theme = useTheme();
+ const { euiTheme } = useEuiTheme();
const chartThemes = useChartThemes();
const maxLatency = Math.max(...items.map((item) => item.latency ?? 0));
@@ -130,7 +129,7 @@ export function InstancesLatencyDistributionChart({
locale={i18n.getLocale()}
/>
@@ -156,13 +155,13 @@ export function InstancesLatencyDistributionChart({
xScaleType={ScaleType.Linear}
yAccessors={[(item) => item.latency]}
yScaleType={ScaleType.Linear}
- color={theme.eui.euiColorMediumShade}
+ color={euiTheme.colors.mediumShade}
bubbleSeriesStyle={{
point: {
shape: 'square',
radius: 4,
- fill: theme.eui.euiColorLightestShade,
- stroke: theme.eui.euiColorMediumShade,
+ fill: euiTheme.colors.lightestShade,
+ stroke: euiTheme.colors.mediumShade,
strokeWidth: 2,
},
}}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx
index 84e2e6cb056d..b18fd70d0d2c 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx
@@ -16,12 +16,11 @@ import {
Settings,
Tooltip,
} from '@elastic/charts';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingChart } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
import React from 'react';
import { useChartThemes } from '@kbn/observability-shared-plugin/public';
import { i18n } from '@kbn/i18n';
import { Coordinate } from '../../../../../typings/timeseries';
-import { useTheme } from '../../../../hooks/use_theme';
import { unit } from '../../../../utils/style';
import { getComparisonChartTheme } from '../../time_comparison/get_comparison_chart_theme';
@@ -93,7 +92,7 @@ export function SparkPlotItem({
comparisonSeries?: Coordinate[];
comparisonSeriesColor?: string;
}) {
- const theme = useTheme();
+ const { euiTheme } = useEuiTheme();
const defaultChartThemes = useChartThemes();
const comparisonChartTheme = getComparisonChartTheme();
const hasComparisonSeries = !!comparisonSeries?.length;
@@ -110,7 +109,7 @@ export function SparkPlotItem({
};
const chartSize = {
- height: theme.eui.euiSizeL,
+ height: euiTheme.size.l,
width: compact ? unit * 4 : unit * 5,
};
@@ -201,7 +200,7 @@ export function SparkPlotItem({
justifyContent: 'center',
}}
>
-
+
);
}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap
index 2630a6c7862c..09b48cc47b30 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap
@@ -1,11 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Timeline TimelineAxisContainer should render with data 1`] = `
-.c0 {
- position: absolute;
- bottom: 0;
-}
-