Skip to content
Snippets Groups Projects
Commit 9a09c1bd authored by Gilares Paul's avatar Gilares Paul
Browse files

Edit MetricsComponent.jsx

parent f9a800cf
Branches
No related tags found
No related merge requests found
......@@ -146,151 +146,3 @@ MetricBlock.propTypes = {
};
export { MetricsComponent, MetricBlock };
\ No newline at end of file
/*
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment