init filters

client/src/pages/european-projects/components/custom-breadcrumb/index.tsx

@@ -92,13 +92,13 @@ export default function CustomBreadcrumb({ pageKey }) {
   const parents = currentPage.link.split('/').slice(1, -1);
 
   return (
-    <Breadcrumb>
+    <Breadcrumb className="fr-m-0 fr-mt-1w">
       <Link href="/">Accueil</Link>
       {
         parents.map((parent, index) => {
           return <Link key={index} href={`${pages[parent].link}?${params}`}>{pages[parent].label}</Link>
-        }
-        )}
+        })
+      }
       <Link>
         <strong>{currentPage.label}</strong>
       </Link>

client/src/pages/european-projects/components/filters/index.tsx

@@ -0,0 +1,20 @@
+import { Tag, TagGroup } from '@dataesr/dsfr-plus';
+import { useSearchParams } from 'react-router-dom';
+import { getFilterLabel } from '../../utils';
+
+export default function Filters() {
+  const [searchParams] = useSearchParams();
+  const params = [...searchParams];
+
+  return (
+    <TagGroup>
+      {
+        params.map(([key, value]) => (
+          <Tag key={key} color='purple-glycine'>
+            {getFilterLabel(key)} : {value}
+          </Tag>
+        ))
+      }
+    </TagGroup>
+  );
+}

client/src/pages/european-projects/components/pages/analysis/overview/charts/horizon-2020-participation/index.tsx

@@ -10,10 +10,9 @@ import ChartWrapper from "../../../../../chart-wrapper";
 export default function Horizon2020Participation() {
   const [searchParams] = useSearchParams();
   const params = [...searchParams].map(([key, value]) => `${key}=${value}`).join('&');
-  const iso2 = searchParams.get('country_code') || 'FR';
 
   const { data, isLoading } = useQuery({
-    queryKey: ["european-projects", params],
+    queryKey: ["GetHorizon2020Participation", params],
     queryFn: () => GetHorizon2020Participation(params)
   })
 
@@ -41,7 +40,7 @@ export default function Horizon2020Participation() {
   return (
     <ChartWrapper
       id="Horizon2020Participation"
-      options={options(data["funding_programme"].filter((item) => item.country_code === iso2))}
+      options={options(data)}
       legend={(
         <ul className="legend">
           {pillierLegend.map((item) => (

client/src/pages/european-projects/components/pages/analysis/overview/charts/horizon-2020-participation/query.tsx

@@ -1,9 +1,9 @@
 const { VITE_APP_SERVER_URL } = import.meta.env;
 
 export async function GetHorizon2020Participation(params: string) {
-  let url = `${VITE_APP_SERVER_URL}/european-projects`;
+  let url = `${VITE_APP_SERVER_URL}/european-projects/funding_programme`;
   if (params !== '') {
-    url = `${VITE_APP_SERVER_URL}/european-projects?${params}`;
+    url = `${VITE_APP_SERVER_URL}/european-projects/funding_programme?${params}`;
   }
 
   return fetch(url).then((response) => (response.json()))

client/src/pages/european-projects/components/side-menu.tsx

@@ -2,7 +2,7 @@ import { SideMenu, Link, Container, Row, Col } from '@dataesr/dsfr-plus';
 import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
 import './styles.scss';
 
-export function CustomSideMenu() {
+export default function CustomSideMenu() {
   const { pathname } = useLocation();
   const [searchParams] = useSearchParams();
 

client/src/pages/european-projects/index.tsx

@@ -1,7 +1,8 @@
 import { useLocation } from "react-router-dom";
 import { Container, Row, Col } from "@dataesr/dsfr-plus";
 import CustomBreadcrumb from "./components/custom-breadcrumb";
-import { CustomSideMenu } from "./components/side-menu";
+import CustomSideMenu from "./components/side-menu";
+import Filters from "./components/filters";
 
 export default function Main() {
   const { pathname } = useLocation();
@@ -12,6 +13,7 @@ export default function Main() {
         <Row>
           <Col className="fr-ml-1w">
             <CustomBreadcrumb pageKey={pathname.split('/').slice(-1)[0]} />
+            <Filters />
           </Col>
         </Row>
       </Container>

client/src/pages/european-projects/utils.ts

@@ -6,4 +6,14 @@ export function getConfig(id) {
     throw new Error(`No config found for chart id ${id}`);
   }
   return chartConfig;
+}
+
+export function getFilterLabel(filterId) {
+  const filters = {
+    "country_code": "Pays",
+    // "theme": "Thème",
+    // "chart_id": "Graphique"
+  };
+
+  return filters[filterId] || filterId;
 }

server/src/routes/tableaux/european-projects/index.js

@@ -12,8 +12,6 @@ import evol_all_pc_project_SIGNED from './data/evol_all_pc_project_SIGNED.json'
 import funding_participant_share_actions from './data/funding_participant_share_actions.json' assert { type: "json" };
 import funding_programme from './data/funding_programme.json' assert { type: "json" };
 
-
-
 const router = new express.Router();
 
 router.route('/european-projects')
@@ -49,4 +47,13 @@ router.route('/european-projects')
         res.json(allData);
     });
 
+router.route('/european-projects/funding_programme')
+    .get((req, res) => {
+        const iso2 = req.query.country_code || 'FR';
+        console.log(iso2);
+        res.json(funding_programme.filter((item) =>
+            item.country_code.toLowerCase() === iso2.toLowerCase())
+        );
+    });
+
 export default router;