From e5f8e712db2ae3a0f20b3640faf63c0f804e58c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anne=20L=27H=C3=B4te?= <anne.lhote@gmail.com>
Date: Fri, 23 Feb 2024 18:34:09 +0100
Subject: [PATCH] feat(open-alex): Create graph about the share of
 retractactions by country

---
 .../charts/retracted-by-country-share.tsx     | 48 +++++++++++++++++++
 .../open-alex/charts/retracted-by-country.tsx | 38 +++++++++++++++
 client/src/pages/open-alex/index.tsx          | 45 +++--------------
 3 files changed, 93 insertions(+), 38 deletions(-)
 create mode 100644 client/src/pages/open-alex/charts/retracted-by-country-share.tsx
 create mode 100644 client/src/pages/open-alex/charts/retracted-by-country.tsx

diff --git a/client/src/pages/open-alex/charts/retracted-by-country-share.tsx b/client/src/pages/open-alex/charts/retracted-by-country-share.tsx
new file mode 100644
index 000000000..a65c478b1
--- /dev/null
+++ b/client/src/pages/open-alex/charts/retracted-by-country-share.tsx
@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+export default function RetractedByCountryShare() {
+  const { data: data1, isLoading: isLoading1 } = useQuery({
+    queryKey: ['GetOpeAlexRetractions'],
+    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'],
+    queryFn: () => fetch('https://api.openalex.org/works?page=1&group_by=authorships.countries').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,
+      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 retracted publications by country (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} %' } } }
+  };
+
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/open-alex/charts/retracted-by-country.tsx b/client/src/pages/open-alex/charts/retracted-by-country.tsx
new file mode 100644
index 000000000..d31a2492b
--- /dev/null
+++ b/client/src/pages/open-alex/charts/retracted-by-country.tsx
@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+export default function RetractedByCountry() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['GetOpeAlexRetractions'],
+    queryFn: () => fetch('https://api.openalex.org/works?page=1&filter=is_retracted:true&group_by=authorships.countries').then((response) => response.json())
+  });
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  const series = (data?.group_by?.slice(0, 20) ?? []).map((country) => ({
+    color: country.key === 'FR' ? '#cc0000' : '#808080',
+    name: country.key_display_name,
+    y: country.count,
+  }));
+  const categories = series.map((country) => country.name);
+
+  const options = {
+    chart: { type: 'column' },
+    legend: { enabled: false },
+    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 } } }
+  };
+
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/open-alex/index.tsx b/client/src/pages/open-alex/index.tsx
index d23864727..cfd56175b 100644
--- a/client/src/pages/open-alex/index.tsx
+++ b/client/src/pages/open-alex/index.tsx
@@ -1,42 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
+import RetractedByCountry from './charts/retracted-by-country';
+import RetractedByCountryShare from './charts/retracted-by-country-share'
 
 export default function Welcome() {
-  const GetHorizon2020Participation = () => {
-    const url = 'https://api.openalex.org/works?page=1&filter=is_retracted:true&group_by=authorships.countries';
-    return fetch(url).then((response) => response.json());
-  }
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['GetOpeAlexRetractions'],
-    queryFn: () => GetHorizon2020Participation()
-  });
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  const series = (data?.group_by?.slice(0, 20) ?? []).map((country) => ({
-    color: country.key === 'FR' ? '#cc0000' : '#808080',
-    name: country.key_display_name,
-    y: country.count,
-  }));
-  const categories = series.map((country) => country.name);
-
-  const options = {
-    chart: { type: 'column' },
-    legend: { enabled: false },
-    title: { text: 'Number of retracted publications by country (top 20)' },
-    xAxis: { categories, title: { text: 'Country' } },
-    yAxis: { title: { text: 'Number of publications' } },
-    series: [{ data: series }],
-  };
-
   return (
-    <HighchartsReact
-      highcharts={Highcharts}
-      options={options}
-    />
-  )
+    <>
+      <RetractedByCountry />
+      <RetractedByCountryShare />
+    </>
+  );
 }