reui-blocks/blocks/chart-group6.tsx

"use client";

import { Bar, BarChart, Pie, PieChart, 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 ChartGroup6Props {
  className?: string;
}

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

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

const pieData = [
  { name: "دسکتاپ", value: 4520, fill: "var(--chart-1)" },
  { name: "موبایل", value: 3210, fill: "var(--chart-2)" },
  { name: "تبلت", value: 1270, fill: "var(--chart-3)" },
];

const pieConfig = {
  دسکتاپ: { label: "دسکتاپ", color: "var(--chart-1)" },
  موبایل: { label: "موبایل", color: "var(--chart-2)" },
  تبلت: { label: "تبلت", color: "var(--chart-3)" },
} satisfies ChartConfig;

const barData = [
  { name: "Chrome", value: 4200 },
  { name: "Safari", value: 2800 },
  { name: "Firefox", value: 1400 },
  { name: "Edge", value: 980 },
  { name: "سایر", value: 620 },
];

const barConfig = {
  value: { label: "کاربران", color: "var(--chart-4)" },
} satisfies ChartConfig;

const ChartGroup6 = ({ className }: ChartGroup6Props) => {
  const total = pieData.reduce((sum, item) => sum + item.value, 0);

  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">
          <CardHeader>
            <CardTitle>ترافیک به تفکیک دستگاه</CardTitle>
            <CardDescription>تفکیک نشست‌های کاربر</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-8">
              <div className="relative size-40">
                <ChartContainer config={pieConfig} className="size-full">
                  <PieChart>
                    <ChartTooltip
                      content={
                        <ChartTooltipContent
                          nameKey="name"
                          hideLabel
                          formatter={(value) =>
                            numberFormatter.format(Number(value))
                          }
                        />
                      }
                      cursor={false}
                    />
                    <Pie
                      data={pieData}
                      cx="50%"
                      cy="50%"
                      innerRadius={50}
                      outerRadius={70}
                      paddingAngle={2}
                      dataKey="value"
                      nameKey="name"
                      strokeWidth={0}
                    />
                  </PieChart>
                </ChartContainer>
                <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
                  <span className="text-xl font-bold tabular-nums">
                    {numberFormatter.format(total)}
                  </span>
                  <span className="text-xs text-muted-foreground">مجموع</span>
                </div>
              </div>
              <div className="flex-1 space-y-3">
                {pieData.map((item, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between"
                  >
                    <div className="flex items-center gap-2">
                      <div
                        className="size-3 rounded-full"
                        style={{ backgroundColor: item.fill }}
                      />
                      <span className="text-sm">{item.name}</span>
                    </div>
                    <span className="text-sm font-medium tabular-nums">
                      {numberFormatter.format(item.value)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="text-start">
          <CardHeader>
            <CardTitle>استفاده از مرورگر</CardTitle>
            <CardDescription>برترین مرورگرها بر اساس کاربر</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={barConfig} className="h-48 w-full">
              <BarChart
                data={barData}
                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={72}
                />
                <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 { ChartGroup6 };