From ecd4a57da980fe637dab0d2055fbd5c9688c5eb5 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Mon, 15 Jun 2026 18:11:29 +0330
Subject: [PATCH] fix(admin-dashboard): align RTL chart axes

---
 src/views/AdminDashboard.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/views/AdminDashboard.tsx b/src/views/AdminDashboard.tsx
index 6faa167..f421ded 100644
--- a/src/views/AdminDashboard.tsx
+++ b/src/views/AdminDashboard.tsx
@@ -399,12 +399,13 @@ function DashboardPointDetailModal({
                 <BarChart
                   data={filteredData}
                   layout="vertical"
-                  margin={{ top: 12, right: axisWidth(filteredData) + 16, bottom: 24, left: 20 }}
+                  margin={{ top: 12, right: 8, bottom: 24, left: 32 }}
                 >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
                     reversed
+                    domain={[0, "dataMax"]}
                     tickLine={false}
                     axisLine={false}
                     tickMargin={8}
@@ -542,10 +543,18 @@ function BlogPostEngagementModal({
                 <BarChart
                   data={data}
                   layout="vertical"
-                  margin={{ top: 12, right: axisWidth(data.map((post) => ({ label: post.title, value: post.score }))) + 16, bottom: 24, left: 20 }}
+                  margin={{ top: 12, right: 8, bottom: 24, left: 32 }}
                 >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
-                  <XAxis type="number" reversed tickLine={false} axisLine={false} tickFormatter={(value) => formatNumberPersian(Number(value))} />
+                  <XAxis
+                    type="number"
+                    reversed
+                    domain={[0, "dataMax"]}
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) => formatNumberPersian(Number(value))}
+                  />
                   <YAxis
                     dataKey="label"
                     type="category"
@@ -659,11 +668,12 @@ function HorizontalBarCard({
                 className="w-full"
                 style={{ height: chartHeight(data.length) }}
               >
-                <BarChart data={data} layout="vertical" margin={{ top: 12, right: axisWidth(data) + 10, bottom: 24, left: 20 }}>
+                <BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}>
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
                     reversed
+                    domain={[0, "dataMax"]}
                     tickLine={false}
                     axisLine={false}
                     tickMargin={8}
@@ -731,10 +741,11 @@ function TrendLineCard({
         ) : (
           <ChartViewport>
             <ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[260px] w-full sm:h-[300px]">
-              <LineChart data={data} margin={{ top: 16, right: 76, bottom: 32, left: 18 }}>
+              <LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" />
                 <XAxis
                   dataKey="date"
+                  reversed
                   tickLine={false}
                   axisLine={false}
                   minTickGap={34}
@@ -793,11 +804,12 @@ function StatusChartCard({
           <>
             <ChartViewport minWidth={400}>
               <ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[260px] w-full sm:h-[300px]">
-                <BarChart data={data} layout="vertical" margin={{ top: 14, right: 118, bottom: 28, left: 18 }}>
+                <BarChart data={data} layout="vertical" margin={{ top: 14, right: 8, bottom: 28, left: 32 }}>
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
                     reversed
+                    domain={[0, "dataMax"]}
                     tickLine={false}
                     axisLine={false}
                     tickMargin={8}
@@ -850,9 +862,9 @@ function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend
               }}
               className="h-[280px] w-full sm:h-[320px]"
             >
-              <LineChart data={data} margin={{ top: 16, right: 64, bottom: 32, left: 18 }}>
+              <LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                <XAxis dataKey="date" tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={34} tickMargin={10} />
+                <XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={34} tickMargin={10} />
                 <YAxis
                   orientation="right"
                   width={64}
@@ -900,11 +912,12 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
                 className="w-full"
                 style={{ height: chartHeight(data.length, 320) }}
               >
-                <BarChart data={data} layout="vertical" margin={{ top: 12, right: labelAxisWidth + 16, bottom: 24, left: 20 }}>
+                <BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}>
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
                     reversed
+                    domain={[0, "dataMax"]}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={(value) => formatNumberPersian(Number(value))}