acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 16:03:21 +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

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>
);