Update comparison series styles to match the main series

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx

@@ -12,8 +12,11 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
-import { useTheme } from '../../../hooks/use_theme';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -24,8 +27,6 @@ export function BackendFailedTransactionRateChart({
 }: {
   height: number;
 }) {
-  const theme = useTheme();
-
   const {
     query: { backendName, kuery, environment, rangeFrom, rangeTo },
   } = useApmParams('/backends/overview');
@@ -56,14 +57,17 @@ export function BackendFailedTransactionRateChart({
     [backendName, start, end, offset, kuery, environment]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.FAILED_TRANSACTION_RATE
+  );
   const timeseries = useMemo(() => {
     const specs: Array<TimeSeries<Coordinate>> = [];
 
     if (data?.currentTimeseries) {
       specs.push({
         data: data.currentTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis7,
+        color: currentPeriodColor,
         title: i18n.translate('xpack.apm.backendErrorRateChart.chartTitle', {
           defaultMessage: 'Failed transaction rate',
         }),
@@ -74,7 +78,7 @@ export function BackendFailedTransactionRateChart({
       specs.push({
         data: data.comparisonTimeseries,
         type: 'area',
-        color: theme.eui.euiColorMediumShade,
+        color: previousPeriodColor,
         title: i18n.translate(
           'xpack.apm.backendErrorRateChart.previousPeriodLabel',
           { defaultMessage: 'Previous period' }
@@ -83,7 +87,7 @@ export function BackendFailedTransactionRateChart({
     }
 
     return specs;
-  }, [data, theme.eui.euiColorVis7, theme.eui.euiColorMediumShade]);
+  }, [data, currentPeriodColor, previousPeriodColor]);
 
   return (
     <TimeseriesChart

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx

@@ -12,16 +12,17 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
-import { useTheme } from '../../../hooks/use_theme';
 import {
   getMaxY,
   getResponseTimeTickFormatter,
 } from '../../shared/charts/transaction_charts/helper';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 export function BackendLatencyChart({ height }: { height: number }) {
-  const theme = useTheme();
-
   const {
     query: { backendName, rangeFrom, rangeTo, kuery, environment },
   } = useApmParams('/backends/overview');
@@ -52,14 +53,18 @@ export function BackendLatencyChart({ height }: { height: number }) {
     [backendName, start, end, offset, kuery, environment]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.LATENCY_AVG
+  );
+
   const timeseries = useMemo(() => {
     const specs: Array<TimeSeries<Coordinate>> = [];
 
     if (data?.currentTimeseries) {
       specs.push({
         data: data.currentTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis1,
+        color: currentPeriodColor,
         title: i18n.translate('xpack.apm.backendLatencyChart.chartTitle', {
           defaultMessage: 'Latency',
         }),
@@ -70,7 +75,7 @@ export function BackendLatencyChart({ height }: { height: number }) {
       specs.push({
         data: data.comparisonTimeseries,
         type: 'area',
-        color: theme.eui.euiColorMediumShade,
+        color: previousPeriodColor,
         title: i18n.translate(
           'xpack.apm.backendLatencyChart.previousPeriodLabel',
           { defaultMessage: 'Previous period' }
@@ -79,7 +84,7 @@ export function BackendLatencyChart({ height }: { height: number }) {
     }
 
     return specs;
-  }, [data, theme.eui.euiColorVis1, theme.eui.euiColorMediumShade]);
+  }, [data, currentPeriodColor, previousPeriodColor]);
 
   const maxY = getMaxY(timeseries);
   const latencyFormatter = getDurationFormatter(maxY);

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx

@@ -12,12 +12,13 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
-import { useTheme } from '../../../hooks/use_theme';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../shared/charts/helper/get_timeseries_color';
 
 export function BackendThroughputChart({ height }: { height: number }) {
-  const theme = useTheme();
-
   const {
     query: { backendName, rangeFrom, rangeTo, kuery, environment },
   } = useApmParams('/backends/overview');
@@ -48,14 +49,18 @@ export function BackendThroughputChart({ height }: { height: number }) {
     [backendName, start, end, offset, kuery, environment]
   );
 
+  const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+    ChartType.THROUGHPUT
+  );
+
   const timeseries = useMemo(() => {
     const specs: Array<TimeSeries<Coordinate>> = [];
 
     if (data?.currentTimeseries) {
       specs.push({
         data: data.currentTimeseries,
         type: 'linemark',
-        color: theme.eui.euiColorVis0,
+        color: currentPeriodColor,
         title: i18n.translate('xpack.apm.backendThroughputChart.chartTitle', {
           defaultMessage: 'Throughput',
         }),
@@ -66,7 +71,7 @@ export function BackendThroughputChart({ height }: { height: number }) {
       specs.push({
         data: data.comparisonTimeseries,
         type: 'area',
-        color: theme.eui.euiColorMediumShade,
+        color: previousPeriodColor,
         title: i18n.translate(
           'xpack.apm.backendThroughputChart.previousPeriodLabel',
           { defaultMessage: 'Previous period' }
@@ -75,7 +80,7 @@ export function BackendThroughputChart({ height }: { height: number }) {
     }
 
     return specs;
-  }, [data, theme.eui.euiColorVis0, theme.eui.euiColorMediumShade]);
+  }, [data, currentPeriodColor, previousPeriodColor]);
 
   return (
     <TimeseriesChart

x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx

@@ -25,6 +25,10 @@ import { APMQueryParams } from '../../../shared/links/url_helpers';
 import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { TimestampTooltip } from '../../../shared/timestamp_tooltip';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 const GroupIdLink = euiStyled(ErrorDetailLink)`
   font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
@@ -203,9 +207,12 @@ function ErrorGroupList({
             detailedStatistics?.currentPeriod?.[groupId]?.timeseries;
           const previousPeriodTimeseries =
             detailedStatistics?.previousPeriod?.[groupId]?.timeseries;
+          const { currentPeriodColor, previousPeriodColor } =
+            getTimeSeriesColor(ChartType.FAILED_TRANSACTION_RATE);
+
           return (
             <SparkPlot
-              color="euiColorVis7"
+              color={currentPeriodColor}
               series={currentPeriodTimeseries}
               valueLabel={i18n.translate(
                 'xpack.apm.serviceOveriew.errorsTableOccurrences',
@@ -219,6 +226,7 @@ function ErrorGroupList({
               comparisonSeries={
                 comparisonEnabled ? previousPeriodTimeseries : undefined
               }
+              comparisonSeriesColor={previousPeriodColor}
             />
           );
         },

x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx

@@ -42,6 +42,10 @@ import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { ServiceLink } from '../../../shared/service_link';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { HealthBadge } from './HealthBadge';
+import {
+  ChartType,
+  getTimeSeriesColor,
+} from '../../../shared/charts/helper/get_timeseries_color';
 
 type ServiceListAPIResponse = APIReturnType<'GET /internal/apm/services'>;
 type Items = ServiceListAPIResponse['items'];
@@ -77,6 +81,7 @@ export function getServiceColumns({
   const { isSmall, isLarge, isXl } = breakpoints;
   const showWhenSmallOrGreaterThanLarge = isSmall || !isLarge;
   const showWhenSmallOrGreaterThanXL = isSmall || !isXl;
+
   return [
     ...(showHealthStatusColumn
       ? [
@@ -155,17 +160,23 @@ export function getServiceColumns({
       }),
       sortable: true,
       dataType: 'number',
-      render: (_, { serviceName, latency }) => (
-        <ListMetric
-          series={comparisonData?.currentPeriod[serviceName]?.latency}
-          comparisonSeries={
-            comparisonData?.previousPeriod[serviceName]?.latency
-          }
-          hideSeries={!showWhenSmallOrGreaterThanLarge}
-          color="euiColorVis1"
-          valueLabel={asMillisecondDuration(latency || 0)}
-        />
-      ),
+      render: (_, { serviceName, latency }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.LATENCY_AVG
+        );
+        return (
+          <ListMetric
+            series={comparisonData?.currentPeriod[serviceName]?.latency}
+            comparisonSeries={
+              comparisonData?.previousPeriod[serviceName]?.latency
+            }
+            hideSeries={!showWhenSmallOrGreaterThanLarge}
+            color={currentPeriodColor}
+            valueLabel={asMillisecondDuration(latency || 0)}
+            comparisonSeriesColor={previousPeriodColor}
+          />
+        );
+      },
       align: RIGHT_ALIGNMENT,
     },
     {
@@ -175,17 +186,24 @@ export function getServiceColumns({
       }),
       sortable: true,
       dataType: 'number',
-      render: (_, { serviceName, throughput }) => (
-        <ListMetric
-          series={comparisonData?.currentPeriod[serviceName]?.throughput}
-          comparisonSeries={
-            comparisonData?.previousPeriod[serviceName]?.throughput
-          }
-          hideSeries={!showWhenSmallOrGreaterThanLarge}
-          color="euiColorVis0"
-          valueLabel={asTransactionRate(throughput)}
-        />
-      ),
+      render: (_, { serviceName, throughput }) => {
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.THROUGHPUT
+        );
+
+        return (
+          <ListMetric
+            series={comparisonData?.currentPeriod[serviceName]?.throughput}
+            comparisonSeries={
+              comparisonData?.previousPeriod[serviceName]?.throughput
+            }
+            hideSeries={!showWhenSmallOrGreaterThanLarge}
+            color={currentPeriodColor}
+            valueLabel={asTransactionRate(throughput)}
+            comparisonSeriesColor={previousPeriodColor}
+          />
+        );
+      },
       align: RIGHT_ALIGNMENT,
     },
     {
@@ -197,6 +215,9 @@ export function getServiceColumns({
       dataType: 'number',
       render: (_, { serviceName, transactionErrorRate }) => {
         const valueLabel = asPercent(transactionErrorRate, 1);
+        const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
+          ChartType.FAILED_TRANSACTION_RATE
+        );
         return (
           <ListMetric
             series={
@@ -206,8 +227,9 @@ export function getServiceColumns({
               comparisonData?.previousPeriod[serviceName]?.transactionErrorRate
             }
             hideSeries={!showWhenSmallOrGreaterThanLarge}
-            color="euiColorVis7"
+            color={currentPeriodColor}
             valueLabel={valueLabel}
+            comparisonSeriesColor={previousPeriodColor}
           />
         );
       },

x-pack/plugins/apm/public/components/app/service_inventory/service_list/service_list.test.tsx

@@ -12,6 +12,7 @@ import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values
 import { Breakpoints } from '../../../../hooks/use_breakpoints';
 import { getServiceColumns } from './';
 import * as stories from './service_list.stories';
+import * as timeSeriesColor from '../../../shared/charts/helper/get_timeseries_color';
 
 const { Example, EmptyState } = composeStories(stories);
 
@@ -42,6 +43,15 @@ const service: any = {
 };
 
 describe('ServiceList', () => {
+  beforeAll(() => {
+    jest.spyOn(timeSeriesColor, 'getTimeSeriesColor').mockImplementation(() => {
+      return {
+        currentPeriodColor: 'green',
+        previousPeriodColor: 'black',
+      };
+    });
+  });
+
   it('renders empty state', async () => {
     render(<EmptyState />);
 
@@ -82,7 +92,8 @@ describe('ServiceList', () => {
         expect(renderedColumns[3]).toMatchInlineSnapshot(`"request"`);
         expect(renderedColumns[4]).toMatchInlineSnapshot(`
           <ListMetric
-            color="euiColorVis1"
+            color="green"
+            comparisonSeriesColor="black"
             hideSeries={false}
             valueLabel="0 ms"
           />
@@ -107,7 +118,8 @@ describe('ServiceList', () => {
         expect(renderedColumns.length).toEqual(5);
         expect(renderedColumns[2]).toMatchInlineSnapshot(`
           <ListMetric
-            color="euiColorVis1"
+            color="green"
+            comparisonSeriesColor="black"
             hideSeries={true}
             valueLabel="0 ms"
           />
@@ -140,7 +152,8 @@ describe('ServiceList', () => {
           `);
           expect(renderedColumns[3]).toMatchInlineSnapshot(`
             <ListMetric
-              color="euiColorVis1"
+              color="green"
+              comparisonSeriesColor="black"
               hideSeries={false}
               valueLabel="0 ms"
             />
@@ -175,7 +188,8 @@ describe('ServiceList', () => {
           expect(renderedColumns[3]).toMatchInlineSnapshot(`"request"`);
           expect(renderedColumns[4]).toMatchInlineSnapshot(`
             <ListMetric
-              color="euiColorVis1"
+              color="green"
+              comparisonSeriesColor="black"
               hideSeries={false}
               valueLabel="0 ms"
             />