acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-28 15:33:22 +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 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
{/* Graphique des inscriptions */}
<div className="lg:col-span-1 bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100">
<h2 className="text-lg font-semibold mb-6">
{t('inscriptionTrends')}
</h2>
<div className="flex flex-row gap-4">
<div className="flex-1 p-6">
<LineChart data={monthlyRegistrations} />
</div>
<div className="flex-1 flex items-center justify-center">
<PieChart data={statusDistribution} />
{/* Colonne de gauche : Graphique des inscriptions + Présence */}
<div className="flex flex-col gap-6">
{/* Graphique des inscriptions */}
<div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1">
<h2 className="text-lg font-semibold mb-6">
{t('inscriptionTrends')}
</h2>
<div className="flex flex-row gap-4">
<div className="flex-1 p-6">
<LineChart data={monthlyRegistrations} />
</div>
<div className="flex-1 flex items-center justify-center">
<PieChart data={statusDistribution} />
</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>
{/* Événements à venir */}
<div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100">
{/* Colonne de droite : Événements à venir */}
<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>
{upcomingEvents.map((event, index) => (
<EventCard key={index} {...event} />
))}
</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>
);
}

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

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