From 66b5717e328078c72af22ccff79c51756630c832 Mon Sep 17 00:00:00 2001
From: Sagar Rajput <sagar@signoz.io>
Date: Mon, 24 Jun 2024 04:01:44 +0530
Subject: [PATCH] feat: added Option to toggle 24h time format in dashboard
 timeseries panels

---
 frontend/src/lib/uPlotLib/utils/getAxes.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/lib/uPlotLib/utils/getAxes.ts b/frontend/src/lib/uPlotLib/utils/getAxes.ts
index 8613ef9cbf..2106c4ca60 100644
--- a/frontend/src/lib/uPlotLib/utils/getAxes.ts
+++ b/frontend/src/lib/uPlotLib/utils/getAxes.ts
@@ -4,6 +4,23 @@ import { getToolTipValue } from 'components/Graph/yAxisConfig';
 
 import getGridColor from './getGridColor';
 
+function format24HourTime(ts, includeDate = false): string {
+	const date = new Date(ts * 1000);
+	const hours = date.getHours().toString().padStart(2, '0');
+	const minutes = date.getMinutes().toString().padStart(2, '0');
+	const timeStr = `${hours}:${minutes}`;
+
+	if (includeDate) {
+		const day = date.getDate().toString().padStart(2, '0');
+		const month = (date.getMonth() + 1).toString().padStart(2, '0');
+		const year = date.getFullYear();
+		const dateStr = `${month}/${day}/${year}`;
+		return `${timeStr}\n${dateStr}`;
+	}
+
+	return timeStr;
+}
+
 const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
 	{
 		stroke: isDarkMode ? 'white' : 'black', // Color of the axis line
@@ -18,6 +35,8 @@ const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
 			show: true,
 		},
 		gap: 5,
+		values: (_self, ticks): any =>
+			ticks.map((ts, i) => format24HourTime(ts, i % 5 === 0)), // Include date every 5th tick
 	},
 	{
 		stroke: isDarkMode ? 'white' : 'black', // Color of the axis line
@@ -61,4 +80,5 @@ const getAxes = (isDarkMode: boolean, yAxisUnit?: string): any => [
 		},
 	},
 ];
+
 export default getAxes;