Skip to content

Commit 8b7be10

Browse files
Mihoub2Mihoub2
committed
fix(outcomes): update cards for tiles and some accessibility
1 parent 91e5ac7 commit 8b7be10

13 files changed

Lines changed: 84 additions & 69 deletions

File tree

‎client/src/boards/outcomes/components/layouts/global-layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ export default function GlobalLayout() {
8686
</div>
8787
</div>
8888
</header>
89-
<Outlet />
89+
<main id="main-content" tabIndex={-1}>
90+
<Outlet />
91+
</main>
9092
<Footer href="/devenir-etudiants/flux" title="#dataESR tableaux de bord" />
9193
</>
9294
);

‎client/src/boards/outcomes/pages/comparaison-profils/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,11 @@ export default function ComparaisonProfilsPage() {
3535
</Title>
3636
</Col>
3737
</Row>
38-
3938
<ProfilesTab
4039
axisOptions={baseData?.filterOptions ?? null}
4140
isLoadingOptions={baseLoading}
4241
cohortTotal={baseData?.totalStudents ?? 0}
4342
/>
44-
4543
<OutcomesDefinitionsTable definitions={OUTCOMES_DEFINITIONS} />
4644
</Container>
4745
);

‎client/src/boards/outcomes/pages/comparaison-profils/profiles/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,6 @@ export default function ProfilesTab({ axisOptions, isLoadingOptions, cohortTotal
220220
<Text className="fr-mb-2w">
221221
Sélectionnez 2 ou 3 profils pour comparer leurs trajectoires côte à côte.
222222
</Text>
223-
224223
<Row gutters>
225224
{profiles.map((p, i) => {
226225
const colSize = profiles.length === 3 ? 4 : 6;
@@ -255,13 +254,13 @@ export default function ProfilesTab({ axisOptions, isLoadingOptions, cohortTotal
255254

256255
<Text size="sm" className="fr-mt-3w">Part de chaque profil encore inscrite en formation supérieure</Text>
257256
<ChartWrapper
258-
config={{ id: "outcomes-profiles-line", title: "Position au fil des années", integrationURL, sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }] }}
257+
config={{ id: "outcomes-profiles-line", title: "Position au fil des années", integrationURL }}
259258
options={lineOptions}
260259
/>
261260

262261
<Text size="sm" className="fr-mt-3w">Répartition à 5 ans par profil</Text>
263262
<ChartWrapper
264-
config={{ id: "outcomes-profiles-stack", title: "Diplômés du supérieur vs sortants sans diplôme", integrationURL, sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }] }}
263+
config={{ id: "outcomes-profiles-stack", title: "Diplômés du supérieur vs sortants sans diplôme", integrationURL }}
265264
options={stackOptions}
266265
/>
267266

@@ -283,7 +282,7 @@ export default function ProfilesTab({ axisOptions, isLoadingOptions, cohortTotal
283282
) : (
284283
<ChartWrapper
285284
hideTitle
286-
config={{ id: `outcomes-profiles-donut-${badge}`, title: `Plus haut diplôme — Profil ${badge}`, sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }] }}
285+
config={{ id: `outcomes-profiles-donut-${badge}`, title: `Plus haut diplôme — Profil ${badge}` }}
287286
options={createDiplomaDonutOptions(d.rows, { effectif: d.nonDipl }, `Profil ${badge}`)}
288287
/>
289288
)}

‎client/src/boards/outcomes/pages/comparaison-profils/profiles/options.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ interface ProfileSeriesInput {
2121
export function createProfilesLineOptions(profiles: ProfileSeriesInput[]) {
2222
return createChartOptions("line", ({
2323
accessibility: { enabled: false },
24+
caption: {
25+
align: "left",
26+
style: { color: "var(--text-mention-grey)", fontSize: "11px" },
27+
text: "Source : MESRE-SIES.",
28+
verticalAlign: "bottom",
29+
},
2430
chart: { type: "line", backgroundColor: "transparent", height: 380 },
2531
title: { text: undefined },
2632
legend: { enabled: true, itemStyle: { color: getCssColor("text-default-grey") } },
@@ -56,7 +62,7 @@ export function createProfilesLineOptions(profiles: ProfileSeriesInput[]) {
5662
`<div style="display:flex;justify-content:space-between;gap:12px;font-size:12px;"><span style="color:${p.series.color};">■ ${p.series.name}</span><span style="font-weight:700;">${(p.y as number).toFixed(1)}%</span></div>`,
5763
)
5864
.join("");
59-
return `<div style="padding:8px 12px;min-width:180px;"><div style="font-weight:700;margin-bottom:6px;">${ctx.x}</div>${rows}</div>`;
65+
return `<div style="padding:8px 12px;min-width:180px;"><div style="font-weight:700;margin-bottom:6px;">${ctx.points?.[0]?.key ?? ctx.x}</div>${rows}</div>`;
6066
},
6167
},
6268
series: profiles.map((profile, index) => ({
@@ -126,7 +132,7 @@ export function createProfilesDiplomaStackOptions(profiles: ProfileStackInput[])
126132
const rows = (ctx.points || [])
127133
.map((p: any) => `<div style="display:flex;justify-content:space-between;gap:12px;font-size:12px;"><span style="color:${p.series.color};">■ ${p.series.name}</span><span style="font-weight:700;">${p.y.toFixed(1)}%</span></div>`)
128134
.join("");
129-
return `<div style="padding:8px 12px;min-width:220px;"><div style="font-weight:700;margin-bottom:6px;">${ctx.x}</div>${rows}</div>`;
135+
return `<div style="padding:8px 12px;min-width:220px;"><div style="font-weight:700;margin-bottom:6px;">${ctx.points?.[0]?.key ?? ctx.x}</div>${rows}</div>`;
130136
},
131137
},
132138
series: [

‎client/src/boards/outcomes/pages/croisements/heatmap/index.tsx‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Col, Row, Text, Title } from "@dataesr/dsfr-plus";
1+
import { Col, Row, Title } from "@dataesr/dsfr-plus";
22
import { useQueries } from "@tanstack/react-query";
33
import { useMemo, useState } from "react";
44
import { useSearchParams } from "react-router-dom";
@@ -132,13 +132,42 @@ export default function HeatmapTab() {
132132
return (
133133
<Row gutters>
134134
<Col lg={4}>
135-
<aside className="outcomes-flux-page__filters" aria-label="Axes du croisement">
136-
<Title as="h2" look="h3" className="fr-mb-3w">Axes à croiser</Title>
135+
<section className="outcomes-flux-page__filters" aria-label="Axes du croisement">
136+
<Title as="h2" look="h4" className="fr-mb-3w">Axes à croiser</Title>
137137
<section className="outcomes-flux-page__filters-section">
138138
{renderAxisSelect("Axe vertical", vAxis, hAxis, setVAxis)}
139139
{renderAxisSelect("Axe horizontal", hAxis, vAxis, setHAxis)}
140140
</section>
141-
</aside>
141+
</section>
142+
143+
{!sameAxis && !isLoading && chartOptions && (
144+
<Row gutters className="fr-mt-2w">
145+
{([
146+
{ key: "max", label: "Taux le plus élevé", cell: maxCell },
147+
{ key: "min", label: "Taux le plus faible", cell: minCell },
148+
] as const).map(({ label, cell }) => {
149+
const share = cell && ensembleTotal ? (cell.count / ensembleTotal) * 100 : null;
150+
return (
151+
<Col key={label} xs={12}>
152+
<div className="fr-tile fr-tile--sm fr-tile--no-icon">
153+
<div className="fr-tile__body">
154+
<h3 className="fr-tile__title">{label}</h3>
155+
<p className="fr-tile__desc">{cell ? `${cell.pct.toFixed(0)}%` : "—"}{cell ? ` — ${cell.vLabel} × ${cell.hLabel}` : ""}{share !== null ? ` (${share.toFixed(0)}% des étudiants)` : ""}</p>
156+
</div>
157+
</div>
158+
</Col>
159+
);
160+
})}
161+
<Col xs={12}>
162+
<div className="fr-tile fr-tile--sm fr-tile--no-icon">
163+
<div className="fr-tile__body">
164+
<h3 className="fr-tile__title">Plus grand écart</h3>
165+
<p className="fr-tile__desc">{minCell && maxCell ? `${Math.round(maxCell.pct - minCell.pct)} pts` : "—"}</p>
166+
</div>
167+
</div>
168+
</Col>
169+
</Row>
170+
)}
142171
</Col>
143172
<Col lg={8}>
144173
<div className="outcomes-flux-page__content">
@@ -155,41 +184,12 @@ export default function HeatmapTab() {
155184
<Title as="h2" look="h5" className="fr-mb-3w">
156185
{`${vAxisLabel} × ${hAxisLabel} — taux de diplômés dans le supérieur en 2023-2024 des néo-bacheliers inscrits en L1 en 2019`}
157186
</Title>
158-
<Row gutters>
159-
{([
160-
{ key: "max", label: "Taux de diplômés le plus élevé", cell: maxCell },
161-
{ key: "min", label: "Taux de diplômés le plus faible", cell: minCell },
162-
] as const).map(({ key, label, cell }) => {
163-
const share = cell && ensembleTotal ? (cell.count / ensembleTotal) * 100 : null;
164-
return (
165-
<Col key={key} xs={12} md={4}>
166-
<div className={`outcomes-croisements__card outcomes-croisements__card--${key} fr-p-2w`}>
167-
<Text size="sm" className="fr-mb-0" bold>{label}</Text>
168-
<p className="fr-h3 fr-mb-0">{cell ? `${cell.pct.toFixed(0)}%` : "—"}</p>
169-
<Text size="sm" className="fr-mb-0">{cell ? `${cell.vLabel} × ${cell.hLabel}` : "—"}</Text>
170-
{share !== null && (
171-
<Text size="sm" className="fr-mb-0">{`${share.toFixed(0)}% des étudiants concernés`}</Text>
172-
)}
173-
</div>
174-
</Col>
175-
);
176-
})}
177-
<Col xs={12} md={4}>
178-
<div className="outcomes-croisements__card outcomes-croisements__card--gap fr-p-2w">
179-
<Text size="sm" className="fr-mb-0" bold>Plus grand écart</Text>
180-
<p className="fr-h3 fr-mb-0">{minCell && maxCell ? `${Math.round(maxCell.pct - minCell.pct)} pts` : "—"}</p>
181-
</div>
182-
</Col>
183-
</Row>
184-
185187
<ChartWrapper
186188
hideTitle
187189
config={{
188190
id: "outcomes-croisements-heatmap",
189191
integrationURL: `/integration?chart_id=outcomesCroisementsHeatmap&v_axis=${vAxis}&h_axis=${hAxis}`,
190192
title: `${vAxisLabel} × ${hAxisLabel} — taux de diplômés dans le supérieur en 2023-2024 des néo-bacheliers inscrits en L1 en 2019`,
191-
subtitle: "Néo-bacheliers inscrits en L1 en 2019 · observation à 5 ans (2023-2024)",
192-
sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }],
193193
readingKey: {
194194
fr: (
195195
<>
@@ -199,7 +199,6 @@ export default function HeatmapTab() {
199199
</>
200200
),
201201
},
202-
203202
}}
204203
options={chartOptions}
205204
/>

‎client/src/boards/outcomes/pages/croisements/heatmap/options.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ export function createHeatmapOptions({
7575
marginTop: 60,
7676
marginBottom: 80,
7777
},
78+
title: {
79+
text: " ",
80+
},
7881
xAxis: {
7982
categories: xCategories,
8083
opposite: true,

‎client/src/boards/outcomes/pages/croisements/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.outcomes-croisements__card {
22
border: 1px solid var(--border-default-grey);
33
background: var(--background-alt-grey);
4+
text-align: center;
45
}
56

67
.outcomes-croisements__card--A {

‎client/src/boards/outcomes/pages/flux/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ export default function FluxPage() {
219219
</Row>
220220
<Row gutters>
221221
<Col lg={4}>
222-
<aside className="outcomes-flux-page__filters" aria-label="Filtres du graphique de flux">
222+
<section className="outcomes-flux-page__filters" aria-label="Filtres du graphique de flux">
223223
<Title as="h2" look="h4" className="fr-mb-3w">Filtres à sélectionner</Title>
224224
{FILTER_SECTIONS.map((section) => (
225225
<section key={section.title} className="outcomes-flux-page__filters-section">
@@ -236,7 +236,7 @@ export default function FluxPage() {
236236
</section>
237237
))}
238238
<Button className="fr-mt-3w" onClick={resetFilters}>Réinitialiser les filtres</Button>
239-
</aside>
239+
</section>
240240
</Col>
241241
<Col lg={8}>
242242
<div className="outcomes-flux-page__content">

‎client/src/boards/outcomes/pages/plus-haut-diplome/charts/diploma-donut/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export default function DiplomaDonut() {
4444
id: "outcomes-plus-haut-diplome-donut",
4545
integrationURL: `/integration?chart_id=outcomesPhdDonut&${searchParams.toString()}`,
4646
title,
47-
sources: [{ label: { fr: <>MESRE-SIES</> }, url: { fr: "https://data.enseignementsup-recherche.gouv.fr" } }],
4847
}}
4948
options={options}
5049
/>

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

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export default function PlusHautDiplomePage() {
174174
</Row>
175175
<Row gutters>
176176
<Col lg={4}>
177-
<aside className="outcomes-flux-page__filters" aria-label="Filtres du tableau plus haut diplôme">
177+
<section className="outcomes-flux-page__filters" aria-label="Filtres du tableau plus haut diplôme">
178178
<Title as="h2" look="h4" className="fr-mb-3w">Filtres à sélectionner</Title>
179179
{FILTER_SECTIONS.map((section) => (
180180
<section key={section.title} className="outcomes-flux-page__filters-section">
@@ -191,7 +191,7 @@ export default function PlusHautDiplomePage() {
191191
</section>
192192
))}
193193
<Button className="fr-mt-3w" onClick={resetFilters}>Réinitialiser les filtres</Button>
194-
</aside>
194+
</section>
195195
</Col>
196196
<Col lg={8}>
197197
<div className="outcomes-flux-page__content">
@@ -254,20 +254,32 @@ export default function PlusHautDiplomePage() {
254254
</table>
255255
</div>
256256

257-
<div className="outcomes-phd__kpis fr-mb-2w fr-mt-3w">
258-
<div className="outcomes-phd__kpi fr-p-2w">
259-
<p className="fr-text--sm fr-mb-1v">Néo-bacheliers inscrits en L1 en 2019</p>
260-
<p className="fr-h4 fr-mb-0">{formatNumber(data.totalStudents)}</p>
261-
</div>
262-
<div className="outcomes-phd__kpi fr-p-2w">
263-
<p className="fr-text--sm fr-mb-1v">Diplômés en {lastYearLabel}</p>
264-
<p className="fr-h4 fr-mb-0">{formatNumber(data.totals.diplomes.effectif)}</p>
265-
</div>
266-
<div className="outcomes-phd__kpi fr-p-2w">
267-
<p className="fr-text--sm fr-mb-1v">Non diplômés en {lastYearLabel}</p>
268-
<p className="fr-h4 fr-mb-0">{formatNumber(data.totals.nonDiplomes.effectif)}</p>
269-
</div>
270-
</div>
257+
<Row gutters className="fr-mb-2w fr-mt-3w">
258+
<Col xs={12} md={4}>
259+
<div className="fr-tile fr-tile--sm fr-tile--no-icon">
260+
<div className="fr-tile__body">
261+
<h3 className="fr-tile__title">Néo-bacheliers inscrits en L1 en 2019</h3>
262+
<p className="fr-tile__desc">{formatNumber(data.totalStudents)}</p>
263+
</div>
264+
</div>
265+
</Col>
266+
<Col xs={12} md={4}>
267+
<div className="fr-tile fr-tile--sm fr-tile--no-icon">
268+
<div className="fr-tile__body">
269+
<h3 className="fr-tile__title">Diplômés en {lastYearLabel}</h3>
270+
<p className="fr-tile__desc">{formatNumber(data.totals.diplomes.effectif)}</p>
271+
</div>
272+
</div>
273+
</Col>
274+
<Col xs={12} md={4}>
275+
<div className="fr-tile fr-tile--sm fr-tile--no-icon">
276+
<div className="fr-tile__body">
277+
<h3 className="fr-tile__title" >Non diplômés en {lastYearLabel}</h3>
278+
<p className="fr-tile__desc">{formatNumber(data.totals.nonDiplomes.effectif)}</p>
279+
</div>
280+
</div>
281+
</Col>
282+
</Row>
271283

272284
<Row className="fr-mt-3w">
273285
<Col>

0 commit comments

Comments
 (0)