github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ObsUX][APM] Adjust timeseries charts colors (#210749)

Browse source 
## Summary

Because of the new order of colors within the list of data vis colors,
we need to alternate colors when loading them in sequence in the absence
of the definition of series colors overrides. This will avoid confusion
between charts that are very close in color.

For the same reasons, we might want to review and modify some of the
values ascribed to the specific ChartType in `get_timeseries_color.ts`

The bug with the charts being the same colors was introduced in this
[PR](https://github.com/elastic/kibana/pull/207070)

BEFORE


![image](https://github.com/user-attachments/assets/e8ba0797-0ae4-429c-8a43-a6688c3d1b12)

AFTER


![image](https://github.com/user-attachments/assets/bec05099-7c56-47ea-937a-34b85b953f89)


![image](https://github.com/user-attachments/assets/c38556ec-a8cf-4708-a557-de74ab268f6b)


![image](https://github.com/user-attachments/assets/e7f56647-be11-4453-9e49-9c0df607f728)
This commit is contained in:
Miriam 2025-02-12 11:24:01 +00:00 • committed by GitHub
parent 60918882ea
commit d6db8802da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

32
x-pack/solutions/observability/plugins/apm/public/components/shared/charts/helper/get_timeseries_color.ts
View file

@ -29,32 +29,32 @@ const timeSeriesColorMap: Record<
{ currentPeriodColor: string; previousPeriodColor: string }
> = {
[ChartType.LATENCY_AVG]: {
currentPeriodColor: palette[2],
previousPeriodColor: palette[12],
},
[ChartType.LATENCY_P95]: {
currentPeriodColor: palette[1],
previousPeriodColor: palette[11],
},
[ChartType.LATENCY_P95]: {
currentPeriodColor: palette[5],
previousPeriodColor: palette[15],
},
[ChartType.LATENCY_P99]: {
currentPeriodColor: palette[7],
previousPeriodColor: palette[17],
currentPeriodColor: palette[3],
previousPeriodColor: palette[13],
},
[ChartType.THROUGHPUT]: {
currentPeriodColor: palette[0],
previousPeriodColor: palette[10],
},
[ChartType.FAILED_TRANSACTION_RATE]: {
currentPeriodColor: palette[7],
previousPeriodColor: palette[17],
currentPeriodColor: palette[6],
previousPeriodColor: palette[16],
},
[ChartType.CPU_USAGE]: {
currentPeriodColor: palette[3],
previousPeriodColor: palette[13],
},
[ChartType.MEMORY_USAGE]: {
currentPeriodColor: palette[8],
previousPeriodColor: palette[18],
currentPeriodColor: palette[4],
previousPeriodColor: palette[14],
},
[ChartType.SESSIONS]: {
currentPeriodColor: palette[3],
@ -65,16 +65,16 @@ const timeSeriesColorMap: Record<
previousPeriodColor: palette[12],
},
[ChartType.ERROR_OCCURRENCES]: {
currentPeriodColor: palette[3],
previousPeriodColor: palette[13],
currentPeriodColor: palette[7],
previousPeriodColor: palette[17],
},
[ChartType.LOG_RATE]: {
currentPeriodColor: palette[6],
previousPeriodColor: palette[16],
currentPeriodColor: palette[8],
previousPeriodColor: palette[18],
},
[ChartType.LOG_ERROR_RATE]: {
currentPeriodColor: palette[3],
previousPeriodColor: palette[13],
currentPeriodColor: palette[6],
previousPeriodColor: palette[16],
},
};

3
x-pack/solutions/observability/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
View file

@ -33,7 +33,6 @@ import type { ReactElement } from 'react';
import React from 'react';
import { useHistory } from 'react-router-dom';
import { useChartThemes } from '@kbn/observability-shared-plugin/public';
import { getVizColorForIndex } from '../../../../common/viz_colors';
import { isExpectedBoundsComparison } from '../time_comparison/get_comparison_options';
import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context';
@ -240,7 +239,7 @@ export function TimeseriesChart({
stackAccessors={serie.stackAccessors ?? undefined}
markSizeAccessor={serie.markSizeAccessor}
data={isEmpty ? [] : serie.data}
color={getVizColorForIndex(index, euiTheme)}
color={serie.color}
curve={CurveType.CURVE_MONOTONE_X}
hideInLegend={serie.hideLegend}
fit={serie.fit ?? undefined}