From ea83406f6f539e24071f84844535bcae15327bc7 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@hotmail.com>
Date: Sun, 30 Nov 2025 12:31:27 -0600
Subject: [PATCH] refactor: enhance RequestDistributionChart layout and
 responsiveness

- Updated the chart container to improve layout with a fixed height and overflow handling.
- Adjusted margin settings for better spacing and added support for data overflow in the Y-axis.
- Changed the Area chart type to 'monotone' for smoother transitions in the data representation.
---
 .../requests/request-distribution-chart.tsx   | 106 ++++++++++--------
 1 file changed, 60 insertions(+), 46 deletions(-)

diff --git a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
index 2a5db2a94..c760c8175 100644
--- a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
+++ b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
@@ -49,51 +49,65 @@ export const RequestDistributionChart = ({
 	);
 
 	return (
-		<ResponsiveContainer width="100%" height={200}>
-			<ChartContainer config={chartConfig}>
-				<AreaChart
-					accessibilityLayer
-					data={stats || []}
-					margin={{
-						left: 12,
-						right: 12,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<XAxis
-						dataKey="hour"
-						tickLine={false}
-						axisLine={false}
-						tickMargin={8}
-						tickFormatter={(value) =>
-							new Date(value).toLocaleTimeString([], {
-								hour: "2-digit",
-								minute: "2-digit",
-							})
-						}
-					/>
-					<YAxis tickLine={false} axisLine={false} tickMargin={8} />
-					<ChartTooltip
-						cursor={false}
-						content={<ChartTooltipContent indicator="line" />}
-						labelFormatter={(value) =>
-							new Date(value).toLocaleString([], {
-								month: "short",
-								day: "numeric",
-								hour: "2-digit",
-								minute: "2-digit",
-							})
-						}
-					/>
-					<Area
-						dataKey="count"
-						type="natural"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.4}
-						stroke="hsl(var(--chart-1))"
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</ResponsiveContainer>
+		<div className="w-full h-[200px] overflow-hidden">
+			<ResponsiveContainer
+				width="100%"
+				height="100%"
+				className="overflow-hidden"
+			>
+				<ChartContainer config={chartConfig}>
+					<AreaChart
+						accessibilityLayer
+						data={stats || []}
+						margin={{
+							top: 10,
+							left: 12,
+							right: 12,
+							bottom: 0,
+						}}
+					>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="hour"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							tickFormatter={(value) =>
+								new Date(value).toLocaleTimeString([], {
+									hour: "2-digit",
+									minute: "2-digit",
+								})
+							}
+						/>
+						<YAxis
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							allowDataOverflow={false}
+							domain={[0, "auto"]}
+						/>
+						<ChartTooltip
+							cursor={false}
+							content={<ChartTooltipContent indicator="line" />}
+							labelFormatter={(value) =>
+								new Date(value).toLocaleString([], {
+									month: "short",
+									day: "numeric",
+									hour: "2-digit",
+									minute: "2-digit",
+								})
+							}
+						/>
+						<Area
+							dataKey="count"
+							type="monotone"
+							fill="hsl(var(--chart-1))"
+							fillOpacity={0.4}
+							stroke="hsl(var(--chart-1))"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</ResponsiveContainer>
+		</div>
 	);
 };