feat(graph): Add new graph about ORCID creation by year

dataesr · Jan 25, 2024 · dafcb3c · dafcb3c
1 parent 986c01e
commit dafcb3c
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 35 deletions.
diff --git a/src/components/Charts/orcid/general/present/creation-by-year.js b/src/components/Charts/orcid/general/present/creation-by-year.js
@@ -0,0 +1,83 @@
+import Highcharts from 'highcharts';
+import HCExportingData from 'highcharts/modules/export-data';
+import HCExporting from 'highcharts/modules/exporting';
+import HighchartsReact from 'highcharts-react-official';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import customComments from '../../../../../utils/chartComments';
+import { chartOptions } from '../../../../../utils/chartOptions';
+import { domains, graphIds } from '../../../../../utils/constants';
+import { withDomain } from '../../../../../utils/helpers';
+import useGlobals from '../../../../../utils/Hooks/useGetGlobals';
+import WrapperChart from '../../../../WrapperChart';
+import GraphComments from '../../../graph-comments';
+import useGetData from './get-data';
+
+HCExporting(Highcharts);
+HCExportingData(Highcharts);
+
+const Chart = ({ domain, hasComments, hasFooter, id }) => {
+  const chartRef = useRef();
+  const intl = useIntl();
+  const [chartComments, setChartComments] = useState('');
+  const { beforeLastObservationSnap, lastObservationSnap } = useGlobals();
+  const { allData, isError, isLoading } = useGetData(
+    beforeLastObservationSnap,
+    lastObservationSnap,
+    domain,
+  );
+  const { categories, dataGraph2 } = allData;
+  const idWithDomain = withDomain(id, domain);
+  const optionsGraph = chartOptions[id].getOptions(
+    idWithDomain,
+    intl,
+    categories,
+    dataGraph2,
+  );
+
+  console.log('top');
+  console.log(optionsGraph);
+
+  useEffect(() => {
+    setChartComments(customComments(allData, idWithDomain, intl));
+  }, [allData, idWithDomain, intl]);
+
+  return (
+    <WrapperChart
+      chartRef={chartRef}
+      domain={domain}
+      hasComments={false}
+      hasFooter={hasFooter}
+      id={id}
+      isError={isError}
+      isLoading={isLoading || !dataGraph2?.data || !categories}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        id={idWithDomain}
+        options={optionsGraph}
+        ref={chartRef}
+      />
+      {hasComments && chartComments && (
+        <GraphComments comments={chartComments} hasFooter={hasFooter} />
+      )}
+    </WrapperChart>
+  );
+};
+
+Chart.defaultProps = {
+  domain: '',
+  hasComments: true,
+  hasFooter: true,
+  id: 'orcid.general.present.creation-by-year',
+};
+Chart.propTypes = {
+  domain: PropTypes.oneOf(domains),
+  hasComments: PropTypes.bool,
+  hasFooter: PropTypes.bool,
+  id: PropTypes.oneOf(graphIds),
+};
+
+export default Chart;
diff --git a/src/components/Charts/orcid/general/present/get-data.js b/src/components/Charts/orcid/general/present/get-data.js
@@ -35,6 +35,15 @@ function useGetData(beforeLastObservationSnap, observationSnap, domain) {
       queries.push(Axios.post(ES_ORCID_API_URL, queryEmployment, HEADERS));
       const res = await Axios.all(queries);
       const data = res[0].data.aggregations.orcid_per_year.buckets;
+      const dataGraph2 = {
+        data: data.map((item) => ({
+          y: item.doc_count,
+          name: Highcharts.dateFormat(
+            '%Y',
+            new Date(item.key_as_string).getTime(),
+          ),
+        })),
+      };
       const dataEmployment = res[1].data.aggregations.orcid_per_year.buckets;
       const bsoDomain = intl.formatMessage({ id: `app.bsoDomain.${domain}` });
       const categories = [];
@@ -65,14 +74,22 @@ function useGetData(beforeLastObservationSnap, observationSnap, domain) {
           new Date(el.key_as_string).getTime(),
         );
         employment.push({
+          bsoDomain,
+          creation_date: currentDate,
           x: employment.length,
           y: el.total_orcid.value,
           y_current: el.distinct_orcid.value,
-          creation_date: currentDate,
-          bsoDomain,
         });
       });
 
+      const comments = {
+        beforeLastObservationSnap: getObservationLabel(
+          beforeLastObservationSnap,
+          intl,
+        ),
+        lastObservationSnap: getObservationLabel(lastObservationSnap, intl),
+      };
+
       const dataGraph = [
         {
           name: capitalize(
@@ -97,17 +114,12 @@ function useGetData(beforeLastObservationSnap, observationSnap, domain) {
           dataLabels: noOutline,
         },
       ];
-      const comments = {
-        beforeLastObservationSnap: getObservationLabel(
-          beforeLastObservationSnap,
-          intl,
-        ),
-        lastObservationSnap: getObservationLabel(lastObservationSnap, intl),
-      };
+
       return {
         categories,
         comments,
         dataGraph,
+        dataGraph2,
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/pages/BaroNational/NationalOrcid/index.js b/src/pages/BaroNational/NationalOrcid/index.js
@@ -106,24 +106,6 @@ export default function NationalOrcid() {
                     fr: '/orcid/general?id=general.users',
                   },
                 },
-                /* {
-                  label: intl.formatMessage({
-                    id: 'app.orcid.navigation.publications',
-                  }),
-                  href: {
-                    en: '/orcid/general?id=general.publications',
-                    fr: '/orcid/general?id=general.publications',
-                  },
-                },
-                {
-                  label: intl.formatMessage({
-                    id: 'app.orcid.navigation.affiliations',
-                  }),
-                  href: {
-                    en: '/orcid/general?id=general.affiliations',
-                    fr: '/orcid/general?id=general.affiliations',
-                  },
-                }, */
               ]}
             >
               <GraphContent>
@@ -136,17 +118,14 @@ export default function NationalOrcid() {
                   <BSOChart id='orcid.general.present.chart-indicator-these-year' />
                   <BSOChart id='orcid.general.present.chart-indicator-these-discipline' />
                   <BSOChart id='orcid.general.present.chart-evolution' />
-                  <BSOChart
-                    id='orcid.general.present.chart-indicator-active'
-                    isDisplayed={!isInProduction()}
-                  />
+                  <BSOChart id='orcid.general.present.creation-by-year' />
+                  <BSOChart id='orcid.general.present.chart-indicator-active' />
                 </QuestionSection>
                 <QuestionSection
                   anchorId='general.publications'
                   backgroundColor={blueSoft25}
                   glossaryKeys={['embargo', 'barriere-mobile']}
                   intlKey='app.national-orcid.general.publications'
-                  isDisplayed={!isInProduction()}
                 >
                   <BSOChart id='orcid.general.present.chart-indicator-work' />
                   <BSOChart id='orcid.general.present.chart-indicator-hal' />
@@ -157,7 +136,6 @@ export default function NationalOrcid() {
                   backgroundColor={blueSoft50}
                   glossaryKeys={['embargo', 'barriere-mobile']}
                   intlKey='app.national-orcid.general.affiliations'
-                  isDisplayed={!isInProduction()}
                 >
                   <BSOChart id='orcid.general.present.chart-indicator-affiliationsource' />
                 </QuestionSection>

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -1366,6 +1366,7 @@
   "app.national-orcid.general.present.chart-evolution.title": "French ORCID accounts evolution",
   "app.national-orcid.general.present.chart-evolution.comments": "This graph shows the evolution of the number of French ORCIDs. An ORCID is considered French on the observation date (last available dump) if at least one of these conditions is met: a French employer on the date, a training course in progress in France on the date, the country indicated on the ORCID account is France, or a (public) email in .fr. Please note that very few emails are actually public in the ORCID dump.",
   "app.national-orcid.general.present.chart-evolution.tooltip": "<b>{series.name}</b><br><b>{point.y}</b> ORCID accounts created (cumulated) until {point.creation_date:%Y}",
+  "app.national-orcid.general.present.creation-by-year.title": "Number of French ORCID by creation year",
   "app.software.navigation.disciplines.creation": "Code or software creation",
   "app.repositories.label.archimer": "Archimer (France)",
   "app.repositories.label.arxiv": "ArXiv (USA)",

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -1366,6 +1366,7 @@
   "app.national-orcid.general.present.chart-evolution.title": "Evolution du nombre d'ORCID français",
   "app.national-orcid.general.present.chart-evolution.comments": "Ce graphique présente l'évolution du nombre d'ORCID français. Un ORCID est considéré français à la date d'observation (dernier dump disponible) si au moins une de ces condition est remplie : un employeur français à date, une formation en cours en France à date, le pays indiqué sur le compte ORCID est la France, ou un email (public) en .fr. Il est à noter que dans les faits, très peu d'emails sont publics dans le dump ORCID. ",
   "app.national-orcid.general.present.chart-evolution.tooltip": "<b>{series.name}</b><br><b>{point.y}</b> comptes ORCID créés (en cumulé) avant {point.creation_date:%Y}",
+  "app.national-orcid.general.present.creation-by-year.title": "Nombre d'ORCID français par année de création",
   "app.national-orcid.general.present.chart-indicator-active.title": "Proportion de comptes ORCID français actifs (profil mis à jour depuis 2021)",
   "app.national-orcid.general.present.chart-indicator-active.tooltip": "<b>ORCID {series.name}</b><br/>{point.y:.2f} % des comptes {point.fr_reason}<br>soit {point.y_abs} / {point.y_tot} ORCID",
   "app.national-orcid.general.present.chart-indicator-hal.title": "Proportion de comptes ORCID français qui a utilisé l'import de publications depuis HAL",

diff --git a/src/utils/chartComponents.js b/src/utils/chartComponents.js
@@ -256,7 +256,8 @@ const ChartSoftwareSharedOa = lazy(() => import(
   '../components/Charts/software/oa/voies-ouverture/chart-software-shared'
 ));
 // Orcid
-const ChartOrcid = lazy(() => import('../components/Charts/orcid/general/present/chart-evolution'));
+const OrcidEvolution = lazy(() => import('../components/Charts/orcid/general/present/chart-evolution'));
+const OrcidCreationByYear = lazy(() => import('../components/Charts/orcid/general/present/creation-by-year'));
 const ChartOrcidAffiliationSource = lazy(() => import(
   '../components/Charts/orcid/general/present/chart-indicator-affiliationsource'
 ));
@@ -459,7 +460,8 @@ const chartComponents = {
     ChartDataAvailibilityDiscipline,
   'data.editeurs.voies-ouverture.chart-availibility':
     ChartDataAvailibilityEditeur,
-  'orcid.general.present.chart-evolution': ChartOrcid,
+  'orcid.general.present.chart-evolution': OrcidEvolution,
+  'orcid.general.present.creation-by-year': OrcidCreationByYear,
   'orcid.general.present.chart-indicator-worksource': ChartOrcidWorkSource,
   'orcid.general.present.chart-indicator-affiliationsource':
     ChartOrcidAffiliationSource,

diff --git a/src/utils/chartOptions.js b/src/utils/chartOptions.js
@@ -3904,6 +3904,20 @@ export const chartOptions = {
       return options;
     },
   },
+  'orcid.general.present.creation-by-year': {
+    getOptions: (id, intl, categories, series) => {
+      const options = getGraphOptions({ id, intl });
+      options.chart.type = 'column';
+      options.xAxis = {
+        categories,
+        title: { text: intl.formatMessage({ id: 'app.orcid.creation-date' }) },
+      };
+      options.yAxis.title.text = intl.formatMessage({ id: 'app.orcid.nb' });
+      options.legend.enabled = false;
+      options.series = series;
+      return options;
+    },
+  },
   'orcid.general.present.chart-indicator-active': {
     getOptions: (id, intl, categories, data, dataTitle) => {
       const options = getGraphOptions({ id, intl, dataTitle });