acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-28 23:43: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

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

@ -217,8 +217,10 @@ 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">
{/* Colonne de gauche : Graphique des inscriptions + Présence */}
<div className="flex flex-col gap-6">
{/* Graphique des inscriptions */} {/* Graphique des inscriptions */}
<div className="lg:col-span-1 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">
<h2 className="text-lg font-semibold mb-6"> <h2 className="text-lg font-semibold mb-6">
{t('inscriptionTrends')} {t('inscriptionTrends')}
</h2> </h2>
@ -231,20 +233,20 @@ export default function DashboardPage() {
</div> </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>
{/* É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>
); );
} }

36
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) =>
slice.value > 0 && (
<div <div
key={idx} key={idx}
className={`flex items-center text-xs font-semibold ${COLORS[idx % COLORS.length].split(' ')[1]}`} className="flex items-center text-xs font-semibold"
style={{ color: COLORS[idx % COLORS.length] }}
> >
<span <span
className={`inline-block w-3 h-3 mr-2 rounded ${COLORS[idx % COLORS.length].split(' ')[0]}`} className="inline-block w-3 h-3 mr-2 rounded"
style={{ backgroundColor: COLORS[idx % COLORS.length] }}
/> />
{slice.label} : {slice.value} {slice.label} : {slice.value}
</div> </div>
))} )
)}
</div> </div>
</div> </div>
); );