add integration graph

client/src/pages/european-projects/charts-config.json

@@ -4,6 +4,7 @@
     "title": "Objectifs financés par Horizon 2020",
     "description": "Ad duis occaecat voluptate deserunt tempor enim nulla officia.",
     "source": "Commission européenne, Cordis",
-    "sourceURL": "https://cordis.europa.eu/"
+    "sourceURL": "https://cordis.europa.eu/",
+    "integrationURL": "./../european-projects/components/pages/analysis/overview/charts/horizon-2020-participation"
   }
 ]

client/src/pages/integration/index.tsx

@@ -1,20 +1,27 @@
+import React, { Suspense } from "react";
 import { useSearchParams } from "react-router-dom";
+
 import Template from "./template";
 
+import { getConfig } from "../european-projects/utils";
+
 export default function Integration() {
   const [searchParams] = useSearchParams();
-  // const params = [...searchParams].map(([key, value]) => `${key}=${value}`).join('&');
-  const iso2 = searchParams.get('country_code') || 'FR';
   const chartId = searchParams.get('chart_id') || null;
   const theme = searchParams.get('theme') || 'light';
-
   document.documentElement.setAttribute('data-fr-theme', theme);
 
   if (!chartId) return <Template />;
 
+  const config = getConfig(chartId);
+  if (!config) {
+    throw new Error(`No config found for chart id ${chartId}`);
+  }
+
+  const LazyComponent = React.lazy(() => import(config.integrationURL));
   return (
-    <>
-      graph {iso2}
-    </>
+    <Suspense fallback={<div>Loading...</div>}>
+      <LazyComponent />
+    </Suspense>
   );
 }