From 8adcdfdd2eda5e54c5fb139df2b36b956fb3779a Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Tue, 27 Aug 2024 16:41:09 +0200
Subject: [PATCH] factoring the legend

---
 .../european-projects/components/legend.tsx   | 21 +++++
 .../charts/funding-ranking/index.tsx          | 89 +++----------------
 .../charts/top-10-beneficiaries/index.tsx     | 32 +++----
 3 files changed, 44 insertions(+), 98 deletions(-)
 create mode 100644 client/src/pages/european-projects/components/legend.tsx

diff --git a/client/src/pages/european-projects/components/legend.tsx b/client/src/pages/european-projects/components/legend.tsx
new file mode 100644
index 000000000..ae097635b
--- /dev/null
+++ b/client/src/pages/european-projects/components/legend.tsx
@@ -0,0 +1,21 @@
+export function GetLegend(legendArray: [string, string][]) {
+  return (
+    <ul className="legend">
+      {legendArray.map((item) => (
+        <li
+          style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}
+        >
+          <div
+            style={{
+              width: "20px",
+              height: "20px",
+              background: item[1],
+              marginRight: "10px",
+            }}
+          ></div>
+          <span>{item[0]}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/client/src/pages/european-projects/components/pages/general/positioning/charts/funding-ranking/index.tsx b/client/src/pages/european-projects/components/pages/general/positioning/charts/funding-ranking/index.tsx
index f439d3a6a..cffdc7191 100644
--- a/client/src/pages/european-projects/components/pages/general/positioning/charts/funding-ranking/index.tsx
+++ b/client/src/pages/european-projects/components/pages/general/positioning/charts/funding-ranking/index.tsx
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { Col, Container, Row } from "@dataesr/dsfr-plus";
 
-import Template from "./template";
 import { GetData } from "./query";
+import { GetLegend } from "../../../../../legend";
 import optionsSub from "./options";
 import optionSubSuccessRate from "./options-succes-rate";
 import optionsCoordinationNumber from "./options-coordination_number";
@@ -9,7 +10,7 @@ import optionCoordinationNumberSuccessRate from "./options-coordination_number-s
 import optionsNumberInvolved from "./options-number_involved";
 import optionNumberInvolvedSuccessRate from "./options-number_involved-succes-rate";
 import ChartWrapper from "../../../../../chart-wrapper";
-import { Col, Container, Row } from "@dataesr/dsfr-plus";
+import Template from "./template";
 
 export default function FundingRanking({ indicateurId }) {
   const { data, isLoading } = useQuery({
@@ -56,88 +57,20 @@ export default function FundingRanking({ indicateurId }) {
           <ChartWrapper
             id={indicateurId}
             options={optionsChart(prepareData(data, sortIndicateur))}
-            legend={
-              <ul className="legend">
-                <li
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    marginBottom: "5px",
-                  }}
-                >
-                  <div
-                    style={{
-                      width: "20px",
-                      height: "20px",
-                      background: "#009099",
-                      marginRight: "10px",
-                    }}
-                  />
-                  <span>Projets évalués</span>
-                </li>
-                <li
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    marginBottom: "5px",
-                  }}
-                >
-                  <div
-                    style={{
-                      width: "20px",
-                      height: "20px",
-                      background: "#233E41",
-                      marginRight: "10px",
-                    }}
-                  />
-                  <span>Projets lauréats</span>
-                </li>
-              </ul>
-            }
+            legend={GetLegend([
+              ["Projets évalués", "#009099"],
+              ["Projets lauréats", "#233E41"],
+            ])}
           />
         </Col>
         <Col>
           <ChartWrapper
             id={successGraphId}
             options={optionChartSuccess(prepareData(data, sortIndicateur))}
-            legend={
-              <ul className="legend">
-                <li
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    marginBottom: "5px",
-                  }}
-                >
-                  <div
-                    style={{
-                      width: "20px",
-                      height: "20px",
-                      background: "#27A658",
-                      marginRight: "10px",
-                    }}
-                  />
-                  <span>Taux de réussite du pays</span>
-                </li>
-                <li
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    marginBottom: "5px",
-                  }}
-                >
-                  <div
-                    style={{
-                      width: "20px",
-                      height: "20px",
-                      background: "#D75521",
-                      marginRight: "10px",
-                    }}
-                  />
-                  <span>Taux de réussite moyen</span>
-                </li>
-              </ul>
-            }
+            legend={GetLegend([
+              ["Taux de réussite du pays", "#27A658"],
+              ["Taux de réussite moyen", "#D75521"],
+            ])}
           />
         </Col>
       </Row>
diff --git a/client/src/pages/european-projects/components/pages/general/positioning/charts/top-10-beneficiaries/index.tsx b/client/src/pages/european-projects/components/pages/general/positioning/charts/top-10-beneficiaries/index.tsx
index d4467b52b..ae97bd968 100644
--- a/client/src/pages/european-projects/components/pages/general/positioning/charts/top-10-beneficiaries/index.tsx
+++ b/client/src/pages/european-projects/components/pages/general/positioning/charts/top-10-beneficiaries/index.tsx
@@ -1,12 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 
-import Template from "./template";
 import { GetData } from "./query";
+import { getDefaultParams } from "./utils";
+import { GetLegend } from "../../../../../legend";
 import options from "./options";
-
 import ChartWrapper from "../../../../../chart-wrapper";
-import { getDefaultParams } from "./utils";
+import Template from "./template";
 
 export default function Top10Beneficiaries() {
   const [searchParams] = useSearchParams();
@@ -14,26 +14,18 @@ export default function Top10Beneficiaries() {
 
   const { data, isLoading } = useQuery({
     queryKey: ["Top10Beneficiaries", params],
-    queryFn: () => GetData(params)
-  })
+    queryFn: () => GetData(params),
+  });
 
-  if (isLoading || !data) return <Template />
+  if (isLoading || !data) return <Template />;
   return (
     <ChartWrapper
       id="top10beneficiaries"
-      options={options(data, searchParams.get('country_code') ?? null)}
-      legend={(
-        <ul className="legend">
-          <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-            <div style={{ width: "20px", height: "20px", background: "#233E41", marginRight: "10px" }}></div>
-            <span>Total des subventions en euros €</span>
-          </li>
-          <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-            <div style={{ width: "20px", height: "20px", background: "#D75521", marginRight: "10px" }}></div>
-            <span>Poids du cumul des subventions (%)</span>
-          </li>
-        </ul>
-      )}
+      options={options(data, searchParams.get("country_code") ?? null)}
+      legend={GetLegend([
+        ["Total des subventions en euros €", "#233E41"],
+        ["Poids du cumul des subventions (%)", "#D75521"],
+      ])}
     />
   );
-}
\ No newline at end of file
+}