[9.0] [ObsUX] Fix chart colors for observability overview apm and hos…

…ts charts (#210847) (#210989) # Backport This will backport the following commits from `main` to `9.0`: - [[ObsUX] Fix chart colors for observability overview apm and hosts charts (#210847)](#210847)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Miriam <[email protected]>
elastic · Feb 13, 2025 · 15acdfa · 15acdfa
1 parent 250d055
commit 15acdfa
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 21 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
diff --git a/...ility/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx b/...ility/plugins/observability/public/pages/overview/components/sections/apm/apm_section.tsx
@@ -15,13 +15,12 @@ import {
   XYBrushEvent,
 } from '@elastic/charts';
 import { timeFormatter } from '@elastic/charts/dist/utils/data/formatters';
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiIcon } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiIcon, useEuiTheme } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
-import React, { useContext } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { ThemeContext } from 'styled-components';
 import { useChartThemes, FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public';
 import { useDatePickerContext } from '../../../../../hooks/use_date_picker_context';
 import { SectionContainer } from '../section_container';
@@ -54,7 +53,7 @@ function formatTpmStat(value?: number) {
 }
 
 export function APMSection({ bucketSize }: Props) {
-  const theme = useContext(ThemeContext);
+  const { euiTheme } = useEuiTheme();
   const chartThemes = useChartThemes();
   const history = useHistory();
   const { forceUpdate, hasDataMap } = useHasData();
@@ -92,8 +91,6 @@ export function APMSection({ bucketSize }: Props) {
 
   const isLoading = status === FETCH_STATUS.LOADING;
 
-  const transactionsColor = theme.eui.euiColorVis1;
-
   return (
     <SectionContainer
       title={i18n.translate('xpack.observability.overview.apm.title', {
@@ -142,7 +139,7 @@ export function APMSection({ bucketSize }: Props) {
               </EuiToolTip>
             }
             isLoading={isLoading}
-            color={transactionsColor}
+            // color={transactionsColor}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -164,7 +161,7 @@ export function APMSection({ bucketSize }: Props) {
               yScaleType={ScaleType.Linear}
               xAccessor={'x'}
               yAccessors={['y']}
-              color={transactionsColor}
+              color={euiTheme.colors.vis.euiColorVis0}
             />
             <Axis
               id="y-axis"

diff --git a/...observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx b/...observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
@@ -19,11 +19,10 @@ interface Props {
   value: NumberOrNull;
   timeseries: any[];
   formatter: (value: NumberOrNull) => string;
-  color: number;
+  color: string;
 }
 export function MetricWithSparkline({ id, formatter, value, timeseries, color }: Props) {
   const { baseTheme, sparklineTheme } = useChartThemes();
-  const colors = baseTheme.colors?.vizColors ?? [];
 
   if (!value) {
     return (
@@ -53,7 +52,7 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }:
             data={timeseries}
             xAccessor={'timestamp'}
             yAccessors={[id]}
-            color={colors[color] || '#006BB4'}
+            color={color}
           />
         </Chart>
       </EuiFlexItem>

diff --git a/...ugins/observability/public/pages/overview/components/sections/metrics/metrics_section.tsx b/...ugins/observability/public/pages/overview/components/sections/metrics/metrics_section.tsx
@@ -12,6 +12,7 @@ import {
   EuiBasicTableColumn,
   EuiLoadingChart,
   EuiTableSortingType,
+  useEuiTheme,
 } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
@@ -32,11 +33,6 @@ import { formatDuration } from './lib/format_duration';
 import { MetricWithSparkline } from './metric_with_sparkline';
 import type { BucketSize } from '../../../helpers/calculate_bucket_size';
 
-const COLOR_ORANGE = 7;
-const COLOR_BLUE = 1;
-const COLOR_GREEN = 0;
-const COLOR_PURPLE = 3;
-
 interface Props {
   bucketSize: BucketSize;
 }
@@ -51,6 +47,7 @@ const bytesPerSecondFormatter = (value: NumberOrNull) =>
   value === null ? '' : numeral(value).format('0b') + '/s';
 
 export function MetricsSection({ bucketSize }: Props) {
+  const { euiTheme } = useEuiTheme();
   const { forceUpdate, hasDataMap } = useHasData();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
     useDatePickerContext();
@@ -141,7 +138,7 @@ export function MetricsSection({ bucketSize }: Props) {
           value={value}
           formatter={percentFormatter}
           timeseries={record.timeseries}
-          color={COLOR_ORANGE}
+          color={euiTheme.colors.vis.euiColorVis0}
         />
       ),
     },
@@ -157,7 +154,7 @@ export function MetricsSection({ bucketSize }: Props) {
           value={value}
           formatter={numberFormatter}
           timeseries={record.timeseries}
-          color={COLOR_BLUE}
+          color={euiTheme.colors.vis.euiColorVis1}
         />
       ),
     },
@@ -171,7 +168,7 @@ export function MetricsSection({ bucketSize }: Props) {
           value={value}
           formatter={bytesPerSecondFormatter}
           timeseries={record.timeseries}
-          color={COLOR_GREEN}
+          color={euiTheme.colors.vis.euiColorVis2}
         />
       ),
     },
@@ -185,7 +182,7 @@ export function MetricsSection({ bucketSize }: Props) {
           value={value}
           formatter={bytesPerSecondFormatter}
           timeseries={record.timeseries}
-          color={COLOR_PURPLE}
+          color={euiTheme.colors.vis.euiColorVis3}
         />
       ),
     },