110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
PolarAngleAxis,
|
|
PolarGrid,
|
|
PolarRadiusAxis,
|
|
Radar,
|
|
RadarChart,
|
|
} 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 ChartCard20Props {
|
|
title?: string;
|
|
description?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const numberFormatter = new Intl.NumberFormat("fa-IR", {
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const chartData = [
|
|
{ skill: "طراحی", value: 85 },
|
|
{ skill: "فرانتاند", value: 92 },
|
|
{ skill: "بکاند", value: 78 },
|
|
{ skill: "دواپس", value: 65 },
|
|
{ skill: "تست", value: 70 },
|
|
{ skill: "ارتباطات", value: 88 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
value: {
|
|
label: "امتیاز",
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartCard20 = ({
|
|
title = "ارزیابی مهارتها",
|
|
description = "امتیاز شایستگی در حوزههای مختلف",
|
|
className,
|
|
}: ChartCard20Props) => {
|
|
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 justify-center">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto aspect-square h-64"
|
|
>
|
|
<RadarChart data={chartData} cx="50%" cy="50%" outerRadius="80%">
|
|
<PolarGrid gridType="polygon" />
|
|
<PolarAngleAxis
|
|
dataKey="skill"
|
|
tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
|
|
/>
|
|
<PolarRadiusAxis
|
|
angle={30}
|
|
domain={[0, 100]}
|
|
tick={{ fontSize: 10 }}
|
|
axisLine={false}
|
|
tickFormatter={(value) => numberFormatter.format(Number(value))}
|
|
/>
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
formatter={(value) =>
|
|
numberFormatter.format(Number(value))
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
<Radar
|
|
name="امتیاز"
|
|
dataKey="value"
|
|
stroke="var(--chart-1)"
|
|
fill="var(--chart-1)"
|
|
fillOpacity={0.3}
|
|
strokeWidth={2}
|
|
/>
|
|
</RadarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { ChartCard20 };
|