84 lines
2.6 KiB
React
84 lines
2.6 KiB
React
import {
|
|
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
|
|
} from 'recharts'
|
|
|
|
const levelLabels = {
|
|
1: { label: 'Débutant', color: '#9ca3af' },
|
|
2: { label: 'Intermédiaire', color: '#60a5fa' },
|
|
3: { label: 'Avancé', color: '#fbbf24' },
|
|
4: { label: 'Expert', color: '#34d399' },
|
|
}
|
|
|
|
export default function BarChartView({
|
|
categories, skills: allSkills, members, levels, filterCat,
|
|
onBarClick,
|
|
}) {
|
|
const cats = filterCat === 'all' ? categories : categories.filter((c) => c.id === filterCat)
|
|
|
|
const data = cats.map((cat) => {
|
|
const catSkills = allSkills.filter((s) => s.category_id === cat.id)
|
|
const buckets = { 1: 0, 2: 0, 3: 0, 4: 0 }
|
|
members.forEach((m) => {
|
|
catSkills.forEach((s) => {
|
|
const key = `${m.id}-${s.id}`
|
|
const lvl = levels[key]?.level
|
|
if (lvl) buckets[lvl]++
|
|
})
|
|
})
|
|
return {
|
|
name: cat.name,
|
|
color: cat.color,
|
|
id: cat.id,
|
|
...buckets,
|
|
}
|
|
})
|
|
|
|
if (data.length === 0) {
|
|
return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
|
|
}
|
|
|
|
function handleClick(entry, _index, level) {
|
|
if (onBarClick && entry?.id) {
|
|
onBarClick(entry.id, level)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-950 rounded-lg p-4">
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<BarChart data={data} layout="vertical" margin={{ top: 20, right: 30, left: 80, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
|
|
<XAxis type="number" stroke="var(--foreground)" tick={{ fontSize: 12 }} />
|
|
<YAxis type="category" dataKey="name" stroke="var(--foreground)" tick={{ fontSize: 12 }} width={100} />
|
|
<Tooltip
|
|
contentStyle={{
|
|
background: 'var(--background)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 'var(--radius)',
|
|
fontSize: 13,
|
|
}}
|
|
/>
|
|
<Legend
|
|
payload={[1, 2, 3, 4].map((l) => ({
|
|
value: `${l} - ${levelLabels[l].label}`,
|
|
type: 'rect',
|
|
color: levelLabels[l].color,
|
|
}))}
|
|
/>
|
|
{[1, 2, 3, 4].map((lvl) => (
|
|
<Bar
|
|
key={lvl}
|
|
dataKey={lvl}
|
|
stackId="a"
|
|
fill={levelLabels[lvl].color}
|
|
name={`Niveau ${lvl}`}
|
|
cursor="pointer"
|
|
onClick={(entry) => handleClick(entry, null, lvl)}
|
|
/>
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
}
|