diff --git a/frontend/src/components/Graph/utils.ts b/frontend/src/components/Graph/utils.ts index db30b6a8ce..f002d1402f 100644 --- a/frontend/src/components/Graph/utils.ts +++ b/frontend/src/components/Graph/utils.ts @@ -139,6 +139,7 @@ export const getGraphOptions = ( }, scales: { x: { + stacked: isStacked, grid: { display: true, color: getGridColor(), @@ -165,6 +166,7 @@ export const getGraphOptions = ( ticks: { color: getAxisLabelColor(currentTheme) }, }, y: { + stacked: isStacked, display: true, grid: { display: true, @@ -178,9 +180,6 @@ export const getGraphOptions = ( }, }, }, - stacked: { - display: isStacked === undefined ? false : 'auto', - }, }, elements: { line: { diff --git a/frontend/src/container/LogsExplorerChart/LogsExplorerChart.interfaces.ts b/frontend/src/container/LogsExplorerChart/LogsExplorerChart.interfaces.ts index a19a41d778..ee447242eb 100644 --- a/frontend/src/container/LogsExplorerChart/LogsExplorerChart.interfaces.ts +++ b/frontend/src/container/LogsExplorerChart/LogsExplorerChart.interfaces.ts @@ -3,6 +3,7 @@ import { QueryData } from 'types/api/widgets/getQuery'; export type LogsExplorerChartProps = { data: QueryData[]; isLoading: boolean; + isLogsExplorerViews?: boolean; isLabelEnabled?: boolean; className?: string; }; diff --git a/frontend/src/container/LogsExplorerChart/index.tsx b/frontend/src/container/LogsExplorerChart/index.tsx index 7f4d648529..7ac1934bb7 100644 --- a/frontend/src/container/LogsExplorerChart/index.tsx +++ b/frontend/src/container/LogsExplorerChart/index.tsx @@ -16,12 +16,14 @@ import { UpdateTimeInterval } from 'store/actions'; import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces'; import { CardStyled } from './LogsExplorerChart.styled'; +import { getColorsForSeverityLabels } from './utils'; function LogsExplorerChart({ data, isLoading, isLabelEnabled = true, className, + isLogsExplorerViews = false, }: LogsExplorerChartProps): JSX.Element { const dispatch = useDispatch(); const urlQuery = useUrlQuery(); @@ -29,15 +31,19 @@ function LogsExplorerChart({ const handleCreateDatasets: Required['createDataset'] = useCallback( (element, index, allLabels) => ({ data: element, - backgroundColor: colors[index % colors.length] || themeColors.red, - borderColor: colors[index % colors.length] || themeColors.red, + backgroundColor: isLogsExplorerViews + ? getColorsForSeverityLabels(allLabels[index], index) + : colors[index % colors.length] || themeColors.red, + borderColor: isLogsExplorerViews + ? getColorsForSeverityLabels(allLabels[index], index) + : colors[index % colors.length] || themeColors.red, ...(isLabelEnabled ? { label: allLabels[index], } : {}), }), - [isLabelEnabled], + [isLabelEnabled, isLogsExplorerViews], ); const onDragSelect = useCallback( @@ -112,6 +118,7 @@ function LogsExplorerChart({ )}