Merge pull request #4751 from Dokploy/fix/requests-chart-not-visible

fix(requests): chart not visible in Requests tab

apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx

@@ -1,11 +1,4 @@
-import {
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
-	Area,
-	AreaChart,
-	CartesianGrid,
-	ResponsiveContainer,
-	XAxis,
-	YAxis,
-} from "recharts";
 import {
 	type ChartConfig,
 	ChartContainer,
@@ -49,65 +42,60 @@ export const RequestDistributionChart = ({
 	);
 
 	return (
-		<div className="w-full h-[200px] overflow-hidden">
+		<ChartContainer
-			<ResponsiveContainer
+			config={chartConfig}
-				width="100%"
+			className="aspect-auto h-[200px] w-full"
-				height="100%"
+		>
-				className="overflow-hidden"
+			<AreaChart
+				accessibilityLayer
+				data={stats || []}
+				margin={{
+					top: 10,
+					left: 12,
+					right: 12,
+					bottom: 0,
+				}}
 			>
-				<ChartContainer config={chartConfig}>
+				<CartesianGrid vertical={false} />
-					<AreaChart
+				<XAxis
-						accessibilityLayer
+					dataKey="hour"
-						data={stats || []}
+					tickLine={false}
-						margin={{
+					axisLine={false}
-							top: 10,
+					tickMargin={8}
-							left: 12,
+					tickFormatter={(value) =>
-							right: 12,
+						new Date(value).toLocaleTimeString([], {
-							bottom: 0,
+							hour: "2-digit",
-						}}
+							minute: "2-digit",
-					>
+						})
-						<CartesianGrid vertical={false} />
+					}
-						<XAxis
+				/>
-							dataKey="hour"
+				<YAxis
-							tickLine={false}
+					tickLine={false}
-							axisLine={false}
+					axisLine={false}
-							tickMargin={8}
+					tickMargin={8}
-							tickFormatter={(value) =>
+					allowDataOverflow={false}
-								new Date(value).toLocaleTimeString([], {
+					domain={[0, "auto"]}
-									hour: "2-digit",
+				/>
-									minute: "2-digit",
+				<ChartTooltip
-								})
+					cursor={false}
-							}
+					content={<ChartTooltipContent indicator="line" />}
-						/>
+					labelFormatter={(value) =>
-						<YAxis
+						new Date(value).toLocaleString([], {
-							tickLine={false}
+							month: "short",
-							axisLine={false}
+							day: "numeric",
-							tickMargin={8}
+							hour: "2-digit",
-							allowDataOverflow={false}
+							minute: "2-digit",
-							domain={[0, "auto"]}
+						})
-						/>
+					}
-						<ChartTooltip
+				/>
-							cursor={false}
+				<Area
-							content={<ChartTooltipContent indicator="line" />}
+					dataKey="count"
-							labelFormatter={(value) =>
+					type="monotone"
-								new Date(value).toLocaleString([], {
+					fill="hsl(var(--chart-1))"
-									month: "short",
+					fillOpacity={0.4}
-									day: "numeric",
+					stroke="hsl(var(--chart-1))"
-									hour: "2-digit",
+				/>
-									minute: "2-digit",
+			</AreaChart>
-								})
+		</ChartContainer>
-							}
-						/>
-						<Area
-							dataKey="count"
-							type="monotone"
-							fill="hsl(var(--chart-1))"
-							fillOpacity={0.4}
-							stroke="hsl(var(--chart-1))"
-						/>
-					</AreaChart>
-				</ChartContainer>
-			</ResponsiveContainer>
-		</div>
 	);
 };