fix: apply x axis date/time formatting only to panel types that have date/time in x axis (#6956)

This commit is contained in:
Shaheer Kochai 2025-01-29 22:39:04 +04:30 committed by GitHub
parent f04589a0b2
commit f2be856f63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 26 additions and 6 deletions

View File

@ -259,7 +259,7 @@ function AnomalyAlertEvaluationView({
grid: {
show: true,
},
axes: getAxes(isDarkMode, yAxisUnit),
axes: getAxes({ isDarkMode, yAxisUnit }),
tzDate: (timestamp: number): Date =>
uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
};

View File

@ -122,7 +122,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
[graphCompatibleData.data.result],
);
const axesOptions = getAxes(isDarkMode, '');
const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
const optionsForChart: uPlot.Options = useMemo(
() => ({

View File

@ -387,6 +387,6 @@ export const getUPlotChartOptions = ({
hiddenGraph,
isDarkMode,
}),
axes: getAxes(isDarkMode, yAxisUnit),
axes: getAxes({ isDarkMode, yAxisUnit, panelType }),
};
};

View File

@ -123,6 +123,7 @@ export const getUplotHistogramChartOptions = ({
setGraphsVisibilityStates,
mergeAllQueries,
onClickHandler = _noop,
panelType,
}: GetUplotHistogramChartOptionsProps): uPlot.Options =>
({
id,
@ -210,5 +211,5 @@ export const getUplotHistogramChartOptions = ({
},
],
},
axes: getAxes(isDarkMode),
axes: getAxes({ isDarkMode, panelType }),
} as uPlot.Options);

View File

@ -1,12 +1,27 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
import { getToolTipValue } from 'components/Graph/yAxisConfig';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { uPlotXAxisValuesFormat } from './constants';
import getGridColor from './getGridColor';
const PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT = [
PANEL_TYPES.TIME_SERIES,
PANEL_TYPES.BAR,
PANEL_TYPES.PIE,
];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
const getAxes = ({
isDarkMode,
yAxisUnit,
panelType,
}: {
isDarkMode: boolean;
yAxisUnit?: string;
panelType?: PANEL_TYPES;
}): any => [
{
stroke: isDarkMode ? 'white' : 'black', // Color of the axis line
grid: {
@ -19,7 +34,11 @@ const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
width: 0.3, // Width of the tick lines,
show: true,
},
values: uPlotXAxisValuesFormat,
...(PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT.includes(panelType)
? {
values: uPlotXAxisValuesFormat,
}
: {}),
gap: 5,
},
{