From c0b09209014f56da076be0c72d7642dd811f5056 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Fri, 15 Dec 2023 17:29:54 +0530
Subject: [PATCH] Round off x axis max timestamp to T - 1 min and 0th second
 (#4238)

* feat: round of x axis max timestamp to t - 1 min and 0th second

* feat: set min width of time selection dropdown to 120px

* feat: update logic comment

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
---
 .../container/TopNav/DateTimeSelection/index.tsx    |  3 +++
 frontend/src/lib/uPlotLib/utils/getXAxisScale.ts    | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
index 14f454dbb1..b36a1ebaba 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx
+++ b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
@@ -292,6 +292,9 @@ function DateTimeSelection({
 							selectedTime,
 						)}
 						data-testid="dropDown"
+						style={{
+							minWidth: 120,
+						}}
 					>
 						{options.map(({ value, label }) => (
 							<Option key={value + label} value={value}>
diff --git a/frontend/src/lib/uPlotLib/utils/getXAxisScale.ts b/frontend/src/lib/uPlotLib/utils/getXAxisScale.ts
index 4200fd0629..19dfe2d580 100644
--- a/frontend/src/lib/uPlotLib/utils/getXAxisScale.ts
+++ b/frontend/src/lib/uPlotLib/utils/getXAxisScale.ts
@@ -36,5 +36,18 @@ export const getXAxisScale = (
 		maxTime = fallbackMax;
 	}
 
+	// As API response is adjusted to return values for  T - 1 min (end timestamp) due to which graph would not have the current timestamp data, we see the empty space in the graph for smaller timeframe. To accommodate this, we will be plotting the graph from (startTime  ->  endTime - 1 min).
+
+	const oneMinuteAgoTimestamp = (maxTime - 60) * 1000;
+	const currentDate = new Date(oneMinuteAgoTimestamp);
+
+	// Set seconds and milliseconds to zero
+	currentDate.setSeconds(0);
+	currentDate.setMilliseconds(0);
+
+	// Get the Unix timestamp in seconds
+	const unixTimestampSeconds = Math.floor(currentDate.getTime() / 1000);
+	maxTime = unixTimestampSeconds;
+
 	return { time: true, auto: false, range: [minTime, maxTime] };
 };