feat(graph): Add graph for survey

dataesr · Feb 8, 2024 · a7ff6c6 · a7ff6c6
1 parent 41bb0fc
commit a7ff6c6
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 60 deletions.
diff --git a/src/App.js b/src/App.js
@@ -252,40 +252,40 @@ function App() {
               path={urls.communication[key]}
             />
           ))}
-          {Object.keys(urls.variations).map((key) => (
+          {Object.keys(urls.policy).map((key) => (
             <Route
               element={(
                 <PageTracker>
-                  <Variations />
+                  <Policy />
                 </PageTracker>
               )}
               exact
               key={key}
-              path={urls.variations[key]}
+              path={urls.policy[key]}
             />
           ))}
-          {Object.keys(urls.howto).map((key) => (
+          {Object.keys(urls.variations).map((key) => (
             <Route
               element={(
                 <PageTracker>
-                  <HowTo />
+                  <Variations />
                 </PageTracker>
               )}
               exact
               key={key}
-              path={urls.howto[key]}
+              path={urls.variations[key]}
             />
           ))}
-          {Object.keys(urls.policy).map((key) => (
+          {Object.keys(urls.howto).map((key) => (
             <Route
               element={(
                 <PageTracker>
-                  <Policy />
+                  <HowTo />
                 </PageTracker>
               )}
               exact
               key={key}
-              path={urls.policy[key]}
+              path={urls.howto[key]}
             />
           ))}
           {Object.keys(urls.opendata).map((key) => (

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -531,6 +531,15 @@ function Header() {
                 defaultMessage: 'Les établissements',
               })}
             >
+              <NavSubItem
+                current={path === urls.policy[lang]}
+                title={intl.formatMessage({
+                  id: 'app.header.nav.declinaisons.policy',
+                  defaultMessage:
+                    'Politique de science ouverte des établissements',
+                })}
+                asLink={<RouterLink to={urls.policy[lang] + search} />}
+              />
               <NavSubItem
                 current={path === urls.variations[lang]}
                 title={intl.formatMessage({
@@ -547,15 +556,6 @@ function Header() {
                 })}
                 asLink={<RouterLink to={urls.howto[lang] + search} />}
               />
-              <NavSubItem
-                current={path === urls.policy[lang]}
-                title={intl.formatMessage({
-                  id: 'app.header.nav.declinaisons.policy',
-                  defaultMessage:
-                    'Politique de science ouverte des établissements',
-                })}
-                asLink={<RouterLink to={urls.policy[lang] + search} />}
-              />
             </NavItem>
             <NavItem
               current={path.startsWith(

diff --git a/src/pages/Declinaisons/Policy/index.js b/src/pages/Declinaisons/Policy/index.js
@@ -1,20 +1,81 @@
 import { Col, Container, Row } from '@dataesr/react-dsfr';
-import { FormattedMessage } from 'react-intl';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import { useEffect, useRef, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 
-const Policy = () => (
-  <div className='policy no-arrow-link'>
-    <Container>
-      <section className='color-blue-dark-125 content py-48'>
-        <Row gutters>
-          <Col n='12'>
-            <h2>
-              <FormattedMessage id='app.header.nav.declinaisons.policy' />
-            </h2>
-          </Col>
-        </Row>
-      </section>
-    </Container>
-  </div>
-);
+import GraphComments from '../../../components/Charts/graph-comments';
+import WrapperChart from '../../../components/WrapperChart';
+import customComments from '../../../utils/chartComments';
+import { chartOptions } from '../../../utils/chartOptions';
+
+const Policy = () => {
+  const [chartComments, setChartComments] = useState('');
+
+  const intl = useIntl();
+  const chartRef = useRef();
+
+  const hasComments = true;
+  const id = 'other.institution.open-science-policy';
+  const idWithDomain = 'other.institution.open-science-policy';
+  const optionsGraph = chartOptions[id].getOptions(idWithDomain, intl, [
+    {
+      data: [
+        { y: 1, y_percent: 3 },
+        { y: 1, y_percent: 3 },
+        { y: 3, y_percent: 9 },
+        { y: 9, y_percent: 27 },
+        { y: 15, y_percent: 52 },
+        { y: 22, y_percent: 120 },
+        { y: 30, y_percent: 500 },
+        { y: 32, y_percent: 500 },
+        { y: 37, y_percent: 505 },
+      ],
+    },
+  ]);
+
+  useEffect(() => {
+    setChartComments(customComments({ comments: {} }, idWithDomain, intl));
+  }, [idWithDomain, intl]);
+
+  return (
+    <div className='policy no-arrow-link'>
+      <Container>
+        <section className='color-blue-dark-125 content py-48'>
+          <Row gutters>
+            <Col n='12'>
+              <h2>
+                <FormattedMessage id='app.header.nav.declinaisons.policy' />
+              </h2>
+            </Col>
+          </Row>
+          <Row>
+            <Col n='12'>
+              <WrapperChart
+                chartRef={chartRef}
+                domain=''
+                hasComments={false}
+                hasFooter={false}
+                id='other.institution.open-science-policy'
+                isError={false}
+                isLoading={false}
+              >
+                <HighchartsReact
+                  highcharts={Highcharts}
+                  id={idWithDomain}
+                  options={optionsGraph}
+                  ref={chartRef}
+                />
+                {hasComments && chartComments && (
+                  <GraphComments comments={chartComments} hasFooter />
+                )}
+              </WrapperChart>
+            </Col>
+          </Row>
+        </section>
+      </Container>
+    </div>
+  );
+};
 
 export default Policy;
diff --git a/src/style/colours.module.scss b/src/style/colours.module.scss
@@ -138,37 +138,40 @@
   /**
     Surcharge BSO
   */
+  --acces-ouvert: #62b93a;
+  --affiliations-etablissements-50: #cdc5e4;
+  --affiliations-etablissements-75: #a798d1;
+  --affiliations-etablissements-100: #846dc5;
+  --affiliations-etablissements-125: #5b4697;
+  --affiliations-etablissements-150: #351c7d;
+  --apres: #cf7728;
+  --black: #000;
+  --diamond: #5cdce5;
+  --duree: #9c807e;
+  --hybrid: #725d3e;
   --lead-sponsor-highlight: #ef47ca;
+  --lead-sponsor-privee: #5c356f;
+  --lead-sponsor-public: #c26eb0;
+  --negatif: #a20404;
+  --ouvrir-la-science-blue: #5b29c8;
+  --ouvrir-la-science-green: #5cf1ce;
+  --ouvrir-la-science-yellow: #f9ee7a;
+  --patient-25: #fbe9f4;
   --patient-50: #fbdff0;
   --patient-75: #f7b4dc;
-  --negatif: #a20404;
-  --affiliations-etablissements-150: #351c7d;
-  --affiliations-etablissements-125: #5b4697;
-  --affiliations-etablissements-100: #846dc5;
-  --affiliations-etablissements-75: #a798d1;
-  --affiliations-etablissements-50: #cdc5e4;
-  --lead-sponsor-public: #c26eb0;
-  --lead-sponsor-privee: #5c356f;
   --patient-100: #f279c2;
-  --patient-25: #fbe9f4;
   --patient-125: #a83a79;
-  --resultat-ou-publication: #f0cda4;
-  --resultat-et-publication: #e49a43;
-  --resultat-100: #cbcf33;
-  --resultat-75: #e0e287;
-  --resultat-50: #f1f2c2;
-  --resultat-25: #fbfceb;
-  --publication-100: #d06088;
-  --publication-75: #d487a2;
-  --publication-50: #e8b6c8;
   --publication-25: #f5d9e3;
-  --acces-ouvert: #62b93a;
-  --diamond: #5cdce5;
-  --hybrid: #725d3e;
-  --apres: #cf7728;
-  --duree: #9c807e;
-  --white: #fff;
-  --black: #000;
-  --thesesfr: #3fc5fc;
+  --publication-50: #e8b6c8;
+  --publication-75: #d487a2;
+  --publication-100: #d06088;
+  --resultat-25: #fbfceb;
+  --resultat-50: #f1f2c2;
+  --resultat-75: #e0e287;
+  --resultat-100: #cbcf33;
+  --resultat-et-publication: #e49a43;
+  --resultat-ou-publication: #f0cda4;
   --theseshal: #01c7bb;
+  --thesesfr: #3fc5fc;
+  --white: #fff;
 }
diff --git a/src/translations/en.json b/src/translations/en.json
@@ -900,6 +900,9 @@
   "app.national-publi.others.retractions.chart-by-reason.yAxis": "Reason of retraction",
   "app.national-publi.others.retractions.chart-by-reason.title": "Reason of retraction for French publications",
   "app.national-publi.others.retractions.chart-by-reason.tooltip": "<b>{point.y} retracted publications</b> for reason {point.reason}",
+  "app.national-other.institution.open-science-policy.title": "Number of institutions with an open science policy",
+  "other.institution.open-science-policy.tooltip": "In {point.x}, <b>{point.y}</b> institution(s) had an open science policy,<br>ie. <b>{point.y_percent}%</b> des respondents.",
+  "other.institution.open-science-policy.comments": "This gaph shows the evolution of the number of institutions declaring having an open science policy. In green is the PNSO1 (National Plan for Open Science) period between 2018 and 2021, and in yellow is the PNSO2 period between 2021 and 2024. These data come from a survey carried out in early 2024.",
   "app.navigation.objet-recherche": "Research object navigation",
   "app.methodologie.publication": "Methodology for monitoring open access to publications",
   "app.methodologie.publication.description-fr": "Methodology in French (pdf)",

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -1094,6 +1094,9 @@
   "app.national-publi.others.retractions.chart-by-reason.yAxis": "Raison du retrait",
   "app.national-publi.others.retractions.chart-by-reason.title": "Raison du retrait des publications françaises",
   "app.national-publi.others.retractions.chart-by-reason.tooltip": "<b>{point.y} publications retirées</b> pour raison {point.reason}",
+  "app.national-other.institution.open-science-policy.title": "Evolution du nombre d'établissements qui se sont dotés d'une politique de science ouverte",
+  "other.institution.open-science-policy.tooltip": "En {point.x}, <b>{point.y}</b> établissement(s) avai(en)t une politique de science ouverte,<br>soit <b>{point.y_percent} %</b> des répondants.",
+  "other.institution.open-science-policy.comments": "Ce gaphique présente l'évolution du nombre d'établissements déclarant avoir une politique de science ouverte. On retrouve en vert la période du PNSO1 (Plan National pour la Science Ouverte) entre 2018 et 2021 et en jaune le PNSO2 entre 2021 et 2024. Ces données sont issues d'une enquête réalisée début 2024.",
   "app.navigation.objet-recherche": "Navigation par objet de recherche",
   "app.navigation.methodologies": "Navigation dans les méthodologies",
   "app.methodologie.publication": "Méthodologie pour les publications",

diff --git a/src/utils/chartOptions.js b/src/utils/chartOptions.js
@@ -4543,4 +4543,33 @@ export const chartOptions = {
       return options;
     },
   },
+  'other.institution.open-science-policy': {
+    getOptions: (id, intl, series) => {
+      const options = getGraphOptions({ id, intl });
+      options.xAxis.tickInterval = 1;
+      options.xAxis.plotBands = [
+        {
+          from: 2018,
+          to: 2021,
+          color: getCSSValue('--ouvrir-la-science-green'),
+        },
+        {
+          from: 2021,
+          to: 2024,
+          color: getCSSValue('--ouvrir-la-science-yellow'),
+        },
+      ];
+      options.yAxis = getPercentageYAxis();
+      options.legend.enabled = false;
+      options.plotOptions = {
+        series: {
+          color: getCSSValue('--ouvrir-la-science-blue'),
+          pointStart: 2016,
+        },
+      };
+      options.series = series;
+      options.exporting.chartOptions.legend.enabled = false;
+      return options;
+    },
+  },
 };