GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 18:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx
View File

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

2
frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
View File

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

2
frontend/src/lib/uPlotLib/getUplotChartOptions.ts
View File

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

3
frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts
View File

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

21
frontend/src/lib/uPlotLib/utils/getAxes.ts
View File

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