GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin-dashboard): align RTL chart axes
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-15 18:11:29 +03:30
parent f30d53df7e
commit ecd4a57da9
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/AdminDashboard.tsx
View File

@@ -399,12 +399,13 @@ function DashboardPointDetailModal({
<BarChart <BarChart
data={filteredData} data={filteredData}
layout="vertical" 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" /> <CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis <XAxis
type="number" type="number"
reversed reversed
domain={[0, "dataMax"]}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={8} tickMargin={8}
@@ -542,10 +543,18 @@ function BlogPostEngagementModal({
<BarChart <BarChart
data={data} data={data}
layout="vertical" 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" /> <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 <YAxis
dataKey="label" dataKey="label"
type="category" type="category"
@@ -659,11 +668,12 @@ function HorizontalBarCard({
className="w-full" className="w-full"
style={{ height: chartHeight(data.length) }} 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" /> <CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis <XAxis
type="number" type="number"
reversed reversed
domain={[0, "dataMax"]}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={8} tickMargin={8}
@@ -731,10 +741,11 @@ function TrendLineCard({
) : ( ) : (
<ChartViewport> <ChartViewport>
<ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[260px] w-full sm:h-[300px]"> <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" /> <CartesianGrid vertical={false} strokeDasharray="3 3" />
<XAxis <XAxis
dataKey="date" dataKey="date"
reversed
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
minTickGap={34} minTickGap={34}
@@ -793,11 +804,12 @@ function StatusChartCard({
<> <>
<ChartViewport minWidth={400}> <ChartViewport minWidth={400}>
<ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[260px] w-full sm:h-[300px]"> <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" /> <CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis <XAxis
type="number" type="number"
reversed reversed
domain={[0, "dataMax"]}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={8} tickMargin={8}
@@ -850,9 +862,9 @@ function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend
}} }}
className="h-[280px] w-full sm:h-[320px]" 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" /> <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 <YAxis
orientation="right" orientation="right"
width={64} width={64}
@@ -900,11 +912,12 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
className="w-full" className="w-full"
style={{ height: chartHeight(data.length, 320) }} 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" /> <CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis <XAxis
type="number" type="number"
reversed reversed
domain={[0, "dataMax"]}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickFormatter={(value) => formatNumberPersian(Number(value))} tickFormatter={(value) => formatNumberPersian(Number(value))}