Skip to content

Commit 6dbe060

Browse files
Mihoub2Mihoub2
committed
fix(outcomes): croisement replace tiles
1 parent 9e2d0fc commit 6dbe060

3 files changed

Lines changed: 55 additions & 45 deletions

File tree

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -128,15 +128,17 @@ function ProfileCard({ badge, profile, axisOptions, canRemove, tauxDipl, total,
128128
</Col>
129129
)}
130130
</Row>
131-
{PROFILE_FIELDS.map(({ field, label }) => (
132-
<OutcomesFilterSelect
133-
key={field}
134-
label={label}
135-
options={axisOptions[field] || []}
136-
selectedKey={profile[field] ?? null}
137-
onSelect={(value) => onChange({ ...profile, [field]: value })}
138-
/>
139-
))}
131+
<div className="outcomes-croisements__fields">
132+
{PROFILE_FIELDS.map(({ field, label }) => (
133+
<OutcomesFilterSelect
134+
key={field}
135+
label={label}
136+
options={axisOptions[field] || []}
137+
selectedKey={profile[field] ?? null}
138+
onSelect={(value) => onChange({ ...profile, [field]: value })}
139+
/>
140+
))}
141+
</div>
140142
<Row gutters className="fr-mt-2w" >
141143
<Col xs={6}>
142144
<Text size="sm" className="fr-mb-0">Taux de diplômés du supérieur</Text>

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

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -139,38 +139,41 @@ export default function HeatmapTab() {
139139
{renderAxisSelect("Axe horizontal", hAxis, vAxis, setHAxis)}
140140
</section>
141141
</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-
)}
171142
</Col>
172143
<Col lg={8}>
173144
<div className="outcomes-flux-page__content">
145+
{!sameAxis && !isLoading && chartOptions && (
146+
<Row gutters className="fr-mb-2w">
147+
{([
148+
{ key: "max", label: "Taux le plus élevé", cell: maxCell },
149+
{ key: "min", label: "Taux le plus faible", cell: minCell },
150+
] as const).map(({ label, cell }) => {
151+
const share = cell && ensembleTotal ? (cell.count / ensembleTotal) * 100 : null;
152+
return (
153+
<Col key={label} xs={12} sm={4}>
154+
<div className="fr-tile fr-tile--sm fr-tile--no-icon">
155+
<div className="fr-tile__body">
156+
<p className="fr-text--sm fr-mb-0">{label}</p>
157+
<p className="fr-mb-0 outcomes-heatmap__stat-value">{cell ? `${cell.pct.toFixed(0)}%` : "—"}</p>
158+
{cell && <p className="fr-text--sm fr-mb-0">{cell.vLabel} × {cell.hLabel}</p>}
159+
{share !== null && <p className="fr-text--xs fr-mb-0 outcomes-heatmap__stat-note">{share.toFixed(0)}% des étudiants</p>}
160+
</div>
161+
</div>
162+
</Col>
163+
);
164+
})}
165+
<Col xs={12} sm={4}>
166+
<div className="fr-tile fr-tile--no-icon fr-tile--sm">
167+
<div className="fr-tile__body">
168+
<p className="fr-text--sm fr-mb-0">Plus grand écart</p>
169+
<p className="fr-mb-0 outcomes-heatmap__stat-value">{minCell && maxCell ? `${Math.round(maxCell.pct - minCell.pct)} pts` : "—"}</p>
170+
{minCell && maxCell && <p className="fr-text--xs fr-mb-0 outcomes-heatmap__stat-note">entre {maxCell.vLabel} × {maxCell.hLabel} et {minCell.vLabel} × {minCell.hLabel}</p>}
171+
</div>
172+
</div>
173+
</Col>
174+
</Row>
175+
)}
176+
174177
{sameAxis && (
175178
<Callout colorFamily="pink-macaron" icon="fr-icon-information-line">
176179
Sélectionnez deux axes différents pour visualiser le croisement.

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
text-align: center;
55
}
66

7+
.outcomes-croisements__fields {
8+
text-align: left;
9+
}
10+
711
.outcomes-croisements__card--A {
812
border-top: 4px solid var(--blue-france-main-525);
913
}
@@ -14,14 +18,15 @@
1418
border-top: 4px solid var(--green-emeraude-main-632);
1519
}
1620

17-
.outcomes-croisements__card--max {
18-
border-top: 4px solid var(--green-emeraude-main-632);
21+
.outcomes-heatmap__stat-value {
22+
font-size: 2rem;
23+
font-weight: 700;
24+
line-height: 1.1;
25+
color: var(--text-title-blue-france);
1926
}
20-
.outcomes-croisements__card--min {
21-
border-top: 4px solid var(--pink-tuile-main-556);
22-
}
23-
.outcomes-croisements__card--gap {
24-
border-top: 4px solid var(--blue-france-main-525);
27+
28+
.outcomes-heatmap__stat-note {
29+
color: var(--text-mention-grey);
2530
}
2631

2732
.outcomes-croisements__value--A {

0 commit comments

Comments
 (0)