feat(fundings): Add tab "evolution"

Author: annelhote

…p/charts/overview-by-structure/index.tsx …ements-par-aap/charts/overview/index.tsxclient/src/boards/financements-par-aap/charts/overview-by-structure/index.tsx renamed to client/src/boards/financements-par-aap/charts/overview/index.tsx client/src/boards/financements-par-aap/charts/overview-by-structure/index.tsx renamed to client/src/boards/financements-par-aap/charts/overview/index.tsx

@@ -3,22 +3,23 @@ import { useSearchParams } from "react-router-dom";
 
 import DefaultSkeleton from "../../../../components/charts-skeletons/default.tsx";
 import { useChartColor } from "../../../../hooks/useChartColor.tsx";
-import { getI18nLabel } from "../../../../utils";
-import ChartWrapperFundings from "../../components/chart-wrapper-fundings";
-import { formatCompactNumber, funders, getCssColor, getEsQuery, getYearRangeLabel, pattern } from "../../utils.ts";
+import { getI18nLabel } from "../../../../utils.tsx";
+import ChartWrapperFundings from "../../components/chart-wrapper-fundings/index.tsx";
 import i18n from "../../i18n.json";
+import { formatCompactNumber, funders, getCssColor, getEsQuery, getYearRangeLabel, pattern } from "../../utils.ts";
 
 const { VITE_APP_ES_INDEX_PARTICIPATIONS, VITE_APP_SERVER_URL } = import.meta.env;
 
-export default function OverviewByStructure({ name }: { name: string | undefined }) {
+export default function Overview({ name }: { name: string | undefined }) {
   const [searchParams] = useSearchParams()
+  const region = searchParams.get("region")
   const structure = searchParams.get("structure")
   const yearMax = searchParams.get("yearMax")
   const yearMin = searchParams.get("yearMin")
   const color = useChartColor()
 
   const body = {
-    ...getEsQuery({ structures: [structure], yearMax, yearMin }),
+    ...getEsQuery({ regions: [region], structures: [structure], yearMax, yearMin }),
     aggregations: {
       by_project_type: {
         terms: {
@@ -44,7 +45,7 @@ export default function OverviewByStructure({ name }: { name: string | undefined
   };
 
   const { data, isLoading } = useQuery({
-    queryKey: ["fundings-overview-by-structure", structure, yearMax, yearMin],
+    queryKey: ["fundings-overview", region, structure, yearMax, yearMin],
     queryFn: () =>
       fetch(`${VITE_APP_SERVER_URL}/elasticsearch?index=${VITE_APP_ES_INDEX_PARTICIPATIONS}`, {
         body: JSON.stringify(body),
@@ -69,8 +70,8 @@ export default function OverviewByStructure({ name }: { name: string | undefined
 
   const config = {
     comment: { "fr": <>Ce graphique met en regard le volume de projets et les financements perçus associés : la largeur des barres représente le nombre de projets, tandis que leur hauteur correspond au financement perçu. Le type de participation est distingué, en pointillé quand l'établissement est coordinateur, en couleur simple s'il est partenaire non-coordinateur. Le financement perçu approxime la part réelle allouée à chaque établissement partenaire d’un projet (en assimilant consommation et subvention pour le PIA). </> },
-    id: "overviewByStructure",
-    integrationURL: `/integration?chart_id=overviewByStructure&${searchParams.toString()}`,
+    id: "overview",
+    integrationURL: `/integration?chart_id=overview&${searchParams.toString()}`,
     title: `Structure du financement : nombre de projets et financements perçus associés pour les projets auxquels participe ${structure ? "l'établissement" : "la région"} (${name}) ${getYearRangeLabel({ yearMax, yearMin })}`,
   };
 
@@ -134,7 +135,7 @@ export default function OverviewByStructure({ name }: { name: string | undefined
   };
 
   return (
-    <div className={`chart-container chart-container--${color}`} id="overview-by-structure">
+    <div className={`chart-container chart-container--${color}`} id="overview">
       {isLoading ? <DefaultSkeleton height="600px" /> : <ChartWrapperFundings config={config} options={options} />}
     </div>
   );

client/src/boards/financements-par-aap/charts/projects-by-funder/index.tsx

@@ -68,7 +68,7 @@ export default function ProjectsByFunder({ name }: { name: string | undefined })
 
 
   const { data, isLoading } = useQuery({
-    queryKey: ["fundings-projects-by-structure", region, structure, yearMax, yearMin],
+    queryKey: ["fundings-projects-by-funder", region, structure, yearMax, yearMin],
     queryFn: () =>
       fetch(`${VITE_APP_SERVER_URL}/elasticsearch?index=${VITE_APP_ES_INDEX_PARTICIPATIONS}`, {
         body: JSON.stringify(body),
@@ -175,8 +175,8 @@ export default function ProjectsByFunder({ name }: { name: string | undefined })
 
   const config = {
     comment: { "fr": <>Ce graphique indique, par financeur, le nombre, les financements globaux et les financements perçus des projets auxquels participe l'établissement {name}. Pour chaque financeur, la barre correspondante est subdivisée en deux en fonction du rôle de l'établissement : la partie pointillée quand l'établissement est coordinateur, en couleur simple quand il est partenaire non coordinateur. Le financement global représente le volume total de financements des projets auxquels participe l'établissement. Le financement perçu approxime la part réelle allouée à chaque établissement partenaire d’un projet (en assimilant consommation et subvention pour le PIA).</> },
-    id: "projectsByStructure",
-    integrationURL: `/integration?chart_id=projectsByStructure&${searchParams.toString()}`,
+    id: "projectsByFunder",
+    integrationURL: `/integration?chart_id=projectsByFunder&${searchParams.toString()}`,
     title,
   };
 
@@ -211,7 +211,7 @@ export default function ProjectsByFunder({ name }: { name: string | undefined })
   };
 
   return (
-    <div className={`chart-container chart-container--${color}`} id="projects-by-structure">
+    <div className={`chart-container chart-container--${color}`} id="projects-by-funder">
       <Title as="h2" look="h6">
         {title}
       </Title>

…rojects-over-time-by-structure/index.tsx …-aap/charts/projects-over-time/index.tsxclient/src/boards/financements-par-aap/pages/structures/charts/projects-over-time-by-structure/index.tsx renamed to client/src/boards/financements-par-aap/charts/projects-over-time/index.tsx client/src/boards/financements-par-aap/pages/structures/charts/projects-over-time-by-structure/index.tsx renamed to client/src/boards/financements-par-aap/charts/projects-over-time/index.tsx

@@ -1,27 +1,28 @@
 import { Title } from "@dataesr/dsfr-plus";
 import { useQuery } from "@tanstack/react-query";
+import type HighchartsInstance from "highcharts/es-modules/masters/highcharts.src.js";
 import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import type HighchartsInstance from "highcharts/es-modules/masters/highcharts.src.js";
 
-import DefaultSkeleton from "../../../../../../components/charts-skeletons/default.tsx";
-import { useChartColor } from "../../../../../../hooks/useChartColor.tsx";
-import { getI18nLabel } from "../../../../../../utils";
-import ChartWrapperFundings from "../../../../components/chart-wrapper-fundings";
-import SegmentedControl from "../../../../components/segmented-control";
-import i18n from "../../../../i18n.json";
-import { formatCompactNumber, funders, getCssColor, getEsQuery, pattern, years } from "../../../../utils.ts";
+import DefaultSkeleton from "../../../../components/charts-skeletons/default.tsx";
+import { useChartColor } from "../../../../hooks/useChartColor.tsx";
+import { getI18nLabel } from "../../../../utils";
+import ChartWrapperFundings from "../../components/chart-wrapper-fundings";
+import SegmentedControl from "../../components/segmented-control";
+import i18n from "../../i18n.json";
+import { formatCompactNumber, funders, getCssColor, getEsQuery, pattern, years } from "../../utils.ts";
 
 const { VITE_APP_ES_INDEX_PARTICIPATIONS, VITE_APP_SERVER_URL } = import.meta.env;
 
-export default function ProjectsOverTimeByStructure({ name }: { name: string | undefined }) {
-  const [selectedControl, setSelectedControl] = useState("projects");
-  const [searchParams] = useSearchParams();
-  const structure = searchParams.get("structure");
-  const color = useChartColor();
+export default function ProjectsOverTime({ name }: { name: string | undefined }) {
+  const [selectedControl, setSelectedControl] = useState("projects")
+  const [searchParams] = useSearchParams()
+  const region = searchParams.get("region")
+  const structure = searchParams.get("structure")
+  const color = useChartColor()
 
   const body = {
-    ...getEsQuery({ structures: [structure] }),
+    ...getEsQuery({ regions: [region], structures: [structure] }),
     aggregations: {
       by_project_type: {
         terms: {
@@ -72,7 +73,7 @@ export default function ProjectsOverTimeByStructure({ name }: { name: string | u
   };
 
   const { data, isLoading } = useQuery({
-    queryKey: ["funding-projects-over-time-by-structure", structure],
+    queryKey: ["funding-projects-over-time", region, structure],
     queryFn: () =>
       fetch(`${VITE_APP_SERVER_URL}/elasticsearch?index=${VITE_APP_ES_INDEX_PARTICIPATIONS}`, {
         body: JSON.stringify(body),
@@ -149,35 +150,35 @@ export default function ProjectsOverTimeByStructure({ name }: { name: string | u
   // If view by number of projects
   let axis = getI18nLabel(i18n, 'number_of_projects_funded');
   let series = seriesProject.reverse();
-  let title = `Evolution temporelle du nombre de projets auxquels participe l'établissement (${name})`;
+  let title = `Evolution temporelle du nombre de projets auxquels participe ${structure ? "l'établissement" : "la région"} (${name})`;
   let tooltip = function (this: any) {
-    return `<b>${this.y}</b> projets <b>${this.series.name}</b> en <b>${this.x}</b> auxquels prend part <b>${name}</b>`;
+    return `<b>${this.y}</b> projets <b>${this.series.name}</b> en <b>${this.x}</b> auxquels prend part ${structure ? "l'établissement" : "la région"} <b>${name}</b>`;
   };
   switch (selectedControl) {
     // If view by global amount
     case 'amount_global':
       axis = getI18nLabel(i18n, 'funding_total');
       series = seriesBudget.reverse();
-      title = `Evolution temporelle des financements globaux pour les projets auxquels participe l'établissement (${name})`;
+      title = `Evolution temporelle des financements globaux pour les projets auxquels participe ${structure ? "l'établissement" : "la région"} (${name})`;
       tooltip = function (this: any) {
-        return `<b>${formatCompactNumber(this.y)} €</b> ont été financés en <b>${this.x}</b> pour les projets <b>${this.series.name}</b> auxquels participe <b>${name}</b>`;
+        return `<b>${formatCompactNumber(this.y)} €</b> ont été financés en <b>${this.x}</b> pour les projets <b>${this.series.name}</b> auxquels participe ${structure ? "l'établissement" : "la région"} <b>${name}</b>`;
       };
       break;
     // If view by amount by structure
     case 'amount_by_structure':
       axis = getI18nLabel(i18n, 'funding_by_structure');
       series = seriesParticipation.reverse();
-      title = `Evolution temporelle des financements perçus pour les projets auxquels participe l'établissement (${name})`;
+      title = `Evolution temporelle des financements perçus pour les projets auxquels participe ${structure ? "l'établissement" : "la région"} (${name})`;
       tooltip = function (this: any) {
-        return `<b>${formatCompactNumber(this.y)} €</b> ont été perçus en <b>${this.x}</b> pour les projets <b>${this.series.name}</b> auxquels participe <b>${name}</b>`;
+        return `<b>${formatCompactNumber(this.y)} €</b> ont été perçus en <b>${this.x}</b> pour les projets <b>${this.series.name}</b> auxquels participe ${structure ? "l'établissement" : "la région"} <b>${name}</b>`;
       };
       break;
   };
 
   const config = {
     comment: { "fr": <>Ce graphique présente l’évolution temporelle du nombre de projets, des financements globaux et des financements perçus, ventilée par financeur, à travers des lignes empilées permettant d’apprécier la contribution relative de chacun dans le temps. Pour les financements européens, Horizon 2020 couvre la période 2014–2020, tandis que son successeur, Horizon Europe couvre 2021-2027. Le type de participation est distingué, en pointillé quand l'établissement est coordinateur, en couleur simple s'il est partenaire non-coordinateur. Le financement global représente le volume total de financements des projets auxquels participe l'établissement. Le financement perçu approxime la part réelle allouée à chaque établissement partenaire d’un projet (en assimilant consommation et subvention pour le PIA).</> },
-    id: "projectsOverTimeByStructure",
-    integrationURL: `/integration?chart_id=projectsOverTimeByStructure&${searchParams.toString()}`,
+    id: "projectsOverTime",
+    integrationURL: `/integration?chart_id=projectsOverTime&${searchParams.toString()}`,
     title,
   };
 
@@ -204,7 +205,7 @@ export default function ProjectsOverTimeByStructure({ name }: { name: string | u
   };
 
   return (
-    <div className={`chart-container chart-container--${color}`} id="projects-over-time-by-structure">
+    <div className={`chart-container chart-container--${color}`} id="projects-over-time">
       <Title as="h2" look="h6">
         {title}
       </Title>

client/src/boards/financements-par-aap/pages/region/displayRegion.tsx

@@ -15,9 +15,9 @@ import { years } from "../../utils";
 // import InstrumentsOverTimeForEurope from "./charts/instruments-over-time-for-europe";
 // import InternationalPartnersByStructure from "./charts/international-partners-by-structure";
 // import LaboratoriesByStructure from "./charts/laboratories-by-structure";
-import OverviewByStructure from "../../charts/overview-by-structure";
+import Overview from "../../charts/overview";
 import ProjectsByFunder from "../../charts/projects-by-funder";
-// import ProjectsOverTimeByStructure from "./charts/projects-over-time-by-structure";
+import ProjectsOverTime from "../../charts/projects-over-time";
 import Cards from "../../components/cards";
 // import ProjectsData from "./components/projects-data";
 
@@ -34,7 +34,7 @@ export default function DisplayRegion() {
   const sections = [
     { id: "apercu", label: "Aperçu" },
     { id: "financements", label: "Volume et répartition des financements" },
-    // { id: "evolution", label: "Evolution temporelle" },
+    { id: "evolution", label: "Evolution temporelle" },
     // { id: "partenaires", label: "Institutions partenaires" },
     // { id: "laboratoires", label: "Laboratoires" },
     // { id: "disciplines", label: "Disciplines" },
@@ -187,31 +187,29 @@ export default function DisplayRegion() {
                   </Row>
                   <Row gutters>
                     <Col>
-                      <OverviewByStructure name={region} />
+                      <Overview name={region} />
                     </Col>
                   </Row>
                 </>
               )}
-              {/*
               {(section === "evolution") && (
                 <Row gutters style={{ clear: "both" }}>
                   <Col>
-                    <ProjectsOverTimeByStructure name={name} />
+                    <ProjectsOverTime name={region} />
                   </Col>
                 </Row>
               )}
-              */}
               {/*
               {(section === "partenaires") && (
                 <>
                   <Row gutters style={{ clear: "both" }}>
                     <Col>
-                      <FrenchPartnersByStructure name={name} />
+                      <FrenchPartnersByStructure name={region} />
                     </Col>
                   </Row>
                   <Row gutters>
                     <Col>
-                      <InternationalPartnersByStructure name={name} />
+                      <InternationalPartnersByStructure name={region} />
                     </Col>
                   </Row>
                 </>
@@ -221,7 +219,7 @@ export default function DisplayRegion() {
               {(section === "laboratoires") && (
                 <Row gutters style={{ clear: "both" }}>
                   <Col>
-                    <LaboratoriesByStructure name={name} />
+                    <LaboratoriesByStructure name={region} />
                   </Col>
                 </Row>
               )}
@@ -231,12 +229,12 @@ export default function DisplayRegion() {
                 <>
                   <Row gutters style={{ clear: "both" }}>
                     <Col>
-                      <ClassificationsByStructure name={name} />
+                      <ClassificationsByStructure name={region} />
                     </Col>
                   </Row>
                   <Row gutters>
                     <Col>
-                      <Classifications2ByStructure name={name} />
+                      <Classifications2ByStructure name={region} />
                     </Col>
                   </Row>
                 </>
@@ -247,22 +245,22 @@ export default function DisplayRegion() {
                 <>
                   <Row gutters style={{ clear: "both" }}>
                     <Col>
-                      <InstrumentsForAnr name={name} />
+                      <InstrumentsForAnr name={region} />
                     </Col>
                   </Row>
                   <Row gutters>
                     <Col>
-                      <InstrumentsForEurope name={name} />
+                      <InstrumentsForEurope name={region} />
                     </Col>
                   </Row>
                   <Row gutters>
                     <Col>
-                      <InstrumentsOverTimeForAnr name={name} />
+                      <InstrumentsOverTimeForAnr name={region} />
                     </Col>
                   </Row>
                   <Row gutters>
                     <Col>
-                      <InstrumentsOverTimeForEurope name={name} />
+                      <InstrumentsOverTimeForEurope name={region} />
                     </Col>
                   </Row>
                 </>
@@ -273,7 +271,7 @@ export default function DisplayRegion() {
                 <>
                   <Row gutters style={{ clear: "both" }}>
                     <Col>
-                      <RegionsByStructure name={name} />
+                      <RegionsByStructure name={region} />
                     </Col>
                   </Row>
                 </>

client/src/boards/financements-par-aap/pages/structures/displayStructure.tsx

@@ -5,7 +5,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 
 import Select from "../../../../components/select";
 import { isInProduction } from "../../../../utils";
-import OverviewByStructure from "../../charts/overview-by-structure";
+import Overview from "../../charts/overview";
 import ProjectsByFunder from "../../charts/projects-by-funder";
 import Breadcrumb from "../../components/breadcrumb";
 import Cards from "../../components/cards";
@@ -229,7 +229,7 @@ export default function DisplayStructure() {
                   </Row>
                   <Row gutters>
                     <Col>
-                      <OverviewByStructure name={name} />
+                      <Overview name={name} />
                     </Col>
                   </Row>
                 </>