reui-blocks/blocks/chart-group4.tsx

"use client";

import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Line,
  LineChart,
  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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface ChartGroup4Props {
  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 chartData = [
  { month: monthLabel(0), revenue: 18600, orders: 186, customers: 145 },
  { month: monthLabel(1), revenue: 30500, orders: 305, customers: 220 },
  { month: monthLabel(2), revenue: 23700, orders: 237, customers: 180 },
  { month: monthLabel(3), revenue: 27300, orders: 273, customers: 195 },
  { month: monthLabel(4), revenue: 20900, orders: 209, customers: 165 },
  { month: monthLabel(5), revenue: 31400, orders: 314, customers: 240 },
];

const metricTabs = [
  { value: "revenue", label: "درآمد" },
  { value: "orders", label: "سفارش‌ها" },
  { value: "customers", label: "مشتریان" },
] as const;

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

const ordersConfig = {
  orders: { label: "سفارش‌ها", color: "var(--chart-2)" },
} satisfies ChartConfig;

const customersConfig = {
  customers: { label: "مشتریان", color: "var(--chart-3)" },
} satisfies ChartConfig;

const ChartGroup4 = ({ className }: ChartGroup4Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container">
        <Card className="w-full text-start">
          <CardHeader>
            <CardTitle>شاخص‌های عملکرد</CardTitle>
            <CardDescription>
              مشاهده شاخص‌های مختلف در طول زمان
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="revenue">
              <TabsList className="mb-4">
                {metricTabs.map((tab) => (
                  <TabsTrigger key={tab.value} value={tab.value}>
                    {tab.label}
                  </TabsTrigger>
                ))}
              </TabsList>

              <TabsContent value="revenue">
                <ChartContainer config={revenueConfig} className="h-64 w-full">
                  <AreaChart
                    data={chartData}
                    margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                  >
                    <defs>
                      <linearGradient
                        id="revenueGrad"
                        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(#revenueGrad)"
                    />
                  </AreaChart>
                </ChartContainer>
              </TabsContent>

              <TabsContent value="orders">
                <ChartContainer config={ordersConfig} className="h-64 w-full">
                  <BarChart
                    data={chartData}
                    margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                  >
                    <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={40}
                      tickFormatter={(v) =>
                        compactNumberFormatter.format(Number(v))
                      }
                    />
                    <ChartTooltip
                      content={
                        <ChartTooltipContent
                          formatter={(value) =>
                            numberFormatter.format(Number(value))
                          }
                        />
                      }
                      cursor={{ fillOpacity: 0.05 }}
                    />
                    <Bar
                      dataKey="orders"
                      fill="var(--color-orders)"
                      radius={[4, 4, 0, 0]}
                    />
                  </BarChart>
                </ChartContainer>
              </TabsContent>

              <TabsContent value="customers">
                <ChartContainer
                  config={customersConfig}
                  className="h-64 w-full"
                >
                  <LineChart
                    data={chartData}
                    margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                  >
                    <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={40}
                      tickFormatter={(v) =>
                        compactNumberFormatter.format(Number(v))
                      }
                    />
                    <ChartTooltip
                      content={
                        <ChartTooltipContent
                          formatter={(value) =>
                            numberFormatter.format(Number(value))
                          }
                        />
                      }
                      cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
                    />
                    <Line
                      type="monotone"
                      dataKey="customers"
                      stroke="var(--color-customers)"
                      strokeWidth={2}
                      dot={{ fill: "var(--color-customers)", r: 4 }}
                    />
                  </LineChart>
                </ChartContainer>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { ChartGroup4 };