add success rate per pillar chart

dataesr · Aug 7, 2024 · c97ebd0 · c97ebd0
1 parent faaf8c2
commit c97ebd0
Show file tree

Hide file tree

Showing 11 changed files with 335 additions and 71 deletions.
diff --git a/client/src/pages/european-projects/charts-config.json b/client/src/pages/european-projects/charts-config.json
@@ -42,6 +42,15 @@
     "sourceURL": "https://cordis.europa.eu/",
     "integrationURL": "/european-projects/components/pages/analysis/overview/charts/projects-types-2"
   },
+  {
+    "id": "successRateForAmountsByPillar",
+    "title": "",
+    "subtitle": "Taux de succès sur le montants par pilier",
+    "description": "Attention EIT",
+    "source": "Commission européenne, Cordis",
+    "sourceURL": "https://cordis.europa.eu/",
+    "integrationURL": "/european-projects/components/pages/analysis/overview/charts/projects-types-2"
+  },
   {
     "id": "projectsTypesPiliers1",
     "title": "",

diff --git a/...ges/european-projects/components/pages/general/overview/charts/projects-types-2/query.tsx b/...ges/european-projects/components/pages/general/overview/charts/projects-types-2/query.tsx
@@ -1,11 +1,10 @@
 const { VITE_APP_SERVER_URL } = import.meta.env;
 
 export async function GetData(params: string) {
-  let url = `${VITE_APP_SERVER_URL}/european-projects/analysis-synthese-projects-types-2`;
-  if (params !== '') {
-    url = `${VITE_APP_SERVER_URL}/european-projects/analysis-synthese-projects-types-2?${params}`;
+  let url = `${VITE_APP_SERVER_URL}/european-projects/general-ProjectsTypes-SuccessRateForAmountsByProjectsTypes`;
+  if (params !== "") {
+    url = `${VITE_APP_SERVER_URL}/european-projects/general-ProjectsTypes-SuccessRateForAmountsByProjectsTypes?${params}`;
   }
 
-  return fetch(url).then((response) => (response.json()))
+  return fetch(url).then((response) => response.json());
 }
-
diff --git a/...mponents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/index.tsx b/...mponents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/index.tsx
@@ -0,0 +1,72 @@
+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";
+import { Col, Container, Row } from "@dataesr/dsfr-plus";
+
+export default function SuccessRateForAmountsByPillar() {
+  const [searchParams] = useSearchParams();
+  const params = getDefaultParams(searchParams);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["successRateForAmountsByPillar", params],
+    queryFn: () => GetData(params),
+  });
+
+  if (isLoading || !data) return <Template />;
+  return (
+    <Container fluid>
+      <Row>
+        <Col md={6}>
+          <ChartWrapper
+            id="successRateForAmountsByPillar"
+            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>
+            }
+          />
+        </Col>
+      </Row>
+    </Container>
+  );
+}
diff --git a/...onents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/options.tsx b/...onents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/options.tsx
@@ -0,0 +1,66 @@
+export default function Options(data) {
+  if (!data) return null;
+
+  // sort selectedCountry by action_id
+  const selectedCountry = data.selectedCountry
+    .filter((el) => el.ratio && el.ratio !== 0)
+    .sort((a, b) => a.id - b.id);
+
+  // sort otherCountries same as selectedCountry
+  data.otherCountries.sort((a, b) => {
+    return (
+      data.selectedCountry.findIndex((item) => item.id === a.id) -
+      data.selectedCountry.findIndex((item) => item.id === b.id)
+    );
+  });
+
+  const otherCountriesSorted = selectedCountry.map((item) => {
+    return data.otherCountries.find((otherItem) => otherItem.id === item.id);
+  });
+
+  return {
+    chart: {
+      type: "column",
+      height: 500,
+      backgroundColor: "transparent",
+    },
+    title: { text: "" },
+    legend: { enabled: false },
+    credits: { enabled: false },
+
+    xAxis: {
+      categories: selectedCountry.map((item) => item.id),
+      crosshair: true,
+      accessibility: {
+        description: "Actions",
+      },
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "(%)",
+      },
+    },
+    tooltip: {
+      valueSuffix: " (%)",
+    },
+    plotOptions: {
+      column: {
+        pointPadding: 0.2,
+        borderWidth: 0,
+      },
+    },
+    series: [
+      {
+        name: "Pays",
+        data: selectedCountry.map((item) => item.ratio),
+        color: "#6DD897",
+      },
+      {
+        name: "UE & Etats associés",
+        data: otherCountriesSorted.map((item) => item.ratio),
+        color: "#09622A",
+      },
+    ],
+  };
+}
diff --git a/...mponents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/query.tsx b/...mponents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/query.tsx
@@ -0,0 +1,10 @@
+const { VITE_APP_SERVER_URL } = import.meta.env;
+
+export async function GetData(params: string) {
+  let url = `${VITE_APP_SERVER_URL}/european-projects/general-projectsTypes-successRateForAmountsByPillar`;
+  if (params !== "") {
+    url = `${VITE_APP_SERVER_URL}/european-projects/general-projectsTypes-successRateForAmountsByPillar?${params}`;
+  }
+
+  return fetch(url).then((response) => response.json());
+}
diff --git a/...nents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/template.tsx b/...nents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/template.tsx
@@ -0,0 +1,7 @@
+export default function Template() {
+  return (
+    <>
+      graph template
+    </>
+  );
+}
diff --git a/...mponents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/utils.tsx b/...mponents/pages/general/projects-types/charts/success-rate-for-amounts-by-pillar/utils.tsx
@@ -0,0 +1,5 @@
+export function getDefaultParams(searchParams) {
+  const params = [...searchParams].map(([key, value]) => `${key}=${value}`).join('&');
+
+  return params + '&stage=successful';
+}
diff --git a/...ges/general/projects-types/charts/success-rate-for-amounts-by-type-of-financing/index.tsx b/...ges/general/projects-types/charts/success-rate-for-amounts-by-type-of-financing/index.tsx
@@ -13,7 +13,7 @@ export default function SuccessRateForAmountsByTypeOfFinancing() {
   const params = getDefaultParams(searchParams);
 
   const { data, isLoading } = useQuery({
-    queryKey: ["projectsTypes2", params],
+    queryKey: ["SuccessRateForAmountsByProjectsTypes", params],
     queryFn: () => GetData(params),
   });
 

diff --git a/...ges/general/projects-types/charts/success-rate-for-amounts-by-type-of-financing/query.tsx b/...ges/general/projects-types/charts/success-rate-for-amounts-by-type-of-financing/query.tsx
@@ -1,11 +1,10 @@
 const { VITE_APP_SERVER_URL } = import.meta.env;
 
 export async function GetData(params: string) {
-  let url = `${VITE_APP_SERVER_URL}/european-projects/analysis-synthese-projects-types-2`;
-  if (params !== '') {
-    url = `${VITE_APP_SERVER_URL}/european-projects/analysis-synthese-projects-types-2?${params}`;
+  let url = `${VITE_APP_SERVER_URL}/european-projects/general-projectsTypes-successRateForAmountsByProjectsTypes`;
+  if (params !== "") {
+    url = `${VITE_APP_SERVER_URL}/european-projects/general-projectsTypes-successRateForAmountsByProjectsTypes?${params}`;
   }
 
-  return fetch(url).then((response) => (response.json()))
+  return fetch(url).then((response) => response.json());
 }
-
diff --git a/client/src/pages/european-projects/components/pages/general/projects-types/index.tsx b/client/src/pages/european-projects/components/pages/general/projects-types/index.tsx
@@ -6,6 +6,7 @@ import ProjectsTypesPiliers1 from "./charts/projects-types-piliers-1";
 import ProjectsTypes1 from "./charts/projects-types-1";
 import SuccessRateForAmountsByTypeOfFinancing from "./charts/success-rate-for-amounts-by-type-of-financing";
 import ProjectsTypesPillarsSubsidiesRequested from "./charts/projects-types-pillars-subsidies-requested";
+import SuccessRateForAmountsByPillar from "./charts/success-rate-for-amounts-by-pillar";
 
 export default function ProjectsTypes() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -25,6 +26,9 @@ export default function ProjectsTypes() {
       <div className="fr-my-5w" />
       <ProjectsTypesPillarsSubsidiesRequested />
       <div className="fr-my-5w" />
+      <SuccessRateForAmountsByPillar />
+      <div className="fr-my-5w" />
+
       <Title as="h2" look="h4">
         Par type de projets
       </Title>