reui-blocks/blocks/chart-card27.tsx

"use client";

import {
  Area,
  AreaChart,
  CartesianGrid,
  ReferenceArea,
  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 ChartCard27Props {
  title?: string;
  description?: string;
  className?: string;
}

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

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

const timeLabel = (hour: number) => {
  const formattedHour = hour.toLocaleString("fa-IR", {
    minimumIntegerDigits: 2,
    useGrouping: false,
  });
  const formattedMinute = (0).toLocaleString("fa-IR", {
    minimumIntegerDigits: 2,
    useGrouping: false,
  });
  return `${formattedHour}:${formattedMinute}`;
};

const chartData = [
  { time: timeLabel(0), value: 45 },
  { time: timeLabel(4), value: 52 },
  { time: timeLabel(8), value: 78 },
  { time: timeLabel(12), value: 95 },
  { time: timeLabel(16), value: 88 },
  { time: timeLabel(20), value: 72 },
  { time: timeLabel(24), value: 58 },
];

const chartConfig = {
  value: {
    label: "مصرف CPU",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

const ChartCard27 = ({
  title = "بار سامانه",
  description = "مصرف CPU با محدوده‌های آستانه",
  className,
}: ChartCard27Props) => {
  return (
    <Card
      dir="rtl"
      lang="fa"
      className={cn("w-full max-w-2xl text-start", className)}
    >
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-64 w-full">
          <AreaChart
            data={chartData}
            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
          >
            <defs>
              <linearGradient id="chartGradient27" 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>
            <ReferenceArea
              y1={0}
              y2={60}
              fill="var(--chart-1)"
              fillOpacity={0.05}
            />
            <ReferenceArea
              y1={60}
              y2={80}
              fill="var(--chart-4)"
              fillOpacity={0.1}
            />
            <ReferenceArea
              y1={80}
              y2={100}
              fill="var(--chart-5)"
              fillOpacity={0.15}
            />
            <CartesianGrid strokeDasharray="3 3" vertical={false} />
            <XAxis
              dataKey="time"
              axisLine={false}
              tickLine={false}
              tickMargin={8}
              fontSize={12}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tickMargin={8}
              fontSize={10}
              width={40}
              domain={[0, 100]}
              tickFormatter={(value) => formatPercent(Number(value))}
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  formatter={(value) => formatPercent(Number(value))}
                />
              }
              cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
            />
            <Area
              type="monotone"
              dataKey="value"
              stroke="var(--color-value)"
              strokeWidth={2}
              fill="url(#chartGradient27)"
            />
          </AreaChart>
        </ChartContainer>
        <div className="mt-4 flex flex-wrap items-center justify-center gap-4 text-xs text-muted-foreground">
          <span className="flex items-center gap-1.5">
            <div className="size-3 rounded-sm bg-chart-1/20" />
            عادی ({formatPercent(0)}–{formatPercent(60)})
          </span>
          <span className="flex items-center gap-1.5">
            <div className="size-3 rounded-sm bg-chart-4/30" />
            هشدار ({formatPercent(60)}–{formatPercent(80)})
          </span>
          <span className="flex items-center gap-1.5">
            <div className="size-3 rounded-sm bg-chart-5/40" />
            بحرانی ({formatPercent(80)}–{formatPercent(100)})
          </span>
        </div>
      </CardContent>
    </Card>
  );
};

export { ChartCard27 };