69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
const errorLabels: Record<string, string> = {
|
|
"discriminacion-auditiva": "Discriminación auditiva",
|
|
"confusion-letra": "Confusión de letra",
|
|
"silaba-dificil": "Sílaba difícil",
|
|
"omision-letra": "Omisión de letra",
|
|
"inversion-letra": "Inversión de letra",
|
|
}
|
|
|
|
const errorColors: Record<string, string> = {
|
|
"discriminacion-auditiva": "bg-blue-200 text-blue-800",
|
|
"confusion-letra": "bg-red-200 text-red-800",
|
|
"silaba-dificil": "bg-yellow-200 text-yellow-800",
|
|
"omision-letra": "bg-purple-200 text-purple-800",
|
|
"inversion-letra": "bg-orange-200 text-orange-800",
|
|
}
|
|
|
|
interface Props {
|
|
data: Record<string, number>
|
|
total: number
|
|
}
|
|
|
|
export default function ErrorPatternsChart({ data, total }: Props) {
|
|
const entries = Object.entries(data)
|
|
|
|
if (total === 0) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground text-center py-4">
|
|
Sin errores registrados. ¡Bien ahí!
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{entries.map(([key, count]) => {
|
|
const pct = Math.round((count / total) * 100)
|
|
return (
|
|
<div key={key}>
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span className="font-medium">{errorLabels[key] || key}</span>
|
|
<span className="text-muted-foreground">
|
|
{count} ({pct}%)
|
|
</span>
|
|
</div>
|
|
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${
|
|
key === "discriminacion-auditiva"
|
|
? "bg-blue-400"
|
|
: key === "confusion-letra"
|
|
? "bg-red-400"
|
|
: key === "silaba-dificil"
|
|
? "bg-yellow-400"
|
|
: key === "omision-letra"
|
|
? "bg-purple-400"
|
|
: "bg-orange-400"
|
|
}`}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|