feat(graphs): Add OA repartition for retractations graphs, see issue #…

…309
dataesr · Oct 11, 2023 · d481707 · d481707
1 parent 13af935
commit d481707
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 28 deletions.
diff --git a/src/components/Charts/publications/others/retractations/chart-by-field.js b/src/components/Charts/publications/others/retractations/chart-by-field.js
@@ -24,11 +24,12 @@ const Chart = ({ domain, hasComments, hasFooter, id }) => {
   const [chartComments, setChartComments] = useState('');
   const { observationSnaps } = useGlobals();
   const { data, isError, isLoading } = useGetData(observationSnaps, domain);
-  const { dataGraph2 } = data;
+  const { categories2, dataGraph2 } = data;
   const idWithDomain = withDomain(id, domain);
   const optionsGraph = chartOptions[id].getOptions(
     idWithDomain,
     intl,
+    categories2,
     dataGraph2,
   );
 

diff --git a/src/components/Charts/publications/others/retractations/chart-by-year.js b/src/components/Charts/publications/others/retractations/chart-by-year.js
@@ -24,11 +24,12 @@ const Chart = ({ domain, hasComments, hasFooter, id }) => {
   const [chartComments, setChartComments] = useState('');
   const { observationSnaps } = useGlobals();
   const { data, isError, isLoading } = useGetData(observationSnaps, domain);
-  const { dataGraph1 } = data;
+  const { categories1, dataGraph1 } = data;
   const idWithDomain = withDomain(id, domain);
   const optionsGraph = chartOptions[id].getOptions(
     idWithDomain,
     intl,
+    categories1,
     dataGraph1,
   );
 

diff --git a/src/components/Charts/publications/others/retractations/get-data.js b/src/components/Charts/publications/others/retractations/get-data.js
@@ -4,52 +4,106 @@ import { useIntl } from 'react-intl';
 
 import { ES_API_URL, HEADERS } from '../../../../../config/config';
 import getFetchOptions from '../../../../../utils/chartFetchOptions';
-import { capitalize } from '../../../../../utils/helpers';
+import { capitalize, getCSSValue } from '../../../../../utils/helpers';
+import useGlobals from '../../../../../utils/Hooks/useGetGlobals';
 
 function useGetData(observationSnaps, domain = '', isPercent = false) {
   const [data, setData] = useState({});
   const [isError, setError] = useState(false);
   const [isLoading, setLoading] = useState(true);
   const intl = useIntl();
+  const { lastObservationSnap } = useGlobals();
 
   const getDataByObservationSnaps = useCallback(async () => {
     const query = getFetchOptions({
       key: 'retractations',
       domain,
+      parameters: [lastObservationSnap],
     });
     const response = await Axios.post(ES_API_URL, query, HEADERS);
+    const buckets1 = response?.data?.aggregations?.by_year?.buckets?.sort(
+      (a, b) => a.key - b.key,
+    );
+    const categories1 = [];
+    const oaData1 = [];
+    const closedData1 = [];
+    buckets1.forEach((item) => {
+      categories1.push(item.key);
+      oaData1.push(
+        item.by_oa.buckets.find((item2) => item2.key === 1)?.doc_count ?? 0,
+      );
+      closedData1.push(
+        item.by_oa.buckets.find((item2) => item2.key === 0)?.doc_count ?? 0,
+      );
+    });
     const dataGraph1 = [
       {
-        name: 'Retractations',
-        data: response?.data?.aggregations?.by_year?.buckets
-          ?.sort((a, b) => a.key - b.key)
-          .map((item) => ({ name: item.key, y: item.doc_count })),
+        color: getCSSValue('--blue-soft-175'),
+        data: closedData1,
+        name: intl.formatMessage({
+          id: 'app.type-hebergement.closed',
+          default: 'Accès fermé',
+        }),
+      },
+      {
+        color: getCSSValue('--orange-soft-100'),
+        data: oaData1,
+        name: intl.formatMessage({
+          id: 'app.type-hebergement.open',
+          default: 'Accès ouvert',
+        }),
       },
     ];
 
+    const buckets2 = response?.data?.aggregations?.by_field?.buckets?.sort(
+      (a, b) => a.key - b.key,
+    );
+    const categories2 = [];
+    const oaData2 = [];
+    const closedData2 = [];
+    buckets2.forEach((item) => {
+      categories2.push(
+        capitalize(
+          intl.formatMessage({
+            id: `app.discipline.${item.key
+              .replace(/\n/g, '')
+              .replace('  ', ' ')}`,
+          }),
+        ),
+      );
+      oaData2.push(
+        item.by_oa.buckets.find((item2) => item2.key === 1)?.doc_count ?? 0,
+      );
+      closedData2.push(
+        item.by_oa.buckets.find((item2) => item2.key === 0)?.doc_count ?? 0,
+      );
+    });
     const dataGraph2 = [
       {
-        name: 'Retractations',
-        data: response?.data?.aggregations?.by_field?.buckets
-          ?.sort((a, b) => a.key - b.key)
-          .map((item) => ({
-            name: capitalize(
-              intl.formatMessage({
-                id: `app.discipline.${item.key
-                  .replace(/\n/g, '')
-                  .replace('  ', ' ')}`,
-              }),
-            ),
-            y: item.doc_count,
-          })),
+        color: getCSSValue('--blue-soft-175'),
+        data: closedData2,
+        name: intl.formatMessage({
+          id: 'app.type-hebergement.closed',
+          default: 'Accès fermé',
+        }),
+      },
+      {
+        color: getCSSValue('--orange-soft-100'),
+        data: oaData2,
+        name: intl.formatMessage({
+          id: 'app.type-hebergement.open',
+          default: 'Accès ouvert',
+        }),
       },
     ];
 
     return {
+      categories1,
+      categories2,
       dataGraph1,
       dataGraph2,
     };
-  }, [domain, intl]);
+  }, [domain, intl, lastObservationSnap]);
 
   useEffect(() => {
     async function getData() {

diff --git a/src/utils/chartFetchOptions.js b/src/utils/chartFetchOptions.js
@@ -2049,7 +2049,7 @@ export default function getFetchOptions({
         },
       },
     }),
-    retractations: () => ({
+    retractations: ([observationSnap]) => ({
       size: 0,
       query: {
         bool: {
@@ -2068,11 +2068,25 @@ export default function getFetchOptions({
             field: 'year',
             size: 15,
           },
+          aggs: {
+            by_oa: {
+              terms: {
+                field: `oa_details.${observationSnap}.is_oa`,
+              },
+            },
+          },
         },
         by_field: {
           terms: {
             field: 'bso_classification.keyword',
           },
+          aggs: {
+            by_oa: {
+              terms: {
+                field: `oa_details.${observationSnap}.is_oa`,
+              },
+            },
+          },
         },
       },
     }),

diff --git a/src/utils/chartOptions.js b/src/utils/chartOptions.js
@@ -4132,19 +4132,26 @@ export const chartOptions = {
     },
   },
   'publi.others.retractations.chart-by-year': {
-    getOptions: (id, intl, data, dataTitle) => {
+    getOptions: (id, intl, categories, data, dataTitle) => {
       const options = getGraphOptions({ id, intl, dataTitle });
       options.chart.type = 'column';
       options.xAxis = {
         title: { text: intl.formatMessage({ id: 'app.publication-year' }) },
-        type: 'category',
+        categories,
       };
-      options.legend.enabled = false;
+      options.yAxis = {
+        stackLabels: {
+          enabled: true,
+        },
+      };
+      options.legend.enabled = true;
+      options.legend.reversed = true;
       options.plotOptions = {
         column: {
           dataLabels: {
             enabled: true,
           },
+          stacking: 'normal',
         },
       };
       options.series = data;
@@ -4153,19 +4160,26 @@ export const chartOptions = {
     },
   },
   'publi.others.retractations.chart-by-field': {
-    getOptions: (id, intl, data, dataTitle) => {
+    getOptions: (id, intl, categories, data, dataTitle) => {
       const options = getGraphOptions({ id, intl, dataTitle });
       options.chart.type = 'column';
       options.xAxis = {
         title: { text: intl.formatMessage({ id: 'app.discipline' }) },
-        type: 'category',
+        categories,
       };
-      options.legend.enabled = false;
+      options.yAxis = {
+        stackLabels: {
+          enabled: true,
+        },
+      };
+      options.legend.enabled = true;
+      options.legend.reversed = true;
       options.plotOptions = {
         column: {
           dataLabels: {
             enabled: true,
           },
+          stacking: 'normal',
         },
       };
       options.series = data;