62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
RadarChart,
|
|
PolarGrid,
|
|
PolarAngleAxis,
|
|
PolarRadiusAxis,
|
|
Radar,
|
|
ResponsiveContainer,
|
|
} from "recharts"
|
|
|
|
interface SkillData {
|
|
skillCode: string
|
|
stability: number
|
|
reps: number
|
|
}
|
|
|
|
export function SkillMasteryChart({ data }: { data: SkillData[] }) {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="text-center text-muted-foreground italic py-8">
|
|
Sin skills todavía
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const chartData = data
|
|
.filter((s) => s.reps > 0)
|
|
.slice(0, 8)
|
|
.map((s) => ({
|
|
skill: s.skillCode.replace("vocal-", "").replace("numero-", "num "),
|
|
mastery: Math.min(Math.round((s.stability / 100) * 100), 100),
|
|
}))
|
|
|
|
if (chartData.length === 0) {
|
|
return (
|
|
<div className="text-center text-muted-foreground italic py-8">
|
|
Sin skills todavía
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-48">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RadarChart data={chartData} margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
|
|
<PolarGrid stroke="#E8E0D8" />
|
|
<PolarAngleAxis dataKey="skill" tick={{ fontSize: 11, fill: "#6B7280" }} />
|
|
<PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} />
|
|
<Radar
|
|
name="Maestría"
|
|
dataKey="mastery"
|
|
stroke="#8CB8A0"
|
|
fill="#8CB8A0"
|
|
fillOpacity={0.3}
|
|
/>
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
}
|