acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: PieChart

Browse Source
This commit is contained in:
N3WT DE COMPET
2025-05-31 14:48:06 +02:00
parent f93c428259
commit fe2d4d4513
2 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Front-End/src/app/[locale]/admin/page.js
View File

@ -217,34 +217,36 @@ export default function DashboardPage() {
{/* Événements et KPIs */} {/* Événements et KPIs */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
{/* Graphique des inscriptions */} {/* Colonne de gauche : Graphique des inscriptions + Présence */}
<div className="lg:col-span-1 bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100"> <div className="flex flex-col gap-6">
<h2 className="text-lg font-semibold mb-6"> {/* Graphique des inscriptions */}
{t('inscriptionTrends')} <div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1">
</h2> <h2 className="text-lg font-semibold mb-6">
<div className="flex flex-row gap-4"> {t('inscriptionTrends')}
<div className="flex-1 p-6"> </h2>
<LineChart data={monthlyRegistrations} /> <div className="flex flex-row gap-4">
</div> <div className="flex-1 p-6">
<div className="flex-1 flex items-center justify-center"> <LineChart data={monthlyRegistrations} />
<PieChart data={statusDistribution} /> </div>
<div className="flex-1 flex items-center justify-center">
<PieChart data={statusDistribution} />
</div>
</div> </div>
</div> </div>
{/* Présence et assiduité */}
<div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1">
<Attendance absences={absencesToday} readOnly={true} />
</div>
</div> </div>
{/* Événements à venir */} {/* Colonne de droite : Événements à venir */}
<div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100"> <div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1 h-full">
<h2 className="text-lg font-semibold mb-4">{t('upcomingEvents')}</h2> <h2 className="text-lg font-semibold mb-4">{t('upcomingEvents')}</h2>
{upcomingEvents.map((event, index) => ( {upcomingEvents.map((event, index) => (
<EventCard key={index} {...event} /> <EventCard key={index} {...event} />
))} ))}
</div> </div>
</div> </div>
{/* Ajout du composant Attendance en dessous, en lecture seule */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<Attendance absences={absencesToday} readOnly={true} />
</div>
</div> </div>
); );
} }

50
Front-End/src/components/Charts/PieChart.js
View File

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
// Utilisation de couleurs hexadécimales pour le SVG
const COLORS = [ const COLORS = [
'fill-blue-400 text-blue-400', '#60a5fa', // bleu-400
'fill-orange-400 text-orange-400', '#fb923c', // orange-400
'fill-purple-400 text-purple-400', '#a78bfa', // violet-400
'fill-emerald-400 text-emerald-400', '#34d399', // émeraude-400
]; ];
export default function PieChart({ data }) { export default function PieChart({ data }) {
@ -23,7 +24,20 @@ export default function PieChart({ data }) {
<div className="flex items-center justify-center w-full"> <div className="flex items-center justify-center w-full">
<svg width={100} height={100} viewBox="0 0 32 32"> <svg width={100} height={100} viewBox="0 0 32 32">
{data.map((slice, idx) => { {data.map((slice, idx) => {
if (slice.value === 0) return null;
const value = (slice.value / total) * 100; const value = (slice.value / total) * 100;
if (value === 100) {
// Cas 100% : on dessine un cercle plein
return (
<circle
key={idx}
cx="16"
cy="16"
r="16"
fill={COLORS[idx % COLORS.length]}
/>
);
}
const startAngle = (cumulative / 100) * 360; const startAngle = (cumulative / 100) * 360;
const endAngle = ((cumulative + value) / 100) * 360; const endAngle = ((cumulative + value) / 100) * 360;
const largeArc = value > 50 ? 1 : 0; const largeArc = value > 50 ? 1 : 0;
@ -42,7 +56,7 @@ export default function PieChart({ data }) {
<path <path
key={idx} key={idx}
d={pathData} d={pathData}
className={COLORS[idx % COLORS.length].split(' ')[0]} fill={COLORS[idx % COLORS.length]}
stroke="#fff" stroke="#fff"
strokeWidth="0.5" strokeWidth="0.5"
/> />
@ -50,17 +64,21 @@ export default function PieChart({ data }) {
})} })}
</svg> </svg>
<div className="ml-4 flex flex-col space-y-1"> <div className="ml-4 flex flex-col space-y-1">
{data.map((slice, idx) => ( {data.map((slice, idx) =>
<div slice.value > 0 && (
key={idx} <div
className={`flex items-center text-xs font-semibold ${COLORS[idx % COLORS.length].split(' ')[1]}`} key={idx}
> className="flex items-center text-xs font-semibold"
<span style={{ color: COLORS[idx % COLORS.length] }}
className={`inline-block w-3 h-3 mr-2 rounded ${COLORS[idx % COLORS.length].split(' ')[0]}`} >
/> <span
{slice.label} : {slice.value} className="inline-block w-3 h-3 mr-2 rounded"
</div> style={{ backgroundColor: COLORS[idx % COLORS.length] }}
))} />
{slice.label} : {slice.value}
</div>
)
)}
</div> </div>
</div> </div>
); );