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

Compare commits

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

No commits in common. "412e661319590baf48d6ec3b2eb4f4d10eecfad9" and "6359e7e02723c2d22cfb486e1c5d69b8c7efb9b8" have entirely different histories.
412e661319 ... 6359e7e027

1 changed files with 10 additions and 11 deletions
Show Stats Expand all files Collapse all files

21
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,8 +60,7 @@ 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" <Area type="monotone" dataKey="not_valid" name="Non validée" stackId="2" stroke={colors[3]} fill={colors[3]} strokeDasharray="5 5" fillOpacity="30%"/>
fillOpacity="30%"/>
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
} }
@ -76,25 +75,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 + 1, value: k.count,
}) })
} }
setShowData(data) setShowData(data)
}, [raw_data]) }, [raw_data])
const COLORS = ['#ffff99', '#a6cee3', '#1f78b4', '#b2df8a' const COLORS = ['#33FF8F', '#30E393', '#2DC697', '#2AAA9B'
, '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f' , '#278E9F', '#2471A3', '#2155A7', '#1E39AB'
, '#ff7f00', '#cab2d6', '#6a3d9a']; , '#1B1CAF', '#1800B3'];
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.6; const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
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={(index === 2 || index === 6 || index === 10) ? "white" : "black"} textAnchor="middle" dominantBaseline="central"> <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
{`${showData[index]['name']}`} {`${showData[index]['name']}`}
</text> </text>
@ -160,9 +159,9 @@ 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>
</ResponsiveContainer> </ResponsiveContainer>
} }