feat(open-alex): Add number of retracted publications by country by p…

…ublication year

client/src/pages/open-alex/charts/retracted-by-country-by-year.tsx

@@ -0,0 +1,48 @@
+import { useQueries, useQuery } from '@tanstack/react-query';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+export default function RetractedByCountryByYear() {
+  const { data: data1, isLoading: isLoading1 } = useQuery({
+    queryKey: ['OpenAlexRetractionsByCountry'],
+    queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=is_retracted:true&group_by=authorships.countries').then((response) => response.json())
+  });
+
+  const countries = (data1?.group_by?.slice(0, 20) ?? []).map((item) => ({ name: item.key_display_name, iso2: item.key }));
+  const results = useQueries({
+    queries: countries.map((country: string, index: number) => {
+      return {
+        queryKey: ['OpenAlexRetractionsByCountryByYear', country.iso2],
+        queryFn: () => fetch(`https://api.openalex.org/works?page=1&filter=is_retracted:true,institutions.country_code:${country.iso2},publication_year:2000-&group_by=publication_year`).then((response) => response.json()),
+        retry: 3,
+        retryDelay: (attempt) => index * attempt * 1000,
+      }
+    }),
+  });
+
+  if (isLoading1 || results.some((query) => query.isLoading)) {
+    return <div>Loading...</div>;
+  }
+
+  const years = [...Array(25).keys()].map((item) => item + 2000);
+  const series = results.map((result, index) => ({
+    ...countries[index],
+    data: years.map((year) => (result?.data?.group_by ?? []).find((item) => item.key === year.toString())?.count ?? 0),
+  }));
+
+  const options = {
+    legend: { align: 'right', layout: 'vertical', verticalAlign: 'middle' },
+    plotOptions: { series: { label: { connectorAllowed: false } } },
+    series,
+    title: { text: 'Number of retracted publications by country by publication year since 2000 (top 20)' },
+    xAxis: { categories: years, title: { text: 'Publication year' } },
+    yAxis: { title: { text: 'Number of retracted publications' } }
+  };
+
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+}

client/src/pages/open-alex/charts/retracted-by-country-share.tsx

@@ -31,11 +31,11 @@ export default function RetractedByCountryShare() {
   const options = {
     chart: { type: 'column' },
     legend: { enabled: false },
+    plotOptions: { column: { dataLabels: { enabled: true, format: '{y:.2f} ‱' } } },
+    series: [{ data: series }],
     title: { text: 'Part of retracted publications by country in ‱ (top 20)' },
     xAxis: { categories, title: { text: 'Country' } },
-    yAxis: { title: { text: 'Part of retracted publications (‱)' } },
-    series: [{ data: series }],
-    plotOptions: { column: { dataLabels: { enabled: true, format: '{y:.2f} ‱' } } }
+    yAxis: { title: { text: 'Part of retracted publications (‱)' } }
   };
 
   return (

client/src/pages/open-alex/charts/retracted-by-country.tsx

@@ -22,11 +22,11 @@ export default function RetractedByCountry() {
   const options = {
     chart: { type: 'column' },
     legend: { enabled: false },
+    plotOptions: { column: { dataLabels: { enabled: true } } },
+    series: [{ data: series }],
     title: { text: 'Number of retracted publications by country (top 20)' },
     xAxis: { categories, title: { text: 'Country' } },
-    yAxis: { title: { text: 'Number of retracted publications' } },
-    series: [{ data: series }],
-    plotOptions: { column: { dataLabels: { enabled: true } } }
+    yAxis: { title: { text: 'Number of retracted publications' } }
   };
 
   return (

client/src/pages/open-alex/charts/retracted-french-by-year-share.tsx

@@ -31,11 +31,11 @@ export default function RetractedFrenchByYearShare() {
   const options = {
     chart: { type: 'column' },
     legend: { enabled: false },
-    title: { text: 'Part of French retracted publications by publication year since 2000' },
-    xAxis: { categories, title: { text: 'Country' } },
-    yAxis: { title: { text: 'Part of retracted publications (‱)' } },
+    plotOptions: { column: { dataLabels: { enabled: true, format: '{y:.2f} ‱' } } },
     series: [{ data: series }],
-    plotOptions: { column: { dataLabels: { enabled: true, format: '{y:.2f} %' } } }
+    title: { text: 'Part of French retracted publications by publication year in ‱ since 2000' },
+    xAxis: { categories, title: { text: 'Country' } },
+    yAxis: { title: { text: 'Part of retracted publications (‱)' } }
   };
 
   return (

client/src/pages/open-alex/charts/retracted-french-by-year.tsx

@@ -22,11 +22,11 @@ export default function RetractedFrenchByYear() {
   const options = {
     chart: { type: 'column' },
     legend: { enabled: false },
+    plotOptions: { column: { dataLabels: { enabled: true } } },
+    series: [{ data: series }],
     title: { text: 'Number of French retracted publications by publication year since 2000' },
     xAxis: { categories, title: { text: 'Publication year' } },
-    yAxis: { title: { text: 'Number of retracted French publications' } },
-    series: [{ data: series }],
-    plotOptions: { column: { dataLabels: { enabled: true } } }
+    yAxis: { title: { text: 'Number of retracted French publications' } }
   };
 
   return (

client/src/pages/open-alex/index.tsx

@@ -1,5 +1,6 @@
 import RetractedByCountry from './charts/retracted-by-country';
 import RetractedByCountryShare from './charts/retracted-by-country-share';
+import RetractedByCountryByYear from './charts/retracted-by-country-by-year';
 import RetractedFrenchByYear from './charts/retracted-french-by-year';
 import RetractedFrenchByYearShare from './charts/retracted-french-by-year-share';
 
@@ -10,6 +11,7 @@ export default function Welcome() {
       <RetractedByCountryShare />
       <RetractedFrenchByYear />
       <RetractedFrenchByYearShare />
+      <RetractedByCountryByYear />
     </>
   );
 }