159 lines
4.4 KiB
TypeScript
159 lines
4.4 KiB
TypeScript
"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 { cn } from "@/lib/utils";
|
|
|
|
interface ChartCard14Props {
|
|
title?: string;
|
|
description?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const monthLabel = (monthIndex: number) =>
|
|
new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
|
|
new Date(2025, monthIndex, 1),
|
|
);
|
|
|
|
const numberFormatter = new Intl.NumberFormat("fa-IR", {
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const formatMilliseconds = (value: number) =>
|
|
`${numberFormatter.format(value)} میلیثانیه`;
|
|
|
|
const chartData = [
|
|
{ month: monthLabel(0), min: 120, max: 180, avg: 150 },
|
|
{ month: monthLabel(1), min: 140, max: 220, avg: 175 },
|
|
{ month: monthLabel(2), min: 130, max: 195, avg: 160 },
|
|
{ month: monthLabel(3), min: 155, max: 240, avg: 190 },
|
|
{ month: monthLabel(4), min: 145, max: 210, avg: 175 },
|
|
{ month: monthLabel(5), min: 160, max: 250, avg: 200 },
|
|
{ month: monthLabel(6), min: 170, max: 260, avg: 215 },
|
|
{ month: monthLabel(7), min: 165, max: 245, avg: 205 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
range: {
|
|
label: "بازه",
|
|
color: "var(--chart-1)",
|
|
},
|
|
avg: {
|
|
label: "میانگین",
|
|
color: "var(--chart-2)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartCard14 = ({
|
|
title = "بازه زمان پاسخ",
|
|
description = "حداقل، حداکثر و میانگین زمان پاسخ",
|
|
className,
|
|
}: ChartCard14Props) => {
|
|
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="rangeGradient14" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="0%"
|
|
stopColor="var(--chart-1)"
|
|
stopOpacity={0.3}
|
|
/>
|
|
<stop
|
|
offset="100%"
|
|
stopColor="var(--chart-1)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</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={48}
|
|
tickFormatter={(value) =>
|
|
`${numberFormatter.format(Number(value))}ms`
|
|
}
|
|
/>
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
formatter={(value, name) => {
|
|
const formatted = formatMilliseconds(Number(value));
|
|
if (name === "min") return `حداقل: ${formatted}`;
|
|
if (name === "max") return `حداکثر: ${formatted}`;
|
|
if (name === "avg") return `میانگین: ${formatted}`;
|
|
return formatted;
|
|
}}
|
|
/>
|
|
}
|
|
cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="max"
|
|
stackId="1"
|
|
stroke="var(--chart-1)"
|
|
fill="url(#rangeGradient14)"
|
|
strokeWidth={0}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="min"
|
|
stackId="1"
|
|
stroke="var(--chart-1)"
|
|
fill="var(--background)"
|
|
strokeWidth={0}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="avg"
|
|
stroke="var(--chart-2)"
|
|
fill="none"
|
|
strokeWidth={2}
|
|
strokeDasharray="4 4"
|
|
/>
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { ChartCard14 };
|