MetricMoy.jsx

// MetricMoyenne.jsx

import axios from "axios";
import PropTypes from "prop-types";
import { useState, useEffect } from "react";

const MetricMoyenne = ({ typeIndic = "indicateurs", selectedYear = "2024" }) => {
  const [moyenne, setMoyenne] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [colors, setColors] = useState([]);

  let nomIndic = "Moyenne score total";

  // Dictionnaire pour les noms des indicateurs
  const indicNames = {
    indicateurs: "Moyenne nationale score total",
    indicateursPH: "Moyenne nationale score PH",
    indicateursChlore: "Moyenne nationale score Chlore",
    indicateursNitritesNitrates: "Moyenne nationale score Nitrates & Nitrites",
    indicateursMetauxLourds: "Moyenne nationale score Métaux lourds",
    indicateursPesticides: "Moyenne nationale score Pesticides",
  };

  nomIndic = indicNames[typeIndic] + " " + selectedYear;

  useEffect(() => {
    setIsLoading(true);
    // Effectuer la requête pour récupérer la moyenne
    axios
      .get(`http://localhost:5003/api/moyenne?type=${typeIndic}&year=${selectedYear}`)
      .then((res) => {
        setMoyenne(res.data.moyenne);
      })
      .catch((err) =>
        console.error("Erreur lors du chargement de la moyenne :", err)
      );
  }, [typeIndic, selectedYear]);


  useEffect(() => {
    // Charger les couleurs depuis l'API backend en fonction de l'année sélectionnée
    axios
      .get(`http://localhost:5003/api/indicateurs?type=${typeIndic}&year=${selectedYear}`)
      .then((res) => {
        setColors(res.data.colors);
        console.log("Couleurs chargées :", res.data.colors); // Log des couleurs chargées
      })
      .catch((err) => console.error("Erreur lors du chargement des couleurs :", err))
      .finally(() => setIsLoading(false));
  }, [typeIndic, selectedYear]);

  const getColor = (score) => {
    console.log("Score :", score); // Log du score
    if (!colors.length) return '#66bd63'; // Couleur par défaut si les couleurs ne sont pas chargées
    for (let i = 0; i < colors.length; i++) {
      if (score >= colors[i].threshold) {
        return colors[i].color;
      }
    }
    return colors[colors.length - 1].color; // Couleur par défaut si aucune condition n'est remplie
  };

  return (
    <div
      style={{
        backgroundColor: "white",
        padding: "20px",
        margin: "10px",
        borderRadius: "8px",
        boxShadow: "0 2px 5px rgba(0,0,0,0.1)",
        textAlign: "center",
      }}
    >
      <h3 style={{ marginBottom: "10px" }}>{nomIndic}</h3>
      {isLoading ? (
        "Chargement des données..."
      ) : (
        <div
          style={{
            position: "relative",
            width: "100px",
            height: "100px",
            borderRadius: "50%",
            backgroundColor: getColor(moyenne),
            display: "inline-block",
            textAlign: "center",
            lineHeight: "100px", // Centrer verticalement le texte
            fontSize: "24px",
            fontWeight: "bold",
            color: "white", // Couleur du texte pour contraster avec le fond
          }}
        >
          {moyenne}
        </div>
      )}
    </div>
  );
};

MetricMoyenne.propTypes = {
  typeIndic: PropTypes.string.isRequired,
  selectedYear: PropTypes.any,
  };

export default MetricMoyenne;