meeting-app/src/components/graph/PieChart.tsx

import React, { useEffect, useState } from 'react';
import { Pie } from 'react-chartjs-2';

const PieChart = () => {
  const [userData, setUserData] = useState([]);

  useEffect(() => {
    // Fonction pour récupérer les données des utilisateurs depuis le backend
    const fetchUserData = async () => {
      try {
        const response = await fetch('/api/users');
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error('Failed to fetch user data:', error);
      }
    };

    fetchUserData();
  }, []);

  // Compter le nombre de chaque genre
  const countGenders = () => {
    const genders = {
      MALE: 0,
      FEMALE: 0,
      OTHER: 0,
      UNKNOWN: 0,
    };

    userData.forEach((user) => {
      if (user.gender in genders) {
        genders[user.gender]++;
      }
    });

    return Object.values(genders);
  };

  // Préparer les données pour le chart
  const data = {
    labels: ['MALE', 'FEMALE', 'OTHER', 'UNKNOWN'],
    datasets: [
      {
        data: countGenders(),
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
      },
    ],
  };

  return <Pie data={data} />;
};

export default PieChart;