add charts

dataesr · Aug 1, 2024 · 8795a8e · 8795a8e
1 parent feefbc2
commit 8795a8e
Show file tree

Hide file tree

Showing 12 changed files with 521 additions and 86 deletions.
diff --git a/client/src/pages/european-projects/charts-config.json b/client/src/pages/european-projects/charts-config.json
@@ -51,6 +51,24 @@
     "sourceURL": "https://cordis.europa.eu/",
     "integrationURL": "/european-projects/components/pages/analysis/overview/charts/projects-types-1"
   },
+  {
+    "id": "projectsTypesPiliers2",
+    "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": "projectsTypesPiliers2Rates",
+    "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"
+  },
   {
     "id": "projectsTypesPiliers1Rates",
     "title": "",

diff --git a/...nents/pages/general/projects-types/charts/projects-types-1/options-subventions_values.tsx b/...nents/pages/general/projects-types/charts/projects-types-1/options-subventions_values.tsx
@@ -1,5 +1,6 @@
 export default function Options(data) {
   if (!data) return null;
+  console.log(data);
 
   const filteredData = data.country.filter(
     (el) => el.total_evaluated && el.total_successful

diff --git a/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-1/index.tsx b/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-1/index.tsx
@@ -10,7 +10,7 @@ import ChartWrapper from "../../../../../chart-wrapper";
 import { getDefaultParams } from "./utils";
 import { Container, Row, Col } from "@dataesr/dsfr-plus";
 
-export default function ProjectsTypes1() {
+export default function ProjectsTypesPiliers1() {
   const [searchParams] = useSearchParams();
   const params = getDefaultParams(searchParams);
 

diff --git a/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-1/query.tsx b/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-1/query.tsx
@@ -1,9 +1,9 @@
 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-piliers-1`;
+  let url = `${VITE_APP_SERVER_URL}/european-projects/general-objectives-and-projects-types-piliers-subventions-1`;
   if (params !== "") {
-    url = `${VITE_APP_SERVER_URL}/european-projects/analysis-synthese-projects-types-piliers-1?${params}`;
+    url = `${VITE_APP_SERVER_URL}/european-projects/general-objectives-and-projects-types-piliers-subventions-1?${params}`;
   }
 
   return fetch(url).then((response) => response.json());

diff --git a/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-2/index.tsx b/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-2/index.tsx
@@ -0,0 +1,128 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router-dom";
+
+import Template from "./template";
+import { GetData } from "./query";
+import optionsSubventionsValuesEvaluated from "./options-subventions_values_evaluated";
+import optionsSubventionsValuesEvaluatedRates from "./options-subventions_values_evaluated_rates";
+
+import ChartWrapper from "../../../../../chart-wrapper";
+import { getDefaultParams } from "./utils";
+import { Container, Row, Col, Title } from "@dataesr/dsfr-plus";
+
+export default function ProjectsTypesPiliers2() {
+  const [searchParams] = useSearchParams();
+  const params = getDefaultParams(searchParams);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["projectsTypesPiliers2", params],
+    queryFn: () => GetData(params),
+  });
+
+  if (isLoading || !data) return <Template />;
+
+  return (
+    <Container fluid>
+      <Row>
+        <Col>
+          <Title as="h3" look="h5">
+            Projets évalués
+          </Title>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <ChartWrapper
+            id="projectsTypesPiliers2"
+            options={optionsSubventionsValuesEvaluated(data)}
+            legend={
+              <ul className="legend">
+                <li
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "5px",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      background: "#A558A0",
+                      marginRight: "10px",
+                    }}
+                  ></div>
+                  <span>Europe plus innovante</span>
+                </li>
+                <li
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "5px",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      background: "#21AB8E",
+                      marginRight: "10px",
+                    }}
+                  ></div>
+                  <span>Excellence scientifique</span>
+                </li>
+                <li
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "5px",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      background: "#223F3A",
+                      marginRight: "10px",
+                    }}
+                  ></div>
+                  <span>
+                    Problématiques mondiales et compétitivité industrielle
+                    européenne
+                  </span>
+                </li>
+                <li
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: "5px",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      background: "#E4794A",
+                      marginRight: "10px",
+                    }}
+                  ></div>
+                  <span>
+                    Élargir la participation et renforcer l'espace européen de
+                    la recherche
+                  </span>
+                </li>
+              </ul>
+            }
+          />
+        </Col>
+        <Col>
+          <ChartWrapper
+            id="projectsTypesPiliers2Rates"
+            options={optionsSubventionsValuesEvaluatedRates(data)}
+            legend={null}
+          />
+        </Col>
+      </Row>
+    </Container>
+  );
+}
diff --git a/...l/projects-types/charts/projects-types-piliers-2/options-subventions_values_evaluated.tsx b/...l/projects-types/charts/projects-types-piliers-2/options-subventions_values_evaluated.tsx
@@ -0,0 +1,84 @@
+export default function Options(data) {
+  if (!data) return null;
+
+  const filteredData = data.filter((item) => item.country !== "all")[0].data;
+
+  const years = new Set();
+  filteredData.forEach((item) => years.add(item.year));
+
+  return {
+    chart: {
+      type: "line",
+      height: 500,
+      backgroundColor: "transparent",
+    },
+    title: { text: "" },
+    legend: { enabled: false },
+    credits: { enabled: false },
+
+    xAxis: {
+      categories: Array.from(years),
+      crosshair: true,
+      accessibility: {
+        description: "Years",
+      },
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "(M€)",
+      },
+    },
+    tooltip: {
+      valueSuffix: " (M€)",
+    },
+    plotOptions: {
+      line: {
+        dataLabels: {
+          enabled: true,
+          formatter: function (this: Highcharts.TooltipFormatterContextObject) {
+            return (this.y as number).toFixed(1);
+          },
+        },
+      },
+    },
+    series: [
+      {
+        name: "Europe plus innovante",
+        data: filteredData
+          .filter((item) => item.pilier_name_fr === "Europe plus innovante")
+          .map((item) => item.total_evaluated / 1000000),
+        color: "#A558A0",
+      },
+      {
+        name: "Excellence scientifique",
+        data: filteredData
+          .filter((item) => item.pilier_name_fr === "Excellence scientifique")
+          .map((item) => item.total_evaluated / 1000000),
+        color: "#21AB8E",
+      },
+      {
+        name: "Problématiques mondiales et compétitivité industrielle européenne",
+        data: filteredData
+          .filter(
+            (item) =>
+              item.pilier_name_fr ===
+              "Problématiques mondiales et compétitivité industrielle européenne"
+          )
+          .map((item) => item.total_evaluated / 1000000),
+        color: "#223F3A",
+      },
+      {
+        name: "Élargir la participation et renforcer l'espace européen de la recherche",
+        data: filteredData
+          .filter(
+            (item) =>
+              item.pilier_name_fr ===
+              "Élargir la participation et renforcer l'espace européen de la recherche"
+          )
+          .map((item) => item.total_evaluated / 1000000),
+        color: "#E4794A",
+      },
+    ],
+  };
+}
diff --git a/...ects-types/charts/projects-types-piliers-2/options-subventions_values_evaluated_rates.tsx b/...ects-types/charts/projects-types-piliers-2/options-subventions_values_evaluated_rates.tsx
@@ -0,0 +1,121 @@
+export default function Options(data) {
+  if (!data) return null;
+
+  const filteredDataCountry = data.filter((item) => item.country !== "all")[0]
+    .data;
+  const filteredDataAll = data.filter((item) => item.country === "all")[0].data;
+
+  const years = new Set();
+  filteredDataCountry.forEach((item) => years.add(item.year));
+
+  return {
+    chart: {
+      type: "line",
+      height: 500,
+      backgroundColor: "transparent",
+    },
+    title: { text: "" },
+    legend: { enabled: false },
+    credits: { enabled: false },
+
+    xAxis: {
+      categories: Array.from(years),
+      crosshair: true,
+      accessibility: {
+        description: "Years",
+      },
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "(%)",
+      },
+    },
+    tooltip: {
+      valueSuffix: " (M€)",
+    },
+    plotOptions: {
+      line: {
+        dataLabels: {
+          enabled: true,
+          formatter: function (this: Highcharts.TooltipFormatterContextObject) {
+            return (this.y as number).toFixed(1) + " %";
+          },
+        },
+      },
+    },
+    series: [
+      {
+        name: "Europe plus innovante",
+        data: filteredDataCountry
+          .filter((item) => item.pilier_name_fr === "Europe plus innovante")
+          .map(
+            (item) =>
+              Math.round(
+                ((item.total_evaluated * 100) /
+                  filteredDataAll.find(
+                    (itemAll) =>
+                      itemAll.year === item.year &&
+                      itemAll.pilier_name_fr === item.pilier_name_fr
+                  ).total_evaluated) *
+                  10
+              ) / 10
+          ),
+        color: "#A558A0",
+      },
+      {
+        name: "Excellence scientifique",
+        data: filteredDataCountry
+          .filter((item) => item.pilier_name_fr === "Excellence scientifique")
+          .map(
+            (item) =>
+              (item.total_evaluated * 100) /
+              filteredDataAll.find(
+                (itemAll) =>
+                  itemAll.year === item.year &&
+                  itemAll.pilier_name_fr === item.pilier_name_fr
+              ).total_evaluated
+          ),
+        color: "#21AB8E",
+      },
+      {
+        name: "Problématiques mondiales et compétitivité industrielle européenne",
+        data: filteredDataCountry
+          .filter(
+            (item) =>
+              item.pilier_name_fr ===
+              "Problématiques mondiales et compétitivité industrielle européenne"
+          )
+          .map(
+            (item) =>
+              (item.total_evaluated * 100) /
+              filteredDataAll.find(
+                (itemAll) =>
+                  itemAll.year === item.year &&
+                  itemAll.pilier_name_fr === item.pilier_name_fr
+              ).total_evaluated
+          ),
+        color: "#223F3A",
+      },
+      {
+        name: "Élargir la participation et renforcer l'espace européen de la recherche",
+        data: filteredDataCountry
+          .filter(
+            (item) =>
+              item.pilier_name_fr ===
+              "Élargir la participation et renforcer l'espace européen de la recherche"
+          )
+          .map(
+            (item) =>
+              (item.total_evaluated * 100) /
+              filteredDataAll.find(
+                (itemAll) =>
+                  itemAll.year === item.year &&
+                  itemAll.pilier_name_fr === item.pilier_name_fr
+              ).total_evaluated
+          ),
+        color: "#E4794A",
+      },
+    ],
+  };
+}
diff --git a/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-2/query.tsx b/...rojects/components/pages/general/projects-types/charts/projects-types-piliers-2/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-objectives-and-projects-types-piliers-subventions-2`;
+  if (params !== "") {
+    url = `${VITE_APP_SERVER_URL}/european-projects/general-objectives-and-projects-types-piliers-subventions-2?${params}`;
+  }
+
+  return fetch(url).then((response) => response.json());
+}