reui-blocks/blocks/chart-group2.tsx

"use client";

import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
} from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { cn } from "@/lib/utils";

interface ChartGroup2Props {
  className?: string;
}

const monthLabel = (monthIndex: number) =>
  new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
    new Date(2025, monthIndex, 1),
  );

const currencyFormatter = new Intl.NumberFormat("fa-IR", {
  style: "currency",
  currency: "IRR",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
  style: "currency",
  currency: "IRR",
  notation: "compact",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1,
});

const numberFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 0,
});

const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
  notation: "compact",
  maximumFractionDigits: 1,
});

const mainChartData = [
  { month: monthLabel(0), revenue: 18600, orders: 186 },
  { month: monthLabel(1), revenue: 30500, orders: 305 },
  { month: monthLabel(2), revenue: 23700, orders: 237 },
  { month: monthLabel(3), revenue: 27300, orders: 273 },
  { month: monthLabel(4), revenue: 20900, orders: 209 },
  { month: monthLabel(5), revenue: 31400, orders: 314 },
];

const categoryData = [
  { name: "الکترونیک", value: 12400 },
  { name: "پوشاک", value: 8900 },
  { name: "خانه", value: 6200 },
  { name: "ورزش", value: 3900 },
];

const sourceData = [
  { name: "ارگانیک", value: 4520 },
  { name: "پولی", value: 3210 },
  { name: "شبکه‌های اجتماعی", value: 2100 },
  { name: "ارجاع", value: 1570 },
];

const mainConfig = {
  revenue: { label: "درآمد", color: "var(--chart-1)" },
} satisfies ChartConfig;

const categoryConfig = {
  value: { label: "فروش", color: "var(--chart-2)" },
} satisfies ChartConfig;

const sourceConfig = {
  value: { label: "بازدیدکنندگان", color: "var(--chart-3)" },
} satisfies ChartConfig;

const ChartGroup2 = ({ className }: ChartGroup2Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container grid gap-4 md:grid-cols-2">
        <Card className="text-start md:col-span-2">
          <CardHeader>
            <CardTitle>مرور درآمد</CardTitle>
            <CardDescription>عملکرد درآمد ماهانه</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={mainConfig} className="h-64 w-full">
              <AreaChart
                data={mainChartData}
                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
              >
                <defs>
                  <linearGradient id="mainGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop
                      offset="0%"
                      stopColor="var(--color-revenue)"
                      stopOpacity={0.3}
                    />
                    <stop
                      offset="100%"
                      stopColor="var(--color-revenue)"
                      stopOpacity={0}
                    />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis
                  dataKey="month"
                  axisLine={false}
                  tickLine={false}
                  tickMargin={8}
                  fontSize={12}
                />
                <YAxis
                  axisLine={false}
                  tickLine={false}
                  tickMargin={8}
                  fontSize={10}
                  width={52}
                  tickFormatter={(v) =>
                    compactCurrencyFormatter.format(Number(v))
                  }
                />
                <ChartTooltip
                  content={
                    <ChartTooltipContent
                      formatter={(value) =>
                        currencyFormatter.format(Number(value))
                      }
                    />
                  }
                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
                />
                <Area
                  type="monotone"
                  dataKey="revenue"
                  stroke="var(--color-revenue)"
                  strokeWidth={2}
                  fill="url(#mainGradient)"
                />
              </AreaChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <Card className="text-start">
          <CardHeader>
            <CardTitle>فروش به تفکیک دسته</CardTitle>
            <CardDescription>پرفروش‌ترین دسته‌های محصول</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={categoryConfig} className="h-48 w-full">
              <BarChart
                data={categoryData}
                layout="vertical"
                margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
              >
                <XAxis
                  type="number"
                  axisLine={false}
                  tickLine={false}
                  fontSize={10}
                  tickFormatter={(v) =>
                    compactCurrencyFormatter.format(Number(v))
                  }
                />
                <YAxis
                  type="category"
                  dataKey="name"
                  axisLine={false}
                  tickLine={false}
                  fontSize={12}
                  width={88}
                />
                <ChartTooltip
                  content={
                    <ChartTooltipContent
                      formatter={(value) =>
                        currencyFormatter.format(Number(value))
                      }
                    />
                  }
                  cursor={{ fillOpacity: 0.05 }}
                />
                <Bar
                  dataKey="value"
                  fill="var(--color-value)"
                  radius={[0, 4, 4, 0]}
                />
              </BarChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <Card className="text-start">
          <CardHeader>
            <CardTitle>منابع ترافیک</CardTitle>
            <CardDescription>کانال‌های جذب بازدیدکننده</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={sourceConfig} className="h-48 w-full">
              <BarChart
                data={sourceData}
                layout="vertical"
                margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
              >
                <XAxis
                  type="number"
                  axisLine={false}
                  tickLine={false}
                  fontSize={10}
                  tickFormatter={(v) =>
                    compactNumberFormatter.format(Number(v))
                  }
                />
                <YAxis
                  type="category"
                  dataKey="name"
                  axisLine={false}
                  tickLine={false}
                  fontSize={12}
                  width={100}
                />
                <ChartTooltip
                  content={
                    <ChartTooltipContent
                      formatter={(value) =>
                        numberFormatter.format(Number(value))
                      }
                    />
                  }
                  cursor={{ fillOpacity: 0.05 }}
                />
                <Bar
                  dataKey="value"
                  fill="var(--color-value)"
                  radius={[0, 4, 4, 0]}
                />
              </BarChart>
            </ChartContainer>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { ChartGroup2 };