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

fix(admin-dashboard): prevent mobile chart overflow

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-15 21:34:59 +03:30
parent ecd4a57da9
commit 021bee9444
1 changed files with 91 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/views/AdminDashboard.tsx
View File

@@ -42,6 +42,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useIsMobile } from "@/hooks/use-mobile";
import { api } from "@/lib/api"; import { api } from "@/lib/api";
import type { import type {
AnalyticsPointGroupSchema, AnalyticsPointGroupSchema,
@@ -138,13 +139,13 @@ function truncateLabel(value: string, max = 18) {
return normalized.length > max ? `${normalized.slice(0, max - 1)}…` : normalized; return normalized.length > max ? `${normalized.slice(0, max - 1)}…` : normalized;
} }
function chartHeight(count: number, min = 280) { function chartHeight(count: number, min = 280, compact = false) {
return Math.max(min, count * 32 + 80); return Math.max(compact ? Math.min(min, 240) : min, count * (compact ? 26 : 32) + (compact ? 64 : 80));
} }
function axisWidth(items: AnalyticsPointSchema[]) { function axisWidth(items: AnalyticsPointSchema[], compact = false) {
const maxLength = Math.max(...items.map((item) => String(item.label).length), 10); const maxLength = Math.max(...items.map((item) => String(item.label).length), 10);
return Math.min(190, Math.max(90, maxLength * 7)); return Math.min(compact ? 92 : 190, Math.max(compact ? 64 : 90, maxLength * (compact ? 4.5 : 7)));
} }
function dataWithOtherNotice(group: AnalyticsPointGroupSchema) { function dataWithOtherNotice(group: AnalyticsPointGroupSchema) {
@@ -280,10 +281,23 @@ function FilterCard({
); );
} }
function ChartViewport({ children, minWidth = 420 }: { children: React.ReactNode; minWidth?: number }) { function ChartViewport({
children,
minWidth = 420,
scrollable = false,
}: {
children: React.ReactNode;
minWidth?: number;
scrollable?: boolean;
}) {
const isMobile = useIsMobile();
const shouldScroll = scrollable && !isMobile;
return ( return (
<div className="overflow-x-auto overflow-y-hidden pb-2" dir="ltr"> <div className={cn("min-w-0 max-w-full overflow-y-hidden pb-2", shouldScroll ? "overflow-x-auto" : "overflow-x-hidden")} dir="ltr">
<div style={{ minWidth }}>{children}</div> <div className="min-w-0 max-w-full" style={{ width: "100%", minWidth: shouldScroll ? minWidth : undefined }}>
{children}
</div>
</div> </div>
); );
} }
@@ -354,6 +368,7 @@ function DashboardPointDetailModal({
}) { }) {
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const [sortBy, setSortBy] = React.useState<"value" | "label">("value"); const [sortBy, setSortBy] = React.useState<"value" | "label">("value");
const isMobile = useIsMobile();
const filteredData = React.useMemo(() => { const filteredData = React.useMemo(() => {
const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR"); const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR");
const filtered = normalizedSearch const filtered = normalizedSearch
@@ -390,16 +405,16 @@ function DashboardPointDetailModal({
<EmptyChart label="موردی با این جستجو پیدا نشد." /> <EmptyChart label="موردی با این جستجو پیدا نشد." />
) : ( ) : (
<> <>
<ChartViewport minWidth={680}> <ChartViewport minWidth={680} scrollable>
<ChartContainer <ChartContainer
config={{ value: { label: "مقدار", color } }} config={{ value: { label: "مقدار", color } }}
className="w-full" className="w-full"
style={{ height: Math.min(Math.max(filteredData.length * 34 + 100, 360), 780) }} style={{ height: Math.min(Math.max(filteredData.length * (isMobile ? 28 : 34) + 100, isMobile ? 300 : 360), 780) }}
> >
<BarChart <BarChart
data={filteredData} data={filteredData}
layout="vertical" layout="vertical"
margin={{ top: 12, right: 8, bottom: 24, left: 32 }} margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 20 } : { top: 12, right: 8, bottom: 24, left: 32 }}
> >
<CartesianGrid horizontal={false} strokeDasharray="3 3" /> <CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis <XAxis
@@ -415,11 +430,11 @@ function DashboardPointDetailModal({
dataKey="label" dataKey="label"
type="category" type="category"
orientation="right" orientation="right"
width={axisWidth(filteredData)} width={axisWidth(filteredData, isMobile)}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), 24)} tickFormatter={(value) => truncateLabel(String(value), isMobile ? 12 : 24)}
/> />
<ChartTooltip content={<CustomValueTooltip unit={unit} formatter={formatter} />} /> <ChartTooltip content={<CustomValueTooltip unit={unit} formatter={formatter} />} />
<Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" /> <Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" />
@@ -484,6 +499,7 @@ function BlogPostEngagementModal({
}) { }) {
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const [sortBy, setSortBy] = React.useState<"score" | "likes" | "saves" | "comments" | "title">("score"); const [sortBy, setSortBy] = React.useState<"score" | "likes" | "saves" | "comments" | "title">("score");
const isMobile = useIsMobile();
const data = React.useMemo(() => { const data = React.useMemo(() => {
const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR"); const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR");
const filtered = normalizedSearch const filtered = normalizedSearch
@@ -530,7 +546,7 @@ function BlogPostEngagementModal({
<EmptyChart label="نوشته‌ای با این جستجو پیدا نشد." /> <EmptyChart label="نوشته‌ای با این جستجو پیدا نشد." />
) : ( ) : (
<> <>
<ChartViewport minWidth={760}> <ChartViewport minWidth={760} scrollable>
<ChartContainer <ChartContainer
config={{ config={{
likes: { label: "لایک", color: PALETTE.rose }, likes: { label: "لایک", color: PALETTE.rose },
@@ -538,12 +554,12 @@ function BlogPostEngagementModal({
comments: { label: "کامنت", color: PALETTE.amber }, comments: { label: "کامنت", color: PALETTE.amber },
}} }}
className="w-full" className="w-full"
style={{ height: Math.min(Math.max(data.length * 34 + 100, 380), 820) }} style={{ height: Math.min(Math.max(data.length * (isMobile ? 28 : 34) + 100, isMobile ? 320 : 380), 820) }}
> >
<BarChart <BarChart
data={data} data={data}
layout="vertical" layout="vertical"
margin={{ top: 12, right: 8, bottom: 24, left: 32 }} margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 20 } : { top: 12, right: 8, bottom: 24, left: 32 }}
> >
<CartesianGrid horizontal={false} strokeDasharray="3 3" /> <CartesianGrid horizontal={false} strokeDasharray="3 3" />
<XAxis <XAxis
@@ -559,11 +575,11 @@ function BlogPostEngagementModal({
dataKey="label" dataKey="label"
type="category" type="category"
orientation="right" orientation="right"
width={axisWidth(data.map((post) => ({ label: post.title, value: post.score })))} width={axisWidth(data.map((post) => ({ label: post.title, value: post.score })), isMobile)}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), 26)} tickFormatter={(value) => truncateLabel(String(value), isMobile ? 12 : 26)}
/> />
<ChartTooltip content={<PostEngagementTooltip />} /> <ChartTooltip content={<PostEngagementTooltip />} />
<Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} /> <Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} />
@@ -651,8 +667,9 @@ function HorizontalBarCard({
const data = dataWithOtherNotice(group); const data = dataWithOtherNotice(group);
const allData = fullGroupItems(group); const allData = fullGroupItems(group);
const [detailsOpen, setDetailsOpen] = React.useState(false); const [detailsOpen, setDetailsOpen] = React.useState(false);
const isMobile = useIsMobile();
return ( return (
<Card> <Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6"> <CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">{title}</CardTitle> <CardTitle className="text-base sm:text-lg">{title}</CardTitle>
<CardDescription>{description}</CardDescription> <CardDescription>{description}</CardDescription>
@@ -666,9 +683,13 @@ function HorizontalBarCard({
<ChartContainer <ChartContainer
config={{ value: { label: "مقدار", color } }} config={{ value: { label: "مقدار", color } }}
className="w-full" className="w-full"
style={{ height: chartHeight(data.length) }} style={{ height: chartHeight(data.length, 280, isMobile) }}
> >
<BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}> <BarChart
data={data}
layout="vertical"
margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 18 } : { 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"
@@ -683,11 +704,11 @@ function HorizontalBarCard({
dataKey="label" dataKey="label"
type="category" type="category"
orientation="right" orientation="right"
width={axisWidth(data)} width={axisWidth(data, isMobile)}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value))} tickFormatter={(value) => truncateLabel(String(value), isMobile ? 10 : 18)}
/> />
<ChartTooltip content={<CustomValueTooltip unit={unit} formatter={valueFormatter} />} /> <ChartTooltip content={<CustomValueTooltip unit={unit} formatter={valueFormatter} />} />
<Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" /> <Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" />
@@ -726,8 +747,9 @@ function TrendLineCard({
color?: string; color?: string;
valueFormatter?: (value: number) => string; valueFormatter?: (value: number) => string;
}) { }) {
const isMobile = useIsMobile();
return ( return (
<Card> <Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6"> <CardHeader className="p-4 sm:p-6">
<CardTitle className="flex items-center gap-2 text-base sm:text-lg"> <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
<LineChartIcon className="h-5 w-5 text-primary" /> <LineChartIcon className="h-5 w-5 text-primary" />
@@ -740,24 +762,27 @@ function TrendLineCard({
<EmptyChart /> <EmptyChart />
) : ( ) : (
<ChartViewport> <ChartViewport>
<ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[260px] w-full sm:h-[300px]"> <ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[220px] w-full sm:h-[300px]">
<LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}> <LineChart
data={data}
margin={isMobile ? { top: 12, right: 4, bottom: 26, left: 8 } : { 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 reversed
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
minTickGap={34} minTickGap={isMobile ? 18 : 34}
tickMargin={10} tickMargin={isMobile ? 6 : 10}
tickFormatter={formatJalaliTick} tickFormatter={formatJalaliTick}
/> />
<YAxis <YAxis
orientation="right" orientation="right"
width={76} width={isMobile ? 46 : 76}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => valueFormatter(Number(value))} tickFormatter={(value) => valueFormatter(Number(value))}
/> />
<ChartTooltip <ChartTooltip
@@ -791,8 +816,9 @@ function StatusChartCard({
description: string; description: string;
data: Array<{ status: string; label: string; value: number }>; data: Array<{ status: string; label: string; value: number }>;
}) { }) {
const isMobile = useIsMobile();
return ( return (
<Card> <Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6"> <CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">{title}</CardTitle> <CardTitle className="text-base sm:text-lg">{title}</CardTitle>
<CardDescription>{description}</CardDescription> <CardDescription>{description}</CardDescription>
@@ -802,9 +828,13 @@ function StatusChartCard({
<EmptyChart /> <EmptyChart />
) : ( ) : (
<> <>
<ChartViewport minWidth={400}> <ChartViewport>
<ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[260px] w-full sm:h-[300px]"> <ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[220px] w-full sm:h-[300px]">
<BarChart data={data} layout="vertical" margin={{ top: 14, right: 8, bottom: 28, left: 32 }}> <BarChart
data={data}
layout="vertical"
margin={isMobile ? { top: 10, right: 2, bottom: 22, left: 18 } : { 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"
@@ -819,11 +849,11 @@ function StatusChartCard({
dataKey="label" dataKey="label"
type="category" type="category"
orientation="right" orientation="right"
width={108} width={isMobile ? 74 : 108}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), 14)} tickFormatter={(value) => truncateLabel(String(value), isMobile ? 9 : 14)}
/> />
<ChartTooltip content={<CustomValueTooltip />} /> <ChartTooltip content={<CustomValueTooltip />} />
<Bar dataKey="value" radius={[8, 8, 8, 8]}> <Bar dataKey="value" radius={[8, 8, 8, 8]}>
@@ -843,8 +873,9 @@ function StatusChartCard({
} }
function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend"] }) { function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend"] }) {
const isMobile = useIsMobile();
return ( return (
<Card> <Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6"> <CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">روند تعاملات بلاگ</CardTitle> <CardTitle className="text-base sm:text-lg">روند تعاملات بلاگ</CardTitle>
<CardDescription>لایک، ذخیره و کامنت در بازه انتخابی</CardDescription> <CardDescription>لایک، ذخیره و کامنت در بازه انتخابی</CardDescription>
@@ -860,17 +891,20 @@ function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend
saves: { label: "ذخیره", color: PALETTE.cyan }, saves: { label: "ذخیره", color: PALETTE.cyan },
comments: { label: "کامنت", color: PALETTE.amber }, comments: { label: "کامنت", color: PALETTE.amber },
}} }}
className="h-[280px] w-full sm:h-[320px]" className="h-[230px] w-full sm:h-[320px]"
> >
<LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}> <LineChart
data={data}
margin={isMobile ? { top: 12, right: 4, bottom: 26, left: 8 } : { top: 16, right: 12, bottom: 32, left: 18 }}
>
<CartesianGrid vertical={false} strokeDasharray="3 3" /> <CartesianGrid vertical={false} strokeDasharray="3 3" />
<XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={34} tickMargin={10} /> <XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={isMobile ? 18 : 34} tickMargin={isMobile ? 6 : 10} />
<YAxis <YAxis
orientation="right" orientation="right"
width={64} width={isMobile ? 44 : 64}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => formatNumberPersian(Number(value))} tickFormatter={(value) => formatNumberPersian(Number(value))}
/> />
<ChartTooltip content={<ChartTooltipContent />} /> <ChartTooltip content={<ChartTooltipContent />} />
@@ -890,9 +924,10 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
const data = toPostEngagementData(group.top_items); const data = toPostEngagementData(group.top_items);
const allPosts = group.items?.length ? group.items : group.top_items; const allPosts = group.items?.length ? group.items : group.top_items;
const [detailsOpen, setDetailsOpen] = React.useState(false); const [detailsOpen, setDetailsOpen] = React.useState(false);
const labelAxisWidth = axisWidth(data.map((post) => ({ label: post.title, value: post.score }))); const isMobile = useIsMobile();
const labelAxisWidth = axisWidth(data.map((post) => ({ label: post.title, value: post.score })), isMobile);
return ( return (
<Card> <Card className="min-w-0 overflow-hidden">
<CardHeader className="p-4 sm:p-6"> <CardHeader className="p-4 sm:p-6">
<CardTitle className="text-base sm:text-lg">محبوبیت نوشته‌ها</CardTitle> <CardTitle className="text-base sm:text-lg">محبوبیت نوشته‌ها</CardTitle>
<CardDescription>رتبه‌بندی بر اساس مجموع لایک، ذخیره و کامنت</CardDescription> <CardDescription>رتبه‌بندی بر اساس مجموع لایک، ذخیره و کامنت</CardDescription>
@@ -902,7 +937,7 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
<EmptyChart /> <EmptyChart />
) : ( ) : (
<> <>
<ChartViewport minWidth={460}> <ChartViewport>
<ChartContainer <ChartContainer
config={{ config={{
likes: { label: "لایک", color: PALETTE.rose }, likes: { label: "لایک", color: PALETTE.rose },
@@ -910,9 +945,13 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
comments: { label: "کامنت", color: PALETTE.amber }, comments: { label: "کامنت", color: PALETTE.amber },
}} }}
className="w-full" className="w-full"
style={{ height: chartHeight(data.length, 320) }} style={{ height: chartHeight(data.length, 320, isMobile) }}
> >
<BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}> <BarChart
data={data}
layout="vertical"
margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 18 } : { 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"
@@ -929,8 +968,8 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
width={labelAxisWidth} width={labelAxisWidth}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
tickMargin={10} tickMargin={isMobile ? 4 : 10}
tickFormatter={(value) => truncateLabel(String(value), 22)} tickFormatter={(value) => truncateLabel(String(value), isMobile ? 10 : 22)}
/> />
<ChartTooltip content={<PostEngagementTooltip />} /> <ChartTooltip content={<PostEngagementTooltip />} />
<Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} /> <Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} />