fix(outcomes): spaceing graphs

Author: Mihoub2

client/src/boards/outcomes/pages/flux/charts/sankey/index.tsx

@@ -201,7 +201,6 @@ function SankeyChartView({
                 id: "outcomes-flux-sankey",
                 integrationURL: `/integration?chart_id=outcomesFluxSankey&${searchParams.toString()}`,
                 title: "Parcours des néo-bacheliers inscrits en L1 en 2019",
-                sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }],
             }}
             options={options}
             renderData={() => <SankeyRenderData links={links} totalStudents={totalStudents} />}

client/src/boards/outcomes/pages/plus-haut-diplome/charts/breakdown-bar/index.tsx

@@ -57,14 +57,16 @@ export default function BreakdownBar({ field: fieldProp }: BreakdownBarProps = {
     integrationParams.set("field", field);
 
     return (
-        <ChartWrapper
-            config={{
-                id: `outcomes-phd-breakdown-${field}`,
-                integrationURL: `/integration?chart_id=outcomesPhdBreakdown&${integrationParams.toString()}`,
-                title,
-                sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }],
-            }}
-            options={chartOptions}
-        />
+        <div className="fr-mb-3w">
+            <ChartWrapper
+                config={{
+                    id: `outcomes-phd-breakdown-${field}`,
+                    integrationURL: `/integration?chart_id=outcomesPhdBreakdown&${integrationParams.toString()}`,
+                    title,
+                    sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }],
+                }}
+                options={chartOptions}
+            />
+        </div>
     );
 }

client/src/boards/outcomes/pages/plus-haut-diplome/index.tsx

@@ -277,20 +277,26 @@ export default function PlusHautDiplomePage() {
                                     </div>
                                 </div>
 
-                                <DiplomaDonut />
-
-                                <Title as="h2" look="h5" className="fr-mt-3w fr-mb-2w">Diplômés vs non diplômés</Title>
-
-                                {BREAKDOWN_SECTIONS.map(({ field }) => {
-                                    const options = data.filterOptions?.[field] || [];
-                                    const activeKey = filters[field];
-                                    const filteredOptions = activeKey
-                                        ? options.filter((o) => o.key === activeKey)
-                                        : options;
-                                    const withData = filteredOptions.filter((o) => (o.dipl ?? 0) + (o.ndipl ?? 0) > 0);
-                                    if (!withData.length) return null;
-                                    return <BreakdownBar key={field} field={field} />;
-                                })}
+                                <Row className="fr-mt-3w">
+                                    <Col>
+                                        <DiplomaDonut />
+                                    </Col>
+                                </Row>
+                                <Row className="fr-mt-3w">
+                                    <Col>
+                                        <Title as="h2" look="h5" className="fr-mt-3w fr-mb-2w">Diplômés vs non diplômés</Title>
+                                        {BREAKDOWN_SECTIONS.map(({ field }) => {
+                                            const options = data.filterOptions?.[field] || [];
+                                            const activeKey = filters[field];
+                                            const filteredOptions = activeKey
+                                                ? options.filter((o) => o.key === activeKey)
+                                                : options;
+                                            const withData = filteredOptions.filter((o) => (o.dipl ?? 0) + (o.ndipl ?? 0) > 0);
+                                            if (!withData.length) return null;
+                                            return <BreakdownBar key={field} field={field} />;
+                                        })}
+                                    </Col>
+                                </Row>
                             </>
                         )}
 

client/src/boards/outcomes/pages/repartition/index.tsx

@@ -207,7 +207,7 @@ export default function RepartitionPage() {
                             <RepartitionChart hideTitle />
                         )}
 
-                        <div className="fr-mt-1w outcomes-flux-page__params outcomes-flux-page__params--after-chart">
+                        <div className="fr-mt-3w outcomes-flux-page__params outcomes-flux-page__params--after-chart">
                             <Title as="h2" look="h5" className="fr-mb-2w">Paramètres pour la répartition</Title>
                             <Row gutters>
                                 <Col>