Merge pull request #12 from dataesr/fundingRankingCharts

add first chart / success - part 2
dataesr · Mar 11, 2024 · 53fdc8e · 53fdc8e
2 parents 45962a7 + a642896
commit 53fdc8e
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 28 deletions.
diff --git a/client/src/pages/european-projects/charts-config.json b/client/src/pages/european-projects/charts-config.json
@@ -55,7 +55,16 @@
     "id": "fundingRankingSub",
     "title": "",
     "subtitle": "Subventions demandées et obtenues (M€) par pays",
-    "description": "Ad duis occaecat voluptate deserunt tempor enim nulla officia.",
+    "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": "fundingRankingSubSuccessRate",
+    "title": "",
+    "subtitle": "Taux de succès sur les montants par pays",
+    "description": null,
     "source": "Commission européenne, Cordis",
     "sourceURL": "https://cordis.europa.eu/",
     "integrationURL": "/european-projects/components/pages/analysis/positioning/charts/top-10-participating-organizations"

diff --git a/client/src/pages/european-projects/components/chart-wrapper/index.tsx b/client/src/pages/european-projects/components/chart-wrapper/index.tsx
@@ -41,16 +41,17 @@ export default function ChartWrapper({ id, options, legend }) {
       </figure>
       <div className="graph-footer fr-pt-1w">
         {legend}
-
-        <div className="fr-notice fr-notice--info fr-mt-1w">
-          <div className="fr-container">
-            <div className="fr-notice__body">
-              <Text className="description">
-                {graphConfig.description}
-              </Text>
+        {graphConfig.description && (
+          <div className="fr-notice fr-notice--info fr-mt-1w">
+            <div className="fr-container">
+              <div className="fr-notice__body">
+                <Text className="description">
+                  {graphConfig.description}
+                </Text>
+              </div>
             </div>
           </div>
-        </div>
+        )}
         <div className="share">
           <Button
             color="beige-gris-galet"

diff --git a/.../european-projects/components/pages/analysis/positioning/charts/funding-ranking/index.tsx b/.../european-projects/components/pages/analysis/positioning/charts/funding-ranking/index.tsx
@@ -3,9 +3,11 @@ 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 ChartWrapper from "../../../../../chart-wrapper";
+import { Col, Container, Row } from "@dataesr/dsfr-plus";
 
-export default function FundingRanking() {
+export default function FundingRanking({ indicateur }) {
   const { data, isLoading } = useQuery({
     queryKey: ["fundingRanking"],
     queryFn: () => GetData()
@@ -18,22 +20,47 @@ export default function FundingRanking() {
   }
 
   return (
-    <ChartWrapper
-      id="fundingRankingSub"
-      options={options(prepareData(data, "total_successful"))}
-      legend={(
-        <ul className="legend">
-          <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-            <div style={{ width: "20px", height: "20px", background: "#009099", marginRight: "10px" }} />
-            <span>Projets évalués</span>
-          </li>
-          <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
-            <div style={{ width: "20px", height: "20px", background: "#233E41", marginRight: "10px" }} />
-            <span>Projets lauréats</span>
-          </li>
-        </ul>
-      )}
-    />
+    <Container fluid>
+      <Row>
+        <Col>
+          <ChartWrapper
+            id="fundingRankingSub"
+            options={options(prepareData(data, indicateur))}
+            legend={(
+              <ul className="legend">
+                <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
+                  <div style={{ width: "20px", height: "20px", background: "#009099", marginRight: "10px" }} />
+                  <span>Projets évalués</span>
+                </li>
+                <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
+                  <div style={{ width: "20px", height: "20px", background: "#233E41", marginRight: "10px" }} />
+                  <span>Projets lauréats</span>
+                </li>
+              </ul>
+            )}
+          />
+        </Col>
+        <Col>
+          <ChartWrapper
+            id="fundingRankingSubSuccessRate"
+            options={optionSuccessRate(prepareData(data, indicateur))}
+            legend={(
+              <ul className="legend">
+                <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
+                  <div style={{ width: "20px", height: "20px", background: "#27A658", marginRight: "10px" }} />
+                  <span>Taux de réussite du pays</span>
+                </li>
+                <li style={{ display: "flex", alignItems: "center", marginBottom: "5px" }}>
+                  <div style={{ width: "20px", height: "20px", background: "#D75521", marginRight: "10px" }} />
+                  <span>Taux de réussite moyen</span>
+                </li>
+
+              </ul>
+            )}
+          />
+        </Col>
+      </Row>
+    </Container>
   )
 
 }
diff --git a/...ects/components/pages/analysis/positioning/charts/funding-ranking/options-succes-rate.tsx b/...ects/components/pages/analysis/positioning/charts/funding-ranking/options-succes-rate.tsx
@@ -0,0 +1,56 @@
+export default function optionSuccessRate(data) {
+  if (!data) return null;
+
+  // average ratio
+  const total = data.reduce((acc, el) => acc + el.ratio, 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: 'Total des subventions : <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,
+        })),
+        dataLabels: [{
+          align: 'right',
+          format: '{point.name}'
+        }],
+      }
+    ]
+  };
+}
diff --git a/...uropean-projects/components/pages/analysis/positioning/charts/funding-ranking/options.tsx b/...uropean-projects/components/pages/analysis/positioning/charts/funding-ranking/options.tsx
@@ -4,7 +4,7 @@ export default function Options(data) {
   return {
     chart: {
       type: "bar",
-      height: 500,
+      height: 400,
     },
     title: { text: "" },
     legend: { enabled: false },

diff --git a/client/src/pages/european-projects/components/pages/analysis/positioning/index.tsx b/client/src/pages/european-projects/components/pages/analysis/positioning/index.tsx
@@ -22,7 +22,8 @@ export default function Positioning() {
       <div className="fr-my-5w" />
       <Top10Beneficiaries />
       <div className="fr-my-5w" />
-      <FundingRanking />
+      <Title as="h2" look="h4">Focus sur les subventions</Title>
+      <FundingRanking indicateur="total_successful" />
 
     </Container>
   );