diff --git a/client/package.json b/client/package.json index 6628978..d086e56 100644 --- a/client/package.json +++ b/client/package.json @@ -15,7 +15,7 @@ "@tanstack/react-query": "^4.29.5", "@tanstack/react-query-devtools": "^4.29.6", "classnames": "^2.3.2", - "highcharts": "^11.4.0", + "highcharts": "^11.4.8", "highcharts-react-official": "^3.2.1", "intro.js-react": "^1.0.0", "papaparse": "^5.4.1", diff --git a/client/src/pages/openalex-affiliations/corrections.jsx b/client/src/pages/openalex-affiliations/corrections.jsx index 2b5dd99..2ee01bf 100644 --- a/client/src/pages/openalex-affiliations/corrections.jsx +++ b/client/src/pages/openalex-affiliations/corrections.jsx @@ -1,15 +1,19 @@ import { Col, Container, Link, Row, Spinner } from '@dataesr/dsfr-plus'; import { useQuery } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; +import Highcharts from 'highcharts'; +import HighchartsReact from 'highcharts-react-official'; import Header from '../../layout/header'; -const ODS_BY_PAGE = 100; +// const ODS_BY_PAGE = 100; export default function Corrections() { - const [filter, setFilter] = useState([]); - const [issues, setIssues] = useState([]); + // const [filter, setFilter] = useState([]); + // const [issues, setIssues] = useState([]); + const [chartOptions, setChartOptions] = useState({}); + /* const getCorrections = async (page = 0) => { const offset = page * ODS_BY_PAGE; let corrections = []; @@ -23,21 +27,41 @@ export default function Corrections() { } return corrections; }; + */ - const { data, error, isFetched, isFetching } = useQuery({ - queryKey: ['corrections'], - queryFn: () => getCorrections(), + const getFacets = async () => { + const url = 'https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/openalex-affiliations-corrections/facets'; + const response = await fetch(url); + const { facets } = await response.json(); + const domains = facets.find((facet) => facet.name === 'contact_domain').facets.slice(0, 10); + const categories = domains.map((domain) => domain.name); + const data = domains.map((domain) => domain.count); + setChartOptions({ + chart: { type: 'bar' }, + credits: { enabled: false }, + legend: { enabled: false }, + series: [{ data, name: 'Corrections' }], + title: { text: 'Top 10 contributors' }, + xAxis: { categories }, + yAxis: { title: { text: 'Number of corrections requested' } }, + }); + return facets; + }; + + const { error, isFetched, isFetching } = useQuery({ + queryKey: ['facets'], + queryFn: () => getFacets(), }); - useEffect(() => { - setFilter(''); - setIssues(data); - }, [data]); + // useEffect(() => { + // setFilter(''); + // setIssues(data); + // }, [data]); - useEffect(() => { - const issuesTmp = issues.filter((issue) => issue?.contact_domain?.includes(filter)); - setIssues(issuesTmp); - }, [filter, issues]); + // useEffect(() => { + // const issuesTmp = issues.filter((issue) => issue?.contact_domain?.includes(filter)); + // setIssues(issuesTmp); + // }, [filter, issues]); return ( <> @@ -50,6 +74,7 @@ export default function Corrections() { )} + {error && ( @@ -60,6 +85,15 @@ export default function Corrections() { )} + + {!isFetching && isFetched && ( + + )} + + {/* {!isFetching && isFetched && ( <> )} + */} ); diff --git a/package-lock.json b/package-lock.json index 8bf452c..b8498f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@tanstack/react-query": "^4.29.5", "@tanstack/react-query-devtools": "^4.29.6", "classnames": "^2.3.2", - "highcharts": "^11.4.0", + "highcharts": "^11.4.8", "highcharts-react-official": "^3.2.1", "intro.js-react": "^1.0.0", "papaparse": "^5.4.1", @@ -5491,14 +5491,16 @@ } }, "node_modules/highcharts": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.4.0.tgz", - "integrity": "sha512-f5POJz2WdHW6SNT4P2CoMjsgcX5F5sJXtdfWLQCaNP9JG0nG5TSGG7+A6vzHGzcDkTPM72EQbRQofNZHaRTUPg==" + "version": "11.4.8", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.4.8.tgz", + "integrity": "sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==", + "license": "https://www.highcharts.com/license" }, "node_modules/highcharts-react-official": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/highcharts-react-official/-/highcharts-react-official-3.2.1.tgz", "integrity": "sha512-hyQTX7ezCxl7JqumaWiGsroGWalzh24GedQIgO3vJbkGOZ6ySRAltIYjfxhrq4HszJOySZegotEF7v+haQ75UA==", + "license": "MIT", "peerDependencies": { "highcharts": ">=6.0.0", "react": ">=16.8.0"