feat: added Option to toggle 24h time format in dashboard timeseries …

…panels

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;