two charts in one

dataesr · Aug 6, 2024 · 52ab14a · 52ab14a
1 parent 9896f41
commit 52ab14a
Show file tree

Hide file tree

Showing 7 changed files with 405 additions and 2 deletions.
diff --git a/.../pages/general/projects-types/charts/projects-types-pillars-subsidies-requested/index.tsx b/.../pages/general/projects-types/charts/projects-types-pillars-subsidies-requested/index.tsx
@@ -0,0 +1,121 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router-dom";
+
+import Template from "./template";
+import { GetData } from "./query";
+import optionsValues from "./options-values";
+// import optionsSubventionsValuesEvaluatedRates from "./options-rates";
+
+import ChartWrapper from "../../../../../chart-wrapper";
+import { getDefaultParams } from "./utils";
+import { Container, Row, Col } from "@dataesr/dsfr-plus";
+
+export default function ProjectsTypesPillarsSubsidiesRequested() {
+  const [searchParams] = useSearchParams();
+  const params = getDefaultParams(searchParams);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["projects-types-pillars-subsidies-requested", params],
+    queryFn: () => GetData(params),
+  });
+
+  if (isLoading || !data) return <Template />;
+
+  return (
+    <Container fluid>
+      <Row>
+        <Col md={6}>
+          <ChartWrapper
+            id="projectsTypesPiliers3"
+            options={optionsValues(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="projectsTypesPiliers3Rates"
+            options={optionsSubventionsValuesEvaluatedRates(data)}
+            legend={null}
+          />
+        </Col> */}
+      </Row>
+    </Container>
+  );
+}
diff --git a/...eneral/projects-types/charts/projects-types-pillars-subsidies-requested/options-rates.tsx b/...eneral/projects-types/charts/projects-types-pillars-subsidies-requested/options-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_successful * 100) /
+                  filteredDataAll.find(
+                    (itemAll) =>
+                      itemAll.year === item.year &&
+                      itemAll.pilier_name_fr === item.pilier_name_fr
+                  ).total_successful) *
+                  10
+              ) / 10
+          ),
+        color: "#A558A0",
+      },
+      {
+        name: "Excellence scientifique",
+        data: filteredDataCountry
+          .filter((item) => item.pilier_name_fr === "Excellence scientifique")
+          .map(
+            (item) =>
+              (item.total_successful * 100) /
+              filteredDataAll.find(
+                (itemAll) =>
+                  itemAll.year === item.year &&
+                  itemAll.pilier_name_fr === item.pilier_name_fr
+              ).total_successful
+          ),
+        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_successful * 100) /
+              filteredDataAll.find(
+                (itemAll) =>
+                  itemAll.year === item.year &&
+                  itemAll.pilier_name_fr === item.pilier_name_fr
+              ).total_successful
+          ),
+        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_successful * 100) /
+              filteredDataAll.find(
+                (itemAll) =>
+                  itemAll.year === item.year &&
+                  itemAll.pilier_name_fr === item.pilier_name_fr
+              ).total_successful
+          ),
+        color: "#E4794A",
+      },
+    ],
+  };
+}
diff --git a/...neral/projects-types/charts/projects-types-pillars-subsidies-requested/options-values.tsx b/...neral/projects-types/charts/projects-types-pillars-subsidies-requested/options-values.tsx
@@ -0,0 +1,137 @@
+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: [
+      {
+        type: "category",
+        categories: Array.from(years),
+        width: "48%",
+        title: {
+          text: "Projets évalués",
+        },
+      },
+      {
+        type: "category",
+        categories: Array.from(years),
+        offset: 0,
+        left: "50%",
+        width: "48%",
+        title: {
+          text: "Projets lauréats",
+        },
+      },
+    ],
+    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",
+      },
+
+      {
+        name: "Europe plus innovante",
+        xAxis: 1,
+        data: filteredData
+          .filter((item) => item.pilier_name_fr === "Europe plus innovante")
+          .map((item) => item.total_successful / 1000000),
+        color: "#A558A0",
+      },
+      {
+        name: "Excellence scientifique",
+        xAxis: 1,
+        data: filteredData
+          .filter((item) => item.pilier_name_fr === "Excellence scientifique")
+          .map((item) => item.total_successful / 1000000),
+        color: "#21AB8E",
+      },
+      {
+        name: "Problématiques mondiales et compétitivité industrielle européenne",
+        xAxis: 1,
+        data: filteredData
+          .filter(
+            (item) =>
+              item.pilier_name_fr ===
+              "Problématiques mondiales et compétitivité industrielle européenne"
+          )
+          .map((item) => item.total_successful / 1000000),
+        color: "#223F3A",
+      },
+      {
+        name: "Élargir la participation et renforcer l'espace européen de la recherche",
+        xAxis: 1,
+        data: filteredData
+          .filter(
+            (item) =>
+              item.pilier_name_fr ===
+              "Élargir la participation et renforcer l'espace européen de la recherche"
+          )
+          .map((item) => item.total_successful / 1000000),
+        color: "#E4794A",
+      },
+    ],
+  };
+}
diff --git a/.../pages/general/projects-types/charts/projects-types-pillars-subsidies-requested/query.tsx b/.../pages/general/projects-types/charts/projects-types-pillars-subsidies-requested/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());
+}