From 5ba9c9d48cd8c4dfc5d8b870a4b8c9aef5fd7209 Mon Sep 17 00:00:00 2001
From: rahulkeswani101 <rahul@signoz.io>
Date: Tue, 1 Oct 2024 19:17:43 +0530
Subject: [PATCH] fix: added custom breakdown of one day to handle billing
 graph issue. (#5994)

* fix: added custom breakdown to handle billing graph issue

* chore: remove console statement

* chore: added comment for current implementation of adding next day details in breakdown
---
 .../BillingUsageGraph/BillingUsageGraph.tsx       | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
index 3afee8d0d6..4a4e81c1f2 100644
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@@ -58,6 +58,21 @@ const calculateStartEndTime = (
 
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
+	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
+			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+			const nextDay = {
+				...currentDay,
+				timestamp: currentDay.timestamp + 86400,
+				count: 0,
+				size: 0,
+				quantity: 0,
+				total: 0,
+			};
+			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
+		}
+	});
 	const graphCompatibleData = useMemo(
 		() => convertDataToMetricRangePayload(data),
 		[data],