Skip to content

Commit

Permalink
Merge pull request #15 from dataesr/fundingRankingCharts
Browse files Browse the repository at this point in the history
add charts coordination + involved
  • Loading branch information
jerem1508 authored Mar 12, 2024
2 parents 7e6a7f1 + 16868a5 commit ef3a96d
Show file tree
Hide file tree
Showing 10 changed files with 379 additions and 18 deletions.
36 changes: 36 additions & 0 deletions client/src/pages/european-projects/charts-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,5 +68,41 @@
"source": "Commission européenne, Cordis",
"sourceURL": "https://cordis.europa.eu/",
"integrationURL": "/european-projects/components/pages/analysis/positioning/charts/top-10-participating-organizations"
},
{
"id": "fundingRankingCoordination",
"title": "",
"subtitle": "Nombre de coordinations de projets déposés et lauréats",
"description": null,
"source": "Commission européenne, Cordis",
"sourceURL": "https://cordis.europa.eu/",
"integrationURL": "/european-projects/components/pages/analysis/positioning/charts/top-10-participating-organizations"
},
{
"id": "fundingRankingCoordinationSuccessRate",
"title": "",
"subtitle": "Taux de succès sur le nombre de coordinations de projets lauréats",
"description": null,
"source": "Commission européenne, Cordis",
"sourceURL": "https://cordis.europa.eu/",
"integrationURL": "/european-projects/components/pages/analysis/positioning/charts/top-10-participating-organizations"
},
{
"id": "fundingRankingInvolved",
"title": "",
"subtitle": "Nombre de candidats et de participants",
"description": null,
"source": "Commission européenne, Cordis",
"sourceURL": "https://cordis.europa.eu/",
"integrationURL": "/european-projects/components/pages/analysis/positioning/charts/top-10-participating-organizations"
},
{
"id": "fundingRankingInvolvedSuccessRate",
"title": "",
"subtitle": "Taux de succès individuel des participants",
"description": null,
"source": "Commission européenne, Cordis",
"sourceURL": "https://cordis.europa.eu/",
"integrationURL": "/european-projects/components/pages/analysis/positioning/charts/top-10-participating-organizations"
}
]
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@ export default function ChartWrapper({ id, options, legend }) {
)
}
{
graphConfig.subtitle && <Title as="h3" look="h6" className="fr-mb-0">{graphConfig.subtitle}</Title>
graphConfig.subtitle && (
<Title as={graphConfig.title ? "h3" : "h2"}
look="h6"
className="fr-mb-0">
{graphConfig.subtitle}
</Title>
)
}
<figure>
<HighchartsReact
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,48 @@ import { useQuery } from "@tanstack/react-query";

import Template from "./template";
import { GetData } from "./query";
import options from "./options";
import optionSuccessRate from "./options-succes-rate";
import optionsSub from "./options";
import optionSubSuccessRate from "./options-succes-rate";
import optionsCoordinationNumber from "./options-coordination_number";
import optionCoordinationNumberSuccessRate from "./options-coordination_number-succes-rate";
import optionsNumberInvolved from "./options-number_involved";
import optionNumberInvolvedSuccessRate from "./options-number_involved-succes-rate";
import ChartWrapper from "../../../../../chart-wrapper";
import { Col, Container, Row } from "@dataesr/dsfr-plus";

export default function FundingRanking({ indicateur }) {
export default function FundingRanking({ indicateurId }) {
const { data, isLoading } = useQuery({
queryKey: ["fundingRanking"],
queryFn: () => GetData()
})

if (isLoading || !data) return <Template />

let successGraphId, sortIndicateur = "";
let optionsChart, optionChartSuccess;
switch (indicateurId) {
case "fundingRankingSub":
successGraphId = "fundingRankingSubSuccessRate";
sortIndicateur = "total_successful";
optionsChart = optionsSub;
optionChartSuccess = optionSubSuccessRate;
break;

case "fundingRankingCoordination":
successGraphId = "fundingRankingCoordinationSuccessRate";
sortIndicateur = "total_coordination_number_successful";
optionsChart = optionsCoordinationNumber;
optionChartSuccess = optionCoordinationNumberSuccessRate;
break;

case "fundingRankingInvolved":
successGraphId = "fundingRankingInvolvedSuccessRate";
sortIndicateur = "total_number_involved_successful";
optionsChart = optionsNumberInvolved;
optionChartSuccess = optionNumberInvolvedSuccessRate;
break;
}

const prepareData = (data, sortKey) => {
return data.sort((a, b) => b[sortKey] - a[sortKey]).slice(0, 10);
}
Expand All @@ -24,8 +53,8 @@ export default function FundingRanking({ indicateur }) {
<Row>
<Col>
<ChartWrapper
id="fundingRankingSub"
options={options(prepareData(data, indicateur))}
id={indicateurId}
options={optionsChart(prepareData(data, sortIndicateur))}
legend={(
<ul className="legend">
<li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
Expand All @@ -42,8 +71,8 @@ export default function FundingRanking({ indicateur }) {
</Col>
<Col>
<ChartWrapper
id="fundingRankingSubSuccessRate"
options={optionSuccessRate(prepareData(data, indicateur))}
id={successGraphId}
options={optionChartSuccess(prepareData(data, sortIndicateur))}
legend={(
<ul className="legend">
<li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
export default function optionCoordinationNumberSuccessRate(data) {
if (!data) return null;

// average ratio
const total = data.reduce((acc, el) => acc + el.ratio_coordination_number, 0);
const average = total / data.length;

return {
chart: {
type: "bar",
height: 400,
},
title: { text: "" },
legend: { enabled: false },
credits: { enabled: false },

xAxis: {
visible: false,
},
yAxis: {
plotLines: [{
color: '#D75521',
width: 4,
value: average,
zIndex: 4,
dashStyle: 'dot',
}],
min: 0,
title: {
text: 'Taux de succès %'
},
},
tooltip: {
pointFormat: 'Taux de succès : <b>{point.y:.1f} % </b>'
},
plotOptions: {
series: { dataLabels: { enabled: true } }
},
series: [
{
name: 'Succès sur les montants',
colors: ['#27A658'],
colorByPoint: true,
groupPadding: 0,
data: data.map((item) => ({
name: item.name,
y: item.ratio_coordination_number,
})),
dataLabels: [{
align: 'right',
format: '{point.name}'
}],
}
]
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
export default function OptionsCoordinationNumber(data) {
if (!data) return null;

return {
chart: {
type: "bar",
height: 400,
},
title: { text: "" },
legend: { enabled: false },
credits: { enabled: false },

xAxis: {
type: 'category',
labels: {
autoRotation: [-45, -90],
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Euros € (millions)'
}
},
tooltip: {
pointFormat: 'Nombre de coordinations : <b>{point.y}</b>'
},
plotOptions: {
series: { dataLabels: { enabled: true } }
},
series: [
{
name: 'Coordination de projets déposés',
colors: ['#009099'],
colorByPoint: true,
groupPadding: 0,
data: data.map((item) => ({
name: item.name,
y: item.total_coordination_number_evaluated,
rank_coordination_number_evaluated: item.rank_coordination_number_evaluated,
})),
dataLabels: [{
align: 'right',
format: '{point.rank_coordination_number_evaluated}e'
}],
},
{
name: 'Coordination de projets lauéats',
colors: ['#233E41'],
colorByPoint: true,
groupPadding: 0,
data: data.map((item) => ({
name: item.name,
y: item.total_coordination_number_successful,
rank_coordination_number_successful: item.rank_coordination_number_successful,
})),
dataLabels: [{
align: 'right',
format: '{point.rank_coordination_number_successful}e'
}],
}
]
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
export default function optionNumberInvolvedSuccessRate(data) {
if (!data) return null;

// average ratio
const total = data.reduce((acc, el) => acc + el.ratio_involved, 0);
const average = total / data.length;

return {
chart: {
type: "bar",
height: 400,
},
title: { text: "" },
legend: { enabled: false },
credits: { enabled: false },

xAxis: {
visible: false,
},
yAxis: {
plotLines: [{
color: '#D75521',
width: 4,
value: average,
zIndex: 4,
dashStyle: 'dot',
}],
min: 0,
title: {
text: 'Taux de succès %'
},
},
tooltip: {
pointFormat: 'Taux de succès : <b>{point.y:.1f} % </b>'
},
plotOptions: {
series: { dataLabels: { enabled: true } }
},
series: [
{
name: 'Succès sur les participants',
colors: ['#27A658'],
colorByPoint: true,
groupPadding: 0,
data: data.map((item) => ({
name: item.name,
y: item.ratio_involved,
})),
dataLabels: [{
align: 'right',
format: '{point.name}'
}],
}
]
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
export default function OptionsNumberInvolved(data) {
if (!data) return null;

return {
chart: {
type: "bar",
height: 400,
},
title: { text: "" },
legend: { enabled: false },
credits: { enabled: false },

xAxis: {
type: 'category',
labels: {
autoRotation: [-45, -90],
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Euros € (millions)'
}
},
tooltip: {
pointFormat: 'Nombre de candidats : <b>{point.y}</b>'
},
plotOptions: {
series: { dataLabels: { enabled: true } }
},
series: [
{
name: 'Candidats',
colors: ['#009099'],
colorByPoint: true,
groupPadding: 0,
data: data.map((item) => ({
name: item.name,
y: item.total_number_involved_evaluated,
rank_number_involved_evaluated: item.rank_involved_evaluated,
})),
dataLabels: [{
align: 'right',
format: '{point.rank_number_involved_evaluated}e'
}],
},
{
name: 'Participants',
colors: ['#233E41'],
colorByPoint: true,
groupPadding: 0,
data: data.map((item) => ({
name: item.name,
y: item.total_number_involved_successful,
rank_number_involved_successful: item.rank_involved_successful,
})),
dataLabels: [{
align: 'right',
format: '{point.rank_number_involved_successful}e'
}],
}
]
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function optionSuccessRate(data) {
},
},
tooltip: {
pointFormat: 'Total des subventions : <b>{point.y:.1f} </b>'
pointFormat: 'Taux de succès : <b>{point.y:.1f} % </b>'
},
plotOptions: {
series: { dataLabels: { enabled: true } }
Expand Down
Loading

0 comments on commit ef3a96d

Please sign in to comment.