diff --git a/frontend/src/components/MetricsComponent.jsx b/frontend/src/components/MetricsComponent.jsx
index 69c634d7dfa1a525ae11ad0d53d89d970d29254d..b0621785b42f680bde694aca53a0a1626bf674fb 100644
--- a/frontend/src/components/MetricsComponent.jsx
+++ b/frontend/src/components/MetricsComponent.jsx
@@ -145,152 +145,4 @@ MetricBlock.propTypes = {
   type: PropTypes.string,
 };
 
-export { MetricsComponent, MetricBlock };
-
-
-
-/*
-
-import PropTypes from "prop-types";
-import MetricsGraph from "./MetricsGraph";
-import MetricMoyenne from "./MetricMoy";
-
-// Composant représentant un bloc de métrique
-const MetricBlock = ({ title, children }) => {
-  return (
-    <div style={{
-      backgroundColor: "white",
-      padding: "20px",
-      margin: "10px",
-      borderRadius: "8px",
-      boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
-    }}>
-      <h3 style={{ marginBottom: "10px", textAlign: "center" }}>{title}</h3>
-      {children}
-    </div>
-  );
-};
-
-// Composant contenant plusieurs métriques
-const MetricsComponent = ({ 
-  typeIndic = "indicateurs", 
-  selectedYear = "2024", 
-  top5Dept = [], 
-  flop5Dept = [], 
-  selectedDept, 
-  top5Communes = [], 
-  flop5Communes = [] 
-}) => {
-  console.log("flop5Dept", flop5Dept);
-  const isDeptSelected = !!selectedDept; // Vérifie si un département est sélectionné
-
-  return (
-    <div style={{
-      backgroundColor: "#f5f5f5",
-      borderRadius: "8px",
-      boxShadow: "0 2px 5px rgba(0,0,0,0.1)",
-      padding: "20px",
-      height: "100%",
-      maxHeight: "100vh",
-      overflowY: "auto",
-      display: "flex",
-      flexDirection: "column",
-      scrollbarWidth: "thin",
-      scrollbarColor: "#213547 #f9f9f9",
-    }}>
-      <h2 style={{ textAlign: "center" }}>📊 Statistiques</h2>
-
-      {//Moyenne nationale 
-      }
-      <MetricMoyenne typeIndic={typeIndic} selectedYear={selectedYear} />
-
-      {// Graphique des moyennes 
-        }
-      <MetricBlock title="Moyenne nationale du score selon les années">
-        <MetricsGraph typeIndic={typeIndic} selectedYear={selectedYear} selectedDept={selectedDept} />
-      </MetricBlock>
-
-      {// Si un département est sélectionné, afficher les communes, sinon afficher les départements
-        }
-      {isDeptSelected ? (
-        <>
-          <MetricBlock title={`Les 5 meilleures communes du département ${selectedDept} en ${selectedYear}`}>
-            <ol>
-              {top5Communes.map((commune) => (
-                <li key={commune.code}>
-                  <span>{commune.name}</span> ({commune.code}) - Score: {commune.average}
-                </li>
-              ))}
-            </ol>
-          </MetricBlock>
-          <MetricBlock title={`Les 5 pires communes du département ${selectedDept} en ${selectedYear}`}>
-            <ol>
-              {flop5Communes.map((commune) => (
-                <li key={commune.code}>
-                  <span>{commune.name}</span> ({commune.code}) - Score: {commune.average}
-                </li>
-              ))}
-            </ol>
-          </MetricBlock>
-        </>
-      ) : (
-        <>
-          <MetricBlock title={`Les 5 meilleurs départements en ${selectedYear}`}>
-            <ol>
-              {top5Dept.map((dept) => (
-                <li key={dept.department}>
-                  <span>{dept.departmentName}</span> ({dept.department})
-                </li>
-              ))}
-            </ol>
-          </MetricBlock>
-          <MetricBlock title={`Les 5 pires départements en ${selectedYear}`}>
-            <ol>
-              {flop5Dept.slice().reverse().map((dept) => (
-                <li key={dept.department}>
-                  <span>{dept.departmentName}</span> ({dept.department})
-                </li>
-              ))}
-            </ol>
-          </MetricBlock>
-        </>
-      )}
-    </div>
-  );
-};
-
-// Définition des PropTypes
-MetricsComponent.propTypes = {
-  typeIndic: PropTypes.string,
-  selectedYear: PropTypes.any,
-  top5Dept: PropTypes.arrayOf(PropTypes.shape({
-    department: PropTypes.any,
-    departmentName: PropTypes.any,
-    average: PropTypes.any
-  })),
-  flop5Dept: PropTypes.arrayOf(PropTypes.shape({
-    department: PropTypes.any,
-    departmentName: PropTypes.any,
-    average: PropTypes.any
-  })),
-  selectedDept: PropTypes.string,
-  top5Communes: PropTypes.arrayOf(PropTypes.shape({
-    code: PropTypes.any,
-    name: PropTypes.any,
-    average: PropTypes.any
-  })),
-  flop5Communes: PropTypes.arrayOf(PropTypes.shape({
-    code: PropTypes.any,
-    name: PropTypes.any,
-    average: PropTypes.any
-  })),
-};
-
-MetricBlock.propTypes = {
-  title: PropTypes.string.isRequired,
-  children: PropTypes.node
-};
-
-export default MetricsComponent;
-
-*/
\ No newline at end of file
+export { MetricsComponent, MetricBlock };
\ No newline at end of file