Thibaut/ffsaf-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

fix: cat graphe color and text alignement #88

Merged
Thibaut merged 1 commits from dev into master 2025-12-31 13:50:58 +00:00
Conversation 0 Commits 1 Files Changed 1 +11 -10
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/main/webapp/src/pages/admin/StatsLazy.jsx
View File

@ -14,7 +14,7 @@ export default function StatsLazy({data}) {
</div> </div>
<div className="row" style={{marginTop: "3em"}}> <div className="row" style={{marginTop: "3em"}}>
<h3>Nombre de licences par catégorie pour {getSaison()}</h3> <h3>Nombre de licences par catégorie pour {getSaison()}</h3>
<div className="col-lg-8" style={{margin: "auto"}}> <div className="col-lg-8" style={{margin: "auto"}}>
<div style={{width: '100%', aspectRatio: 1.5}}> <div style={{width: '100%', aspectRatio: 1.5}}>
<CatGraph raw_data={data}/> <CatGraph raw_data={data}/>
</div> </div>
@ -60,7 +60,8 @@ function NbGraph({raw_data}) {
<Area type="monotone" dataKey="na" name="Non définie" stackId="1" stroke={colors[0]} fill={colors[0]}/> <Area type="monotone" dataKey="na" name="Non définie" stackId="1" stroke={colors[0]} fill={colors[0]}/>
<Area type="monotone" dataKey="h" name="Homme" stackId="1" stroke={colors[1]} fill={colors[1]}/> <Area type="monotone" dataKey="h" name="Homme" stackId="1" stroke={colors[1]} fill={colors[1]}/>
<Area type="monotone" dataKey="f" name="Femme" stackId="1" stroke={colors[2]} fill={colors[2]}/> <Area type="monotone" dataKey="f" name="Femme" stackId="1" stroke={colors[2]} fill={colors[2]}/>
<Area type="monotone" dataKey="not_valid" name="Non validée" stackId="2" stroke={colors[3]} fill={colors[3]} strokeDasharray="5 5" fillOpacity="30%"/> <Area type="monotone" dataKey="not_valid" name="Non validée" stackId="2" stroke={colors[3]} fill={colors[3]} strokeDasharray="5 5"
fillOpacity="30%"/>
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
} }
@ -75,25 +76,25 @@ function CatGraph({raw_data}) {
for (const k of raw_data.categories) { for (const k of raw_data.categories) {
data.push({ data.push({
name: k.name, name: k.name,
value: k.count, value: k.count + 1,
}) })
} }
setShowData(data) setShowData(data)
}, [raw_data]) }, [raw_data])
const COLORS = ['#33FF8F', '#30E393', '#2DC697', '#2AAA9B' const COLORS = ['#ffff99', '#a6cee3', '#1f78b4', '#b2df8a'
, '#278E9F', '#2471A3', '#2155A7', '#1E39AB' , '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f'
, '#1B1CAF', '#1800B3']; , '#ff7f00', '#cab2d6', '#6a3d9a'];
const RADIAN = Math.PI / 180; const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({cx, cy, midAngle, innerRadius, outerRadius, index}) => { const renderCustomizedLabel = ({cx, cy, midAngle, innerRadius, outerRadius, index}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5; const radius = innerRadius + (outerRadius - innerRadius) * 0.6;
const x = cx + radius * Math.cos(-midAngle * RADIAN); const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN); const y = cy + radius * Math.sin(-midAngle * RADIAN);
return <> { return <> {
showData[index]['value'] > 0 && showData[index]['value'] > 0 &&
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central"> <text x={x} y={y} fill={(index === 2 || index === 6 || index === 10) ? "white" : "black"} textAnchor="middle" dominantBaseline="central">
{`${showData[index]['name']}`} {`${showData[index]['name']}`}
</text> </text>
@ -159,7 +160,7 @@ function CatGraph({raw_data}) {
onMouseEnter={onPieEnter}> onMouseEnter={onPieEnter}>
{showData.map((entry, index) => ( {showData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]}/> <Cell key={`cell-${index}`} fill={COLORS[(index) % COLORS.length]}/>
))} ))}
</Pie> </Pie>
</PieChart> </PieChart>