reui-blocks/blocks/chart-group10.tsx

"use client";

import { Area, AreaChart, CartesianGrid, 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 { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

interface ChartGroup10Props {
  className?: string;
}

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

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

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

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

const chartData = [
  { hour: timeLabel(0), requests: 1200, errors: 12 },
  { hour: timeLabel(4), requests: 800, errors: 8 },
  { hour: timeLabel(8), requests: 2400, errors: 24 },
  { hour: timeLabel(12), requests: 3200, errors: 48 },
  { hour: timeLabel(16), requests: 2800, errors: 28 },
  { hour: timeLabel(20), requests: 1800, errors: 18 },
];

const chartConfig = {
  requests: { label: "درخواست‌ها", color: "var(--chart-1)" },
} satisfies ChartConfig;

const services = [
  { name: "دروازه اتصال هوشمند", status: "healthy" as const, uptime: 99.99 },
  { name: "پایگاه داده", status: "healthy" as const, uptime: 99.95 },
  { name: "کش", status: "degraded" as const, uptime: 98.5 },
  { name: "ذخیره‌سازی", status: "healthy" as const, uptime: 99.98 },
];

const ChartGroup10 = ({ className }: ChartGroup10Props) => {
  const totalRequests = chartData.reduce((sum, item) => sum + item.requests, 0);
  const totalErrors = chartData.reduce((sum, item) => sum + item.errors, 0);
  const errorRate = (totalErrors / totalRequests) * 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>
            <div className="mb-4 grid grid-cols-3 gap-4">
              <div>
                <p className="text-sm text-muted-foreground">مجموع درخواست‌ها</p>
                <p className="text-xl font-bold tabular-nums">
                  {numberFormatter.format(totalRequests)}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">مجموع خطاها</p>
                <p className="text-xl font-bold tabular-nums">
                  {numberFormatter.format(totalErrors)}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">نرخ خطا</p>
                <p className="text-xl font-bold tabular-nums">
                  {formatPercent(errorRate)}
                </p>
              </div>
            </div>
            <ChartContainer config={chartConfig} className="h-48 w-full">
              <AreaChart
                data={chartData}
                margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
              >
                <defs>
                  <linearGradient id="reqGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop
                      offset="0%"
                      stopColor="var(--color-requests)"
                      stopOpacity={0.3}
                    />
                    <stop
                      offset="100%"
                      stopColor="var(--color-requests)"
                      stopOpacity={0}
                    />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis
                  dataKey="hour"
                  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" }}
                />
                <Area
                  type="monotone"
                  dataKey="requests"
                  stroke="var(--color-requests)"
                  strokeWidth={2}
                  fill="url(#reqGrad)"
                />
              </AreaChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <Card className="text-start">
          <CardHeader>
            <CardTitle>سلامت سرویس‌ها</CardTitle>
            <CardDescription>وضعیت فعلی سرویس‌ها</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {services.map((service, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div
                      className={cn(
                        "size-2 rounded-full",
                        service.status === "healthy"
                          ? "bg-green-500"
                          : "bg-yellow-500",
                      )}
                      aria-hidden="true"
                    />
                    <span className="text-sm font-medium">{service.name}</span>
                  </div>
                  <span className="text-sm text-muted-foreground tabular-nums">
                    {formatPercent(service.uptime)}
                  </span>
                </div>
                <Progress
                  value={service.uptime}
                  className={cn(
                    "h-1.5",
                    service.status === "degraded" && "[&>div]:bg-yellow-500",
                  )}
                />
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { ChartGroup10 };