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

Compare commits

base: Thibaut:6359e7e02723c2d22cfb486e1c5d69b8c7efb9b8
Branches Tags
Thibaut:master
Thibaut:dev
Thibaut:dev-comp
Thibaut:theme
Thibaut:Avon1
...
compare: Thibaut:412e661319590baf48d6ec3b2eb4f4d10eecfad9
Branches Tags
Thibaut:master
Thibaut:dev
Thibaut:dev-comp
Thibaut:theme
Thibaut:Avon1

2 Commits
6359e7e027 ... 412e661319

Author SHA1 Message Date
Thibaut Valentin
412e661319 Merge pull request 'fix: cat graphe color and text alignement' (#88) from dev into master 
Reviewed-on: #88
 2025-12-31 13:50:57 +00:00
Thibaut Valentin
bc72b7912c fix: cat graphe color and text alignement
All checks were successful
Deploy Production Server / if_merged (pull_request) Successful in 6m46s
Details
2025-12-31 14:50:15 +01:00
1 changed files with 11 additions and 10 deletions
Show Stats Expand all files Collapse all files

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

@ -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>