Feat: Déplacement stats athlètes

front_end/src/components/StatsAthlete.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Athlete, Session } from "../classes";
+import { calculStatsAthlete, niveauAlerte, StatsAthlete } from "../utils/athleteUtils"
+
+interface AthleteStatsProps {
+  athlete: Athlete;
+  sessions: Session[]; 
+}
+
+function StatAthlete({ athlete, sessions }: AthleteStatsProps) {
+  const [dateDebut, setDateDebut] = React.useState(new Date());
+  const [dateFin, setDateFin] = React.useState(new Date());
+  const [seuilCritique, setSeuilCritique] = React.useState(0);
+  const [seuilMax, setSeuilMax] = React.useState(0);
+  const [stats, setStats] = React.useState<StatsAthlete | null>(null);
+
+  const dateToDatetimeLocal = (date: Date) => {
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  };
+
+  const handleCalculerStats = () => {
+    const statsCalculees = calculStatsAthlete(sessions, athlete, dateDebut, dateFin);
+    setStats(statsCalculees);
+  };
+
+  return (
+    <div className="creneau-stats">
+      <label>
+        Début :
+        <input
+          type="datetime-local"
+          value={dateToDatetimeLocal(dateDebut)}
+          onChange={e => setDateDebut(new Date(e.target.value))}
+        />
+      </label>
+      
+      <label>
+        Fin :
+        <input
+          type="datetime-local"
+          value={dateToDatetimeLocal(dateFin)}
+          onChange={e => setDateFin(new Date(e.target.value))}
+        />
+      </label>
+      
+      <label>
+        Seuil critique :
+        <input
+          type="number"
+          value={seuilCritique}
+          min={1}
+          onChange={e => setSeuilCritique(Number(e.target.value))}
+        />
+      </label>
+      
+      <label>
+        Seuil max :
+        <input
+          type="number"
+          value={seuilMax}
+          min={1}
+          onChange={e => setSeuilMax(Number(e.target.value))}
+        />
+      </label>
+
+      <button onClick={handleCalculerStats}>Calculer les statistiques</button>
+
+      {stats && (
+        <div className="stats-display">
+          <h3>Statistiques de {athlete.nom}</h3>
+          <p><strong>Nombre total de sessions :</strong> {stats.nbSessions}</p>
+          <p><strong>Sessions par semaine :</strong> {stats.nbSessionsPerWeek.toFixed(2)}</p>
+          <p><strong>Statut :</strong> {niveauAlerte(stats, seuilCritique, seuilMax)}</p>
+          
+          {stats.distributions.size > 0 && (
+            <>
+              <h4>Distribution des activités :</h4>
+              <ul>
+                {Array.from(stats.distributions.entries()).map(([nomActivite, count]) => (
+                  <li key={String(nomActivite)}>
+                    {nomActivite} : {count} session(s)
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default StatAthlete;

front_end/src/components/object/user.tsx

@@ -8,7 +8,7 @@ import {delay} from "../../requetes";
 import CreateActivite from '../createActivite';
 import { useLocalData } from '../../context/useLocalData';
 import ObjectSession from './session';
-
+import StatAthlete from '../StatsAthlete';
 
 type Props = {
     admin?:Admin|null;
@@ -115,12 +115,16 @@ function ObjectUser({admin=null,athlete=null,coach=null}:Props){
                             {user.sessions.map((session,index)=>(
                                 <ObjectSession session={session}/>
                             ))}
-                            
                         </div>
+                        {athlete !== null && (
+                            <div className="stats-container">
+                                <StatAthlete athlete={athlete} sessions={sessions} />
+                            </div>
+                        )}
                     </div>
                 </Modal>
-            }
-        </div>
+            }  
+        </div>      
     )
 }