121 lines
3.2 KiB
TypeScript
121 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";
|
|
|
|
import type { ChartConfig } from "@/components/ui/chart";
|
|
import {
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
interface StatItem {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const statsData: StatItem[] = [
|
|
{
|
|
title: `${formatNumber(100)}٪`,
|
|
description: "شفافیت قیف فروش",
|
|
},
|
|
{
|
|
title: `${formatNumber(750)}+`,
|
|
description: "شاخص KPI قابل رصد",
|
|
},
|
|
{
|
|
title: `${formatNumber(85)} هزار+`,
|
|
description: "جلسه آنالیتیکس ماهانه",
|
|
},
|
|
];
|
|
|
|
interface Stats18Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Stats18 = ({ className }: Stats18Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container flex w-full flex-col items-center justify-center px-4">
|
|
<p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">عملکرد</p>
|
|
<h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter lg:text-2xll">
|
|
پوشش کانالهای فروش در یک قاب
|
|
</h2>
|
|
<p className="mx-auto max-w-xl px-5 text-center text-sm text-muted-foreground lg:text-base">
|
|
نقاط قوت و ضعف قیف را در هر ماه ببینید و اولویتهای تیم فروش را
|
|
تنظیم کنید.
|
|
</p>
|
|
|
|
<div className="my-10 h-[40vh] w-full max-w-xl">
|
|
<ChartRadarDots />
|
|
</div>
|
|
<div className="flex w-full max-w-2xl items-center justify-between">
|
|
{statsData.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex w-25 flex-col items-center justify-center gap-2 text-center"
|
|
>
|
|
<h2 className="text-3xl font-semibold tracking-tighter md:text-2xll">
|
|
{stat.title}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
{stat.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const chartData = [
|
|
{ month: "ژان", desktop: 186 },
|
|
{ month: "فور", desktop: 305 },
|
|
{ month: "مار", desktop: 237 },
|
|
{ month: "آپر", desktop: 273 },
|
|
{ month: "مه", desktop: 209 },
|
|
{ month: "ژوئ", desktop: 214 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: "عملکرد فروش",
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartRadarDots = () => {
|
|
return (
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto aspect-square max-h-[350px]"
|
|
>
|
|
<RadarChart data={chartData}>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
<PolarAngleAxis dataKey="month" />
|
|
<PolarGrid />
|
|
<Radar
|
|
dataKey="desktop"
|
|
fill="var(--color-desktop)"
|
|
fillOpacity={0.6}
|
|
dot={{
|
|
r: 4,
|
|
fillOpacity: 1,
|
|
}}
|
|
/>
|
|
</RadarChart>
|
|
</ChartContainer>
|
|
);
|
|
};
|
|
|
|
export { Stats18 };
|