add highlight integration code and copy button

client/package.json

@@ -22,9 +22,11 @@
     "js-cookie": "^3.0.5",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.18.0",
+    "react-syntax-highlighter": "^15.5.0",
     "remixicon": "^3.5.0",
     "sass": "^1.62.1"
   },

client/src/pages/european-projects/components/chart-wrapper/index.tsx

@@ -1,13 +1,22 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import { getConfig } from "../../utils";
-import { Text, Title } from "@dataesr/dsfr-plus";
+import { Button, Col, Modal, ModalContent, ModalTitle, Row, Text, Title } from "@dataesr/dsfr-plus";
+
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import "./styles.scss";
+import { useState } from "react";
+
 
 export default function ChartWrapper({ id, options, legend }) {
+  const [isOpen, setIsOpen] = useState(false);
   const graphConfig = getConfig(id);
 
+  const integrationCode = `<iframe \ntitle="${graphConfig.title}" \nwidth="800" \nheight="600" \nsrc="https://barometredelascienceouverte.esr.gouv.fr/integration/fr/publi.publishers.type-ouverture.chart-repartition-modeles"></iframe>`;
+
   return (
     <>
       <Title as="h2" look="h4" className="fr-mb-0">{graphConfig.title}</Title>
@@ -22,15 +31,49 @@ export default function ChartWrapper({ id, options, legend }) {
       </figure>
       <div className="graph-footer">
         {legend}
-        <div>
-          <p className="share">
-            Partage
-          </p>
+        <div className="share">
+          <div className="title">
+            Partager
+          </div>
+          <Button
+            color="beige-gris-galet"
+            icon="twitter-x-fill"
+            title="Twitter-X"
+            variant="text"
+          />
+          <Button title="Linkedin" icon="linkedin-box-fill" variant="text" color="beige-gris-galet" />
+          <Button title="Linkedin" icon="facebook-circle-fill" variant="text" color="beige-gris-galet" />
+          <br />
+          <Button
+            color="beige-gris-galet"
+            icon="code-s-slash-line"
+            onClick={() => setIsOpen(true)}
+            title="Intégration"
+            variant="text"
+          >
+            Intégrer
+          </Button>
         </div>
       </div>
       <Text className="description">
         {graphConfig.description}
       </Text>
+      <Modal isOpen={isOpen} hide={() => setIsOpen(false)}>
+        <ModalTitle>Intégrer ce graphique dans un autre site</ModalTitle>
+        <ModalContent>
+          <Row>
+            <Col className="text-right">
+              <CopyToClipboard text={integrationCode}>
+                <Button size="sm" icon="clipboard-line" color="beige-gris-galet">Copier</Button>
+              </CopyToClipboard>
+            </Col>
+          </Row>
+
+          <SyntaxHighlighter language="javascript" style={a11yDark}>
+            {integrationCode}
+          </SyntaxHighlighter>
+        </ModalContent>
+      </Modal>
     </>
   );
 }

client/src/pages/european-projects/components/chart-wrapper/styles.scss

@@ -8,6 +8,14 @@
   font-size: 12px;
   color: #333;
 
+  .share {
+    .title {
+      text-align: center;
+      border-bottom: 1px solid #ddd;
+    }
+
+    border: 1px solid #ddd;
+  }
 }
 
 .sources {

client/src/pages/european-projects/components/styles.scss

@@ -2,4 +2,8 @@
   .fr-sidemenu__inner {
     padding-top: 3rem;
   }
+}
+
+.text-right {
+  text-align: right;
 }