reui-blocks/blocks/chart-group5.tsx

"use client";

import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";

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

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

const currentData = [
  { month: monthLabel(0), value: 18600 },
  { month: monthLabel(1), value: 30500 },
  { month: monthLabel(2), value: 23700 },
  { month: monthLabel(3), value: 27300 },
  { month: monthLabel(4), value: 20900 },
  { month: monthLabel(5), value: 31400 },
];

const previoIRRata = [
  { month: monthLabel(0), value: 15200 },
  { month: monthLabel(1), value: 24800 },
  { month: monthLabel(2), value: 21100 },
  { month: monthLabel(3), value: 22500 },
  { month: monthLabel(4), value: 19400 },
  { month: monthLabel(5), value: 26200 },
];

const combinedData = currentData.map((item, index) => ({
  month: item.month,
  current: item.value,
  previous: previoIRRata[index].value,
}));

const chartConfig = {
  current: { label: "امسال", color: "var(--chart-1)" },
  previous: { label: "سال قبل", color: "var(--chart-4)" },
} satisfies ChartConfig;

const ChartGroup5 = ({ className }: ChartGroup5Props) => {
  const currentTotal = currentData.reduce((sum, item) => sum + item.value, 0);
  const previousTotal = previoIRRata.reduce((sum, item) => sum + item.value, 0);
  const difference = currentTotal - previousTotal;
  const growthPercent =
    ((currentTotal - previousTotal) / previousTotal) * 100;

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container grid gap-4 md:grid-cols-3">
        <Card className="text-start md:col-span-2">
          <CardHeader>
            <CardTitle>مقایسه سال به سال</CardTitle>
            <CardDescription>عملکرد درآمد در برابر سال قبل</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={chartConfig} className="h-64 w-full">
              <LineChart
                data={combinedData}
                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={52}
                  tickFormatter={(v) =>
                    compactCurrencyFormatter.format(Number(v))
                  }
                />
                <ChartTooltip
                  content={
                    <ChartTooltipContent
                      formatter={(value) =>
                        currencyFormatter.format(Number(value))
                      }
                    />
                  }
                  cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
                />
                <ChartLegend content={<ChartLegendContent />} />
                <Line
                  type="monotone"
                  dataKey="current"
                  stroke="var(--color-current)"
                  strokeWidth={2}
                  dot={{ fill: "var(--color-current)", r: 4 }}
                />
                <Line
                  type="monotone"
                  dataKey="previous"
                  stroke="var(--color-previous)"
                  strokeWidth={2}
                  strokeDasharray="4 4"
                  dot={{ fill: "var(--color-previous)", r: 4 }}
                />
              </LineChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <Card className="text-start">
          <CardHeader className="pb-3">
            <CardTitle>خلاصه</CardTitle>
            <CardDescription>مقایسه دوره‌ای</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex items-center justify-between">
              <span className="text-muted-foreground">امسال</span>
              <span className="font-semibold tabular-nums">
                {currencyFormatter.format(currentTotal)}
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-muted-foreground">سال قبل</span>
              <span className="text-muted-foreground tabular-nums">
                {currencyFormatter.format(previousTotal)}
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-muted-foreground">تفاوت</span>
              <span className="text-green-500 tabular-nums">
                +{currencyFormatter.format(difference)}
              </span>
            </div>
            <div className="border-t pt-3">
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">رشد</span>
                <span className="font-semibold text-green-500 tabular-nums">
                  {percentChangeFormatter.format(growthPercent)}٪
                </span>
              </div>
            </div>
            <div className="border-t pt-3 text-xs">
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">
                  میانگین ماهانه (امسال)
                </span>
                <span className="tabular-nums">
                  {currencyFormatter.format(Math.round(currentTotal / 6))}
                </span>
              </div>
              <div className="mt-1 flex items-center justify-between">
                <span className="text-muted-foreground">
                  میانگین ماهانه (سال قبل)
                </span>
                <span className="text-muted-foreground tabular-nums">
                  {currencyFormatter.format(Math.round(previousTotal / 6))}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { ChartGroup5 };