From f2be856f63bcc5de6cc8755a2f1ea687f58e3bcf Mon Sep 17 00:00:00 2001
From: Shaheer Kochai <ashaheerki@gmail.com>
Date: Wed, 29 Jan 2025 22:39:04 +0430
Subject: [PATCH] fix: apply x axis date/time formatting only to panel types
 that have date/time in x axis (#6956)

---
 .../AnomalyAlertEvaluationView.tsx            |  2 +-
 .../BillingUsageGraph/BillingUsageGraph.tsx   |  2 +-
 .../src/lib/uPlotLib/getUplotChartOptions.ts  |  2 +-
 .../uPlotLib/getUplotHistogramChartOptions.ts |  3 ++-
 frontend/src/lib/uPlotLib/utils/getAxes.ts    | 23 +++++++++++++++++--
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx b/frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx
index 28d5397302..4c3a78f3e7 100644
--- a/frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx
+++ b/frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx
@@ -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),
 	};
diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
index 4a4e81c1f2..448eac69f3 100644
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@@ -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(
 		() => ({
diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
index df7d6547e3..61e32e9700 100644
--- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -387,6 +387,6 @@ export const getUPlotChartOptions = ({
 					hiddenGraph,
 					isDarkMode,
 			  }),
-		axes: getAxes(isDarkMode, yAxisUnit),
+		axes: getAxes({ isDarkMode, yAxisUnit, panelType }),
 	};
 };
diff --git a/frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts
index 81750ff857..bee488f891 100644
--- a/frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotHistogramChartOptions.ts
@@ -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);
diff --git a/frontend/src/lib/uPlotLib/utils/getAxes.ts b/frontend/src/lib/uPlotLib/utils/getAxes.ts
index e066886d7b..663bccad39 100644
--- a/frontend/src/lib/uPlotLib/utils/getAxes.ts
+++ b/frontend/src/lib/uPlotLib/utils/getAxes.ts
@@ -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,
 	},
 	{