142 lines
3.7 KiB
TypeScript
142 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { CartesianGrid, Line, LineChart, XAxis } 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: "قالب گزارش آماده",
|
|
},
|
|
{
|
|
title: `${formatNumber(85)} هزار+`,
|
|
description: "تیم فروش فعال",
|
|
},
|
|
];
|
|
|
|
interface Stats16Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Stats16 = ({ className }: Stats16Props) => {
|
|
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-20 h-[30vh] w-full max-w-xl">
|
|
<ChartLineDots />
|
|
</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, mobile: 80 },
|
|
{ month: "فور", desktop: 305, mobile: 200 },
|
|
{ month: "مار", desktop: 237, mobile: 120 },
|
|
{ month: "آپر", desktop: 73, mobile: 190 },
|
|
{ month: "مه", desktop: 209, mobile: 130 },
|
|
{ month: "ژوئ", desktop: 214, mobile: 140 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: "تبدیل وب",
|
|
color: "var(--chart-1)",
|
|
},
|
|
mobile: {
|
|
label: "تبدیل موبایل",
|
|
color: "var(--chart-2)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartLineDots = () => {
|
|
return (
|
|
<ChartContainer config={chartConfig} className="h-full w-full">
|
|
<LineChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{
|
|
left: 12,
|
|
right: 12,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="month"
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={<ChartTooltipContent hideLabel />}
|
|
/>
|
|
<Line
|
|
dataKey="desktop"
|
|
type="natural"
|
|
stroke="var(--color-desktop)"
|
|
strokeWidth={2}
|
|
dot={{
|
|
fill: "var(--color-desktop)",
|
|
}}
|
|
activeDot={{
|
|
r: 6,
|
|
}}
|
|
/>
|
|
</LineChart>
|
|
</ChartContainer>
|
|
);
|
|
};
|
|
|
|
export { Stats16 };
|