feat(open-alex): Add graphs

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

@@ -4,12 +4,12 @@ import HighchartsReact from 'highcharts-react-official';
 
 export default function RetractedByCountryShare() {
   const { data: data1, isLoading: isLoading1 } = useQuery({
-    queryKey: ['GetOpeAlexRetractions'],
+    queryKey: ['OpenAlexRetractionsByCountry'],
     queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=is_retracted:true&group_by=authorships.countries').then((response) => response.json())
   });
 
   const { data: data2, isLoading: isLoading2 } = useQuery({
-    queryKey: ['GetOpeAlexPublications'],
+    queryKey: ['OpenAlexPublicationsByCountry'],
     queryFn: () => fetch('https://api.openalex.org/works?page=1&group_by=authorships.countries').then((response) => response.json())
   });
 
@@ -23,7 +23,6 @@ export default function RetractedByCountryShare() {
       color: country.key === 'FR' ? '#cc0000' : '#808080',
       name: country.key_display_name,
       total,
-      // y: country.count,
       y: country.count / total * 10000,
     })
   }).sort((a, b) => b.y - a.y);
@@ -32,11 +31,11 @@ export default function RetractedByCountryShare() {
   const options = {
     chart: { type: 'column' },
     legend: { enabled: false },
-    title: { text: 'Part of retracted publications by country (top 20)' },
+    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} %' } } }
+    plotOptions: { column: { dataLabels: { enabled: true, format: '{y:.2f} ‱' } } }
   };
 
   return (

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

@@ -4,7 +4,7 @@ import HighchartsReact from 'highcharts-react-official';
 
 export default function RetractedByCountry() {
   const { data, isLoading } = useQuery({
-    queryKey: ['GetOpeAlexRetractions'],
+    queryKey: ['OpenAlexRetractionsByCountry'],
     queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=is_retracted:true&group_by=authorships.countries').then((response) => response.json())
   });
 

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

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+export default function RetractedFrenchByYearShare() {
+  const { data: data1, isLoading: isLoading1 } = useQuery({
+    queryKey: ['OpenAlexFrenchRetractions'],
+    queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=is_retracted:true,institutions.country_code:FR,publication_year:2000-&group_by=publication_year').then((response) => response.json())
+  });
+
+  const { data: data2, isLoading: isLoading2 } = useQuery({
+    queryKey: ['OpenAlexFrenchPublications'],
+    queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=institutions.country_code:FR,publication_year:2000-&group_by=publication_year').then((response) => response.json())
+  });
+
+  if (isLoading1 || isLoading2) {
+    return <div>Loading...</div>;
+  }
+
+  const series = (data1?.group_by?.slice(0, 20) ?? []).map((country) => {
+    const total = data2.group_by.find((item) => item.key === country.key).count;
+    return ({
+      color: country.key === 'FR' ? '#cc0000' : '#808080',
+      name: country.key_display_name,
+      total,
+      y: country.count / total * 10000,
+    })
+  }).sort((a, b) => b.y - a.y);
+  const categories = series.map((country) => country.name);
+
+  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 (‱)' } },
+    series: [{ data: series }],
+    plotOptions: { column: { dataLabels: { enabled: true, format: '{y:.2f} %' } } }
+  };
+
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+}

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

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+export default function RetractedFrenchByYear() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['OpenAlexFrenchRetractions'],
+    queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=is_retracted:true,institutions.country_code:FR,publication_year:2000-&group_by=publication_year').then((response) => response.json())
+  });
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  const series = (data?.group_by ?? []).sort((a, b) => a.key - b.key)?.map((item) => ({
+    color: '#808080',
+    name: item.key,
+    y: item.count,
+  }));
+  const categories = series.map((country) => country.name);
+
+  const options = {
+    chart: { type: 'column' },
+    legend: { enabled: false },
+    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 } } }
+  };
+
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+}

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

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