init

components/radar-chart.tsx

@@ -0,0 +1,64 @@
+"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>
+  );
+}