Rename chart

client/src/pages/european-projects/charts-config.json

@@ -34,7 +34,7 @@
     "integrationURL": "/european-projects/components/pages/analysis/overview/charts/projects-types-1"
   },
   {
-    "id": "projectsTypes2",
+    "id": "successRateForAmountsByTypeOfFinancing",
     "title": "",
     "subtitle": "Taux de succès sur le montants par type de financement",
     "description": "Attention EIT",

client/src/pages/european-projects/components/pages/general/projects-types/charts/success-rate-for-amounts-by-type-of-financing/index.tsx

@@ -0,0 +1,65 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router-dom";
+
+import Template from "./template";
+import { GetData } from "./query";
+import options from "./options";
+
+import ChartWrapper from "../../../../../chart-wrapper";
+import { getDefaultParams } from "./utils";
+
+export default function SuccessRateForAmountsByTypeOfFinancing() {
+  const [searchParams] = useSearchParams();
+  const params = getDefaultParams(searchParams);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["projectsTypes2", params],
+    queryFn: () => GetData(params),
+  });
+
+  if (isLoading || !data) return <Template />;
+  return (
+    <ChartWrapper
+      id="successRateForAmountsByTypeOfFinancing"
+      options={options(data)}
+      legend={
+        <ul className="legend">
+          <li
+            style={{
+              display: "flex",
+              alignItems: "center",
+              marginBottom: "5px",
+            }}
+          >
+            <div
+              style={{
+                width: "20px",
+                height: "20px",
+                background: "#6DD897",
+                marginRight: "10px",
+              }}
+            />
+            <span>Pays sélectionné</span>
+          </li>
+          <li
+            style={{
+              display: "flex",
+              alignItems: "center",
+              marginBottom: "5px",
+            }}
+          >
+            <div
+              style={{
+                width: "20px",
+                height: "20px",
+                background: "#09622A",
+                marginRight: "10px",
+              }}
+            />
+            <span>UE & Etats associés</span>
+          </li>
+        </ul>
+      }
+    />
+  );
+}

client/src/pages/european-projects/components/pages/general/projects-types/index.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 
 import ProjectsTypesPiliers1 from "./charts/projects-types-piliers-1";
 import ProjectsTypes1 from "./charts/projects-types-1";
-import ProjectsTypes2 from "./charts/projects-types-2";
+import SuccessRateForAmountsByTypeOfFinancing from "./charts/success-rate-for-amounts-by-type-of-financing";
 import ProjectsTypesPillarsSubsidiesRequested from "./charts/projects-types-pillars-subsidies-requested";
 
 export default function ProjectsTypes() {
@@ -30,7 +30,7 @@ export default function ProjectsTypes() {
       </Title>
       <ProjectsTypes1 />
       <div className="fr-my-5w" />
-      <ProjectsTypes2 />
+      <SuccessRateForAmountsByTypeOfFinancing />
     </Container>
   );
 }