reui-blocks/blocks/chart-group9.tsx

"use client";

import { useState } from "react";
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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface ChartGroup9Props {
  className?: string;
}

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

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 oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 1,
  minimumFractionDigits: 1,
});

const formatPercent = (value: number) =>
  `${oneDecimalFormatter.format(value)}٪`;

const datePoints: [number, number][] = [
  [0, 1],
  [0, 8],
  [0, 15],
  [0, 22],
  [0, 29],
  [1, 5],
  [1, 12],
  [1, 19],
];

const buildSeries = (values: number[]) =>
  datePoints.map(([month, day], index) => ({
    date: dateLabel(month, day),
    value: values[index],
  }));

const revenueData = buildSeries([
  4200, 5100, 4800, 6200, 7100, 5400, 6800, 7500,
]);

const ordersData = buildSeries([42, 51, 48, 62, 71, 54, 68, 75]);

const visitorsData = buildSeries([
  1200, 1450, 1380, 1720, 1980, 1540, 1850, 2100,
]);

const totalRevenue = revenueData.reduce((sum, d) => sum + d.value, 0);
const totalOrders = ordersData.reduce((sum, d) => sum + d.value, 0);

const metricOptions = [
  { value: "revenue", label: "درآمد" },
  { value: "orders", label: "سفارش‌ها" },
  { value: "visitors", label: "بازدیدکنندگان" },
] as const;

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

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

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

const ChartGroup9 = ({ className }: ChartGroup9Props) => {
  const [metric, setMetric] = useState("revenue");

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container">
        <Card className="w-full text-start">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <div>
              <CardTitle>مرور شاخص‌ها</CardTitle>
              <CardDescription>
                مشاهده شاخص‌های کلیدی در طول زمان
              </CardDescription>
            </div>
            <Select value={metric} onValueChange={setMetric}>
              <SelectTrigger className="w-40">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {metricOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </CardHeader>
          <CardContent>
            <div className="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
              <div>
                <p className="text-sm text-muted-foreground">مجموع درآمد</p>
                <p className="text-xl font-bold tabular-nums">
                  {currencyFormatter.format(totalRevenue)}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">مجموع سفارش‌ها</p>
                <p className="text-xl font-bold tabular-nums">
                  {numberFormatter.format(totalOrders)}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">
                  میانگین ارزش سفارش
                </p>
                <p className="text-xl font-bold tabular-nums">
                  {currencyFormatter.format(
                    Math.round(totalRevenue / totalOrders),
                  )}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">نرخ تبدیل</p>
                <p className="text-xl font-bold tabular-nums">
                  {formatPercent(3.2)}
                </p>
              </div>
            </div>

            {metric === "revenue" && (
              <ChartContainer config={revenueConfig} className="h-64 w-full">
                <AreaChart
                  data={revenueData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <defs>
                    <linearGradient id="revGrad9" x1="0" y1="0" x2="0" y2="1">
                      <stop
                        offset="0%"
                        stopColor="var(--color-value)"
                        stopOpacity={0.3}
                      />
                      <stop
                        offset="100%"
                        stopColor="var(--color-value)"
                        stopOpacity={0}
                      />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis
                    dataKey="date"
                    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="value"
                    stroke="var(--color-value)"
                    strokeWidth={2}
                    fill="url(#revGrad9)"
                  />
                </AreaChart>
              </ChartContainer>
            )}
            {metric === "orders" && (
              <ChartContainer config={ordersConfig} className="h-64 w-full">
                <BarChart
                  data={ordersData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis
                    dataKey="date"
                    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="value"
                    fill="var(--color-value)"
                    radius={[4, 4, 0, 0]}
                  />
                </BarChart>
              </ChartContainer>
            )}
            {metric === "visitors" && (
              <ChartContainer config={visitorsConfig} className="h-64 w-full">
                <LineChart
                  data={visitorsData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis
                    dataKey="date"
                    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="value"
                    stroke="var(--color-value)"
                    strokeWidth={2}
                    dot={false}
                  />
                </LineChart>
              </ChartContainer>
            )}
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { ChartGroup9 };