65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Radar,
|
|
RadarChart,
|
|
PolarGrid,
|
|
PolarAngleAxis,
|
|
PolarRadiusAxis,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
import { RadarChartData } from "@/lib/types";
|
|
|
|
interface SkillsRadarChartProps {
|
|
data: RadarChartData[];
|
|
}
|
|
|
|
export function SkillsRadarChart({ data }: SkillsRadarChartProps) {
|
|
// Transform data for the chart
|
|
const chartData = data.map((item) => ({
|
|
category: item.category,
|
|
score: item.score,
|
|
maxScore: item.maxScore,
|
|
}));
|
|
|
|
if (data.length === 0) {
|
|
return (
|
|
<div className="flex items-center justify-center h-[400px] text-muted-foreground">
|
|
<p>Aucune donnée disponible</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-[400px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RadarChart
|
|
data={chartData}
|
|
margin={{ top: 20, right: 30, bottom: 20, left: 30 }}
|
|
>
|
|
<PolarGrid gridType="polygon" />
|
|
<PolarAngleAxis
|
|
dataKey="category"
|
|
tick={{ fontSize: 12, fill: "hsl(var(--foreground))" }}
|
|
className="text-xs"
|
|
/>
|
|
<PolarRadiusAxis
|
|
angle={90}
|
|
domain={[0, 3]}
|
|
tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
|
|
tickCount={4}
|
|
/>
|
|
<Radar
|
|
name="Niveau"
|
|
dataKey="score"
|
|
stroke="hsl(var(--primary))"
|
|
fill="hsl(var(--primary))"
|
|
fillOpacity={0.2}
|
|
strokeWidth={2}
|
|
/>
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|