add subventions rates chart

dataesr · Jul 29, 2024 · 95f8340 · 95f8340
1 parent 3f1976b
commit 95f8340
Show file tree

Hide file tree

Showing 8 changed files with 289 additions and 67 deletions.
diff --git a/client/src/pages/european-projects/charts-config.json b/client/src/pages/european-projects/charts-config.json
@@ -17,9 +17,18 @@
   },
   {
     "id": "projectsTypes1",
-    "title": "Type de projets financés",
-    "subtitle": "Subventions demandées et obtenues par type de financement (M€)",
-    "description": "Ad duis occaecat voluptate deserunt tempor enim nulla officia.",
+    "title": "",
+    "subtitle": "Subventions demandées et obtenues (M€)",
+    "description": "",
+    "source": "Commission européenne, Cordis",
+    "sourceURL": "https://cordis.europa.eu/",
+    "integrationURL": "/european-projects/components/pages/analysis/overview/charts/projects-types-1"
+  },
+  {
+    "id": "projectsTypes1Rates",
+    "title": "",
+    "subtitle": "Part des subventions demandées et obtenues sur HE",
+    "description": "",
     "source": "Commission européenne, Cordis",
     "sourceURL": "https://cordis.europa.eu/",
     "integrationURL": "/european-projects/components/pages/analysis/overview/charts/projects-types-1"

diff --git a/...s/european-projects/components/pages/general/positioning/charts/funding-ranking/index.tsx b/...s/european-projects/components/pages/general/positioning/charts/funding-ranking/index.tsx
@@ -14,12 +14,13 @@ import { Col, Container, Row } from "@dataesr/dsfr-plus";
 export default function FundingRanking({ indicateurId }) {
   const { data, isLoading } = useQuery({
     queryKey: ["fundingRanking"],
-    queryFn: () => GetData()
-  })
+    queryFn: () => GetData(),
+  });
 
-  if (isLoading || !data) return <Template />
+  if (isLoading || !data) return <Template />;
 
-  let successGraphId, sortIndicateur = "";
+  let successGraphId,
+    sortIndicateur = "";
   let optionsChart, optionChartSuccess;
   switch (indicateurId) {
     case "fundingRankingSub":
@@ -46,7 +47,7 @@ export default function FundingRanking({ indicateurId }) {
 
   const prepareData = (data, sortKey) => {
     return data.sort((a, b) => b[sortKey] - a[sortKey]).slice(0, 10);
-  }
+  };
 
   return (
     <Container fluid>
@@ -55,41 +56,91 @@ export default function FundingRanking({ indicateurId }) {
           <ChartWrapper
             id={indicateurId}
             options={optionsChart(prepareData(data, sortIndicateur))}
-            legend={(
+            legend={
               <ul className="legend">
-                <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-                  <div style={{ width: "20px", height: "20px", background: "#009099", marginRight: "10px" }} />
+                <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" }} />
+                <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>
-            )}
+            }
           />
         </Col>
         <Col>
           <ChartWrapper
             id={successGraphId}
             options={optionChartSuccess(prepareData(data, sortIndicateur))}
-            legend={(
+            legend={
               <ul className="legend">
-                <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-                  <div style={{ width: "20px", height: "20px", background: "#27A658", marginRight: "10px" }} />
+                <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" }} />
+                <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>
-            )}
+            }
           />
         </Col>
       </Row>
     </Container>
-  )
-
-}
+  );
+}
diff --git a/...ropean-projects/components/pages/general/projects-types/charts/projects-types-1/index.tsx b/...ropean-projects/components/pages/general/projects-types/charts/projects-types-1/index.tsx
@@ -3,39 +3,79 @@ import { useSearchParams } from "react-router-dom";
 
 import Template from "./template";
 import { GetData } from "./query";
-import options from "./options";
+import optionsSubventionsValues from "./options-subventions_values";
+import optionsSubventionsRates from "./options-subventions_rates";
 
 import ChartWrapper from "../../../../../chart-wrapper";
 import { getDefaultParams } from "./utils";
+import { Container, Row, Col } from "@dataesr/dsfr-plus";
 
 export default function ProjectsTypes1() {
   const [searchParams] = useSearchParams();
   const params = getDefaultParams(searchParams);
 
   const { data, isLoading } = useQuery({
     queryKey: ["projectsTypes1", params],
-    queryFn: () => GetData(params)
-  })
+    queryFn: () => GetData(params),
+  });
 
-  if (isLoading || !data) return <Template />
+  if (isLoading || !data) return <Template />;
 
   return (
-    <ChartWrapper
-      id="projectsTypes1"
-      options={options(data)}
-      legend={(
-        <ul className="legend">
-          <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-            <div style={{ width: "20px", height: "20px", background: "#233E41", marginRight: "10px" }}></div>
-            <span>Projets lauréats</span>
-          </li>
-          <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-            <div style={{ width: "20px", height: "20px", background: "#009099", marginRight: "10px" }}></div>
-            <span>Projets évalués</span>
-          </li>
-        </ul>
-      )}
-    />
-  )
-
-}
+    <Container fluid>
+      <Row>
+        <Col>
+          <ChartWrapper
+            id="projectsTypes1"
+            options={optionsSubventionsValues(data)}
+            legend={
+              <ul className="legend">
+                <li
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "5px",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      background: "#233E41",
+                      marginRight: "10px",
+                    }}
+                  ></div>
+                  <span>Projets lauréats</span>
+                </li>
+                <li
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "5px",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      background: "#009099",
+                      marginRight: "10px",
+                    }}
+                  ></div>
+                  <span>Projets évalués</span>
+                </li>
+              </ul>
+            }
+          />
+        </Col>
+        <Col>
+          <ChartWrapper
+            id="projectsTypes1Rates"
+            options={optionsSubventionsRates(data)}
+            legend={null}
+          />
+        </Col>
+      </Row>
+    </Container>
+  );
+}
diff --git a/...onents/pages/general/projects-types/charts/projects-types-1/options-subventions_rates.tsx b/...onents/pages/general/projects-types/charts/projects-types-1/options-subventions_rates.tsx
@@ -0,0 +1,65 @@
+export default function Options(data) {
+  if (!data) return null;
+
+  const filteredData = data.country.filter(
+    (el) => el.total_evaluated && el.total_successful
+  );
+
+  return {
+    chart: {
+      type: "column",
+      height: 500,
+      backgroundColor: "transparent",
+    },
+    title: { text: "" },
+    legend: { enabled: false },
+    credits: { enabled: false },
+
+    xAxis: {
+      categories: filteredData.map((item) => item.id),
+      crosshair: true,
+      accessibility: {
+        description: "Actions",
+      },
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "%",
+      },
+    },
+    tooltip: {
+      formatter: function (this: Highcharts.TooltipFormatterContextObject) {
+        return (this.x ?? "") + " : " + (this.y as number).toFixed(1) + " %";
+      },
+    },
+    plotOptions: {
+      column: {
+        pointPadding: 0.1,
+        borderWidth: 0,
+      },
+    },
+    series: [
+      {
+        name: "Projets évalués",
+        data: filteredData.map(
+          (item) =>
+            (item.total_evaluated /
+              data.all.find((el) => el.id === item.id).total_evaluated) *
+            100
+        ),
+        color: "#009099",
+      },
+      {
+        name: "Projets lauréats",
+        data: filteredData.map(
+          (item) =>
+            (item.total_successful /
+              data.all.find((el) => el.id === item.id).total_successful) *
+            100
+        ),
+        color: "#233E41",
+      },
+    ],
+  };
+}
diff --git a/...types/charts/projects-types-1/options.tsx → ...ts-types-1/options-subventions_values.tsx b/...types/charts/projects-types-1/options.tsx → ...ts-types-1/options-subventions_values.tsx
@@ -1,7 +1,7 @@
 export default function Options(data) {
   if (!data) return null;
 
-  const filteredData = data.filter(
+  const filteredData = data.country.filter(
     (el) => el.total_evaluated && el.total_successful
   );
 
@@ -33,7 +33,7 @@ export default function Options(data) {
     },
     plotOptions: {
       column: {
-        pointPadding: 0.2,
+        pointPadding: 0.1,
         borderWidth: 0,
       },
     },

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
@@ -1,6 +1,7 @@
-import { Container } from "@dataesr/dsfr-plus";
+import { Container, Title } from "@dataesr/dsfr-plus";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
+
 import ProjectsTypes1 from "./charts/projects-types-1";
 import ProjectsTypes2 from "./charts/projects-types-2";
 
@@ -15,6 +16,9 @@ export default function ProjectsTypes() {
 
   return (
     <Container as="main">
+      <Title as="h2" look="h4">
+        Par type de projets
+      </Title>
       <ProjectsTypes1 />
       <div className="fr-my-5w" />
       <ProjectsTypes2 />

diff --git a/client/src/pages/european-projects/routes.tsx b/client/src/pages/european-projects/routes.tsx
@@ -43,15 +43,3 @@ export default function EuropeanProjectsRoutes() {
     </Routes>
   );
 }
-
-/*
-Synthèse v
-Positionnement v
-Evolution v
-Objectifs & types de projets
-Bénéficiaires
-Programme MIRES
-Liste des appels à projets clôturés
-Données de référence
-Informations
-*/