Skip to content

Commit 5816420

Browse files
Mihoub2Mihoub2
committed
fix(outcomes): update colors and add legend to sankey
1 parent 1082d0a commit 5816420

5 files changed

Lines changed: 95 additions & 10 deletions

File tree

‎client/src/boards/outcomes/colors.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
--outcomes-lp: var(--green-emeraude-main-632);
1111
--outcomes-m1: var(--green-bourgeon-main-640);
1212
--outcomes-m2: var(--green-archipel-main-557);
13-
--outcomes-sts: var(--yellow-tournesol-main-731);
14-
--outcomes-iut: var(--yellow-moutarde-main-679);
15-
--outcomes-cpge: var(--pink-tuile-main-556);
13+
--outcomes-sts: var(--red-marianne-main-472);
14+
--outcomes-iut: var(--pink-macaron-main-689);
15+
--outcomes-cpge: var(--blue-ecume-main-400);
1616
--outcomes-ecoles: var(--orange-terre-battue-main-645);
17+
--outcomes-sante: var(--pink-tuile-main-556);
1718
--outcomes-autres: var(--brown-cafe-creme-main-782);
1819
--outcomes-sortants-diplomes: var(--brown-caramel-main-648);
1920
--outcomes-sortants-non-diplomes: var(--beige-gris-galet-main-702);

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Callout from "../../../../../../components/callout";
77
import ChartWrapper from "../../../../../../components/chart-wrapper";
88
import { getCssColor } from "../../../../../../utils/colors";
99
import { type OutcomesFilterField, type OutcomesFluxLink, useOutcomesFlux } from "../../../../api";
10-
import { createSankeyOptions } from "./options";
10+
import { createSankeyOptions, SITUATION_ORDER } from "./options";
1111

1212
interface SankeyChartProps {
1313
exportMetadata?: {
@@ -192,11 +192,32 @@ function SankeyChartView({
192192
};
193193
}, [exportMetadata?.filtersText, links, totalStudents]);
194194

195+
const presentSituations = useMemo(() => {
196+
const set = new Set<string>();
197+
links.forEach((l) => {
198+
if (l.source_situation) set.add(l.source_situation);
199+
if (l.target_situation) set.add(l.target_situation);
200+
});
201+
return [...set].sort((a, b) => (SITUATION_ORDER[a] ?? 99) - (SITUATION_ORDER[b] ?? 99));
202+
}, [links]);
203+
195204
if (!options) return null;
196205

206+
const legend = (
207+
<div className="outcomes-flux-sankey__legend">
208+
{presentSituations.map((sit) => (
209+
<span key={sit} className="outcomes-flux-sankey__legend-item">
210+
<span className={`outcomes-flux-sankey__legend-color outcomes-flux-sankey__legend-color--${sit}`} />
211+
{SITUATION_LABELS[sit] || sit}
212+
</span>
213+
))}
214+
</div>
215+
);
216+
197217
return (
198218
<ChartWrapper
199219
hideTitle={hideTitle}
220+
legend={legend}
200221
config={{
201222
id: "outcomes-flux-sankey",
202223
integrationURL: `/integration?chart_id=outcomesFluxSankey&${searchParams.toString()}`,

‎client/src/boards/outcomes/pages/flux/charts/sankey/options.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const SITUATION_LABELS: Record<string, string> = {
3838
SIT13: "Sortants",
3939
};
4040

41-
const SITUATION_COLOR_KEYS: Record<string, string> = {
41+
export const SITUATION_COLOR_KEYS: Record<string, string> = {
4242
SIT01: "outcomes-l1",
4343
SIT02: "outcomes-l2",
4444
SIT03: "outcomes-l3",
@@ -48,7 +48,7 @@ const SITUATION_COLOR_KEYS: Record<string, string> = {
4848
SIT07: "outcomes-cpge",
4949
SIT08: "outcomes-iut",
5050
SIT09: "outcomes-lp",
51-
SIT10: "outcomes-autres",
51+
SIT10: "outcomes-sante",
5252
SIT11: "outcomes-ecoles",
5353
SIT12: "outcomes-autres",
5454
SIT13: "outcomes-sortants-diplomes",
@@ -66,7 +66,7 @@ const SITUATION_YEAR_LEVEL: Record<string, string> = {
6666
SIT09: "3e année",
6767
};
6868

69-
const SITUATION_ORDER: Record<string, number> = {
69+
export const SITUATION_ORDER: Record<string, number> = {
7070
SIT05: 0, // M2
7171
SIT04: 1, // M1
7272
SIT03: 2, // L3
@@ -253,7 +253,8 @@ export function createSankeyOptions(links: OutcomesFluxLink[], totalStudents = 0
253253
chart: {
254254
height: 800,
255255
backgroundColor: "transparent",
256-
spacingBottom: 120,
256+
spacingBottom: 100,
257+
257258
spacingLeft: 24,
258259
spacingRight: 24,
259260
events: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export default function FluxPage() {
240240
</Col>
241241
<Col lg={8}>
242242
<div className="outcomes-flux-page__content">
243-
<ChartWrapper.Title config={{ id: "outcomes-flux-sankey", title: "Parcours des néo-bacheliers inscrits en L1 en 2019" }} />
243+
<ChartWrapper.Title config={{ id: "outcomes-flux-sankey", title: `Parcours des néo-bacheliers inscrits en L1 en 2019 (seuil : ${minValue} étudiant${minValue > 1 ? "s" : ""})` }} />
244244
{activeFiltersElement}
245245
{(isLoading || (isFetching && !data)) && <DefaultSkeleton height="540px" />}
246246
{!isLoading && isFetching && data && (

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

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,69 @@
3333
}
3434

3535
.outcomes-flux-page__params--after-chart {
36-
margin-top: -1.75rem;
36+
margin-top: 0;
37+
}
38+
39+
.outcomes-flux-sankey__legend {
40+
display: flex;
41+
flex-wrap: wrap;
42+
column-gap: 1rem;
43+
margin-bottom: 1rem;
44+
color: var(--text-title-grey);
45+
}
46+
47+
.outcomes-flux-sankey__legend-item {
48+
display: flex;
49+
align-items: center;
50+
gap: 0.375rem;
51+
font-size: 0.875rem;
52+
}
53+
54+
.outcomes-flux-sankey__legend-color {
55+
width: 0.625rem;
56+
height: 0.625rem;
57+
flex-shrink: 0;
58+
border-radius: 20px;
59+
60+
&--SIT01 {
61+
background: var(--outcomes-l1);
62+
}
63+
&--SIT02 {
64+
background: var(--outcomes-l2);
65+
}
66+
&--SIT03 {
67+
background: var(--outcomes-l3);
68+
}
69+
&--SIT04 {
70+
background: var(--outcomes-m1);
71+
}
72+
&--SIT05 {
73+
background: var(--outcomes-m2);
74+
}
75+
&--SIT06 {
76+
background: var(--outcomes-sts);
77+
}
78+
&--SIT07 {
79+
background: var(--outcomes-cpge);
80+
}
81+
&--SIT08 {
82+
background: var(--outcomes-iut);
83+
}
84+
&--SIT09 {
85+
background: var(--outcomes-lp);
86+
}
87+
&--SIT10 {
88+
background: var(--outcomes-sante);
89+
}
90+
&--SIT11 {
91+
background: var(--outcomes-ecoles);
92+
}
93+
&--SIT12 {
94+
background: var(--outcomes-autres);
95+
}
96+
&--SIT13 {
97+
background: var(--outcomes-sortants-diplomes);
98+
}
3799
}
38100

39101
.outcomes-phd__kpis {

0 commit comments

Comments
 (0)