From bc72b7912cadb03de0028fbf256f702988d6dc80 Mon Sep 17 00:00:00 2001
From: Thibaut Valentin <thibaut.valentin@epita.fr>
Date: Wed, 31 Dec 2025 14:50:15 +0100
Subject: [PATCH] fix: cat graphe color and text alignement

---
 src/main/webapp/src/pages/admin/StatsLazy.jsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/main/webapp/src/pages/admin/StatsLazy.jsx b/src/main/webapp/src/pages/admin/StatsLazy.jsx
index 10507a7..1be603a 100644
--- a/src/main/webapp/src/pages/admin/StatsLazy.jsx
+++ b/src/main/webapp/src/pages/admin/StatsLazy.jsx
@@ -14,7 +14,7 @@ export default function StatsLazy({data}) {
         </div>
         <div className="row" style={{marginTop: "3em"}}>
             <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}}>
                     <CatGraph raw_data={data}/>
                 </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="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="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>
     </ResponsiveContainer>
 }
@@ -75,25 +76,25 @@ function CatGraph({raw_data}) {
         for (const k of raw_data.categories) {
             data.push({
                 name: k.name,
-                value: k.count,
+                value: k.count + 1,
             })
         }
         setShowData(data)
     }, [raw_data])
 
-    const COLORS = ['#33FF8F', '#30E393', '#2DC697', '#2AAA9B'
-        , '#278E9F', '#2471A3', '#2155A7', '#1E39AB'
-        , '#1B1CAF', '#1800B3'];
+    const COLORS = ['#ffff99', '#a6cee3', '#1f78b4', '#b2df8a'
+        , '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f'
+        , '#ff7f00', '#cab2d6', '#6a3d9a'];
 
     const RADIAN = Math.PI / 180;
     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 y = cy + radius * Math.sin(-midAngle * RADIAN);
 
         return <> {
             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']}`}
             </text>
 
@@ -159,9 +160,9 @@ function CatGraph({raw_data}) {
 
                 onMouseEnter={onPieEnter}>
                 {showData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]}/>
+                    <Cell key={`cell-${index}`} fill={COLORS[(index) % COLORS.length]}/>
                 ))}
             </Pie>
         </PieChart>
     </ResponsiveContainer>
-}
\ No newline at end of file
+}