122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ChartCard17Props {
|
|
title?: string;
|
|
description?: string;
|
|
value?: number;
|
|
max?: number;
|
|
unit?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const numberFormatter = new Intl.NumberFormat("fa-IR", {
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const chartConfig = {
|
|
value: {
|
|
label: "امتیاز",
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartCard17 = ({
|
|
title = "امتیاز عملکرد",
|
|
description = "عملکرد فعلی سامانه",
|
|
value = 73,
|
|
max = 100,
|
|
unit = "",
|
|
className,
|
|
}: ChartCard17Props) => {
|
|
const percentage = Math.round((value / max) * 100);
|
|
const chartData = [{ value: percentage, fill: "var(--chart-1)" }];
|
|
|
|
const startAngle = 180;
|
|
const endAngle = 180 - (180 * percentage) / 100;
|
|
|
|
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 className="flex flex-col items-center">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto aspect-2/1 h-40 w-80"
|
|
>
|
|
<RadialBarChart
|
|
data={chartData}
|
|
startAngle={startAngle}
|
|
endAngle={endAngle}
|
|
innerRadius={100}
|
|
outerRadius={140}
|
|
cx="50%"
|
|
cy="100%"
|
|
>
|
|
<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
|
|
<Label
|
|
content={({ viewBox }) => {
|
|
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
|
return (
|
|
<text
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={(viewBox.cy || 0) - 16}
|
|
className="fill-foreground text-3xl font-bold tabular-nums"
|
|
>
|
|
{numberFormatter.format(value)}
|
|
{unit}
|
|
</tspan>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={(viewBox.cy || 0) + 8}
|
|
className="fill-muted-foreground text-sm"
|
|
>
|
|
از {numberFormatter.format(max)}
|
|
</tspan>
|
|
</text>
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</PolarRadiusAxis>
|
|
<RadialBar
|
|
dataKey="value"
|
|
background={{ fill: "var(--muted)" }}
|
|
cornerRadius={10}
|
|
/>
|
|
</RadialBarChart>
|
|
</ChartContainer>
|
|
<div className="-mt-2 flex w-72 justify-between text-sm text-muted-foreground tabular-nums">
|
|
<span>{numberFormatter.format(0)}</span>
|
|
<span>{numberFormatter.format(max)}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { ChartCard17 };
|