Skip to content

Commit

Permalink
feat(atlas): ajout du contexte Atlas et récupération des constantes s…
Browse files Browse the repository at this point in the history 
…ur le serveur
  • Loading branch information
@jerem1508
jerem1508 committed Feb 4, 2025
1 parent 033594b commit 6b779ac
Show file tree
Hide file tree
Showing 15 changed files with 238 additions and 123 deletions.
2 changes: 1 addition & 1 deletion client/src/pages/admin/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export default function Dashboard() {
<div className="fr-table__container">
<div className="fr-table__content">
<table>
<caption>Constantes applicatives du serveur</caption>
<caption>Constantes applicatives</caption>
<thead>
<tr>
<th>Clé</th>
Expand Down
61 changes: 32 additions & 29 deletions client/src/pages/atlas/components/main/header/years-modal-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,26 @@ import { useQuery } from '@tanstack/react-query';

import { Button, Modal, ModalContent, ModalTitle } from '@dataesr/dsfr-plus';
import { getFiltersValues } from '../../../../../api/atlas.ts';
import { DEFAULT_CURRENT_YEAR } from '../../../../../constants.tsx';
// import { DEFAULT_CURRENT_YEAR } from '../../../../../constants.tsx';
import { useAtlas } from '../../../useAtlas.tsx';

export default function YearsModalButton() {
const [isOpen, setIsOpen] = useState(false);
const [searchParams] = useSearchParams();
const currentYear = searchParams.get('annee_universitaire') || DEFAULT_CURRENT_YEAR;
const geoId = searchParams.get('geo_id') || '';
const { DEFAULT_CURRENT_YEAR } = useAtlas();
console.log("DEFAULT_CURRENT_YEAR", DEFAULT_CURRENT_YEAR);

const currentYear =
searchParams.get("annee_universitaire") || DEFAULT_CURRENT_YEAR;
const geoId = searchParams.get("geo_id") || "";

const { data: filtersValues, isLoading: isLoadingFiltersValues } = useQuery({
queryKey: ["atlas/get-filters-values", geoId],
queryFn: () => getFiltersValues(geoId)
})
queryFn: () => getFiltersValues(geoId),
});

if (isLoadingFiltersValues) {
return <div>Chargement des filtres ...</div>
return <div>Chargement des filtres ...</div>;
}

function YearsList() {
Expand All @@ -33,46 +38,44 @@ export default function YearsModalButton() {
id="select"
name="select"
onChange={(e) => {
searchParams.set('annee_universitaire', e.target.value);
searchParams.set("annee_universitaire", e.target.value);
window.location.search = searchParams.toString();
}}
>
{
filtersValues.annees_universitaires.all.map((value: string) => (
<option
disabled={!filtersValues?.annees_universitaires?.onlyWithData.includes(value)}
key={value}
value={value}
>
{`Années universitaire ${value}`}
{
!filtersValues?.annees_universitaires?.onlyWithData.includes(value) && (
<> - non disponibles</>
)
}
</option>
))
}
{filtersValues.annees_universitaires.all.map((value: string) => (
<option
disabled={
!filtersValues?.annees_universitaires?.onlyWithData.includes(
value
)
}
key={value}
value={value}
>
{`Années universitaire ${value}`}
{!filtersValues?.annees_universitaires?.onlyWithData.includes(
value
) && <> - non disponibles</>}
</option>
))}
</select>
</div>
)
);
}

return (
<>
<Button
className="button"
color="pink-tuile"
icon='calendar-2-line'
icon="calendar-2-line"
onClick={() => setIsOpen(true)}
size="sm"
>
Année universitaire&nbsp;<strong>{currentYear}</strong>
</Button>
<Modal isOpen={isOpen} hide={() => setIsOpen(false)} size='lg'>
<ModalTitle>
Sélection d'une année universitaire
</ModalTitle>
<Modal isOpen={isOpen} hide={() => setIsOpen(false)} size="lg">
<ModalTitle>Sélection d'une année universitaire</ModalTitle>
<ModalContent>
<YearsList />
</ModalContent>
Expand Down
46 changes: 23 additions & 23 deletions client/src/pages/atlas/components/main/tabs/components/sub-list-genders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@ import { useQuery } from "@tanstack/react-query";

import Template from "../../../../../../components/template/index.tsx";
import { getNumberOfStudentsByGenderAndSublevel } from "../../../../../../api/index.ts";
import { DEFAULT_CURRENT_YEAR } from "../../../../../../constants.tsx";
import { getSubLevel } from "../../../../utils/index.tsx";
// import { DEFAULT_CURRENT_YEAR } from "../../../../../../constants.tsx";
import { useAtlas } from "../../../../useAtlas.tsx";

const MAX_ELEMENTS = 6;

export default function SubListGenders() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const geoId = searchParams.get("geo_id") || "";
const currentYear = searchParams.get("annee_universitaire") || DEFAULT_CURRENT_YEAR;
const { DEFAULT_CURRENT_YEAR } = useAtlas();
const currentYear =
searchParams.get("annee_universitaire") || DEFAULT_CURRENT_YEAR;
const [max, setMax] = useState(MAX_ELEMENTS);

const { data, isLoading } = useQuery({
Expand All @@ -32,11 +35,9 @@ export default function SubListGenders() {
if (!data) {
return null;
}

const maxValue: number = Math.max(
...data.map((el) => el.effectif_total)
);


const maxValue: number = Math.max(...data.map((el) => el.effectif_total));

// return null;
// // Special case "Saint-Martin" (geo_id = 978)
// data.data.forEach(item => {
Expand All @@ -50,7 +51,7 @@ export default function SubListGenders() {
<Row style={{ width: "100%" }}>
<div style={{ flexGrow: "1" }}>
<strong>
<i>{getSubLevel({geoId})}</i>
<i>{getSubLevel({ geoId })}</i>
</strong>
</div>
<div className="fr-mb-1w">
Expand All @@ -59,17 +60,15 @@ export default function SubListGenders() {
</Row>
<ul style={{ overflow: "auto", listStyle: "none", padding: 0 }}>
{data.slice(0, max).map((item) => {
const size_f = Math.round(item.effectif_feminin * 100 / maxValue);
const size_m = Math.round(item.effectif_masculin * 100 / maxValue);
const size_f = Math.round((item.effectif_feminin * 100) / maxValue);
const size_m = Math.round((item.effectif_masculin * 100) / maxValue);

return (
<li key={item.id}>
<Row key={item.id} style={{ width: "100%" }}>
<div style={{ flexGrow: "1" }}>{item.nom}</div>
<div>
<strong>
{item.effectif_total.toLocaleString()}
</strong>
<strong>{item.effectif_total.toLocaleString()}</strong>
{["R", "D", "A", "U", "P"].includes(geoId?.charAt(0)) && (
<Button
className="fr-ml-1w"
Expand Down Expand Up @@ -110,13 +109,14 @@ export default function SubListGenders() {
borderBottomRightRadius: "3px",
}}
/>
<span
<span
aria-hidden="true"
className="fr-tooltip fr-placement"
id={`tooltip_${item.id}`}
role="tooltip"
className="fr-tooltip fr-placement"
id={`tooltip_${item.id}`}
role="tooltip"
>
Effectifs <strong>{item.nom}</strong> par genre pour l'année universitaire {currentYear}
Effectifs <strong>{item.nom}</strong> par genre pour l'année
universitaire {currentYear}
<br />
Féminin : {item.effectif_feminin.toLocaleString()} étudiantes
<br />
Expand All @@ -125,17 +125,17 @@ export default function SubListGenders() {
</li>
);
})}
{
data.length > MAX_ELEMENTS && (
{data.length > MAX_ELEMENTS && (
<Button
onClick={() => setMax(max === MAX_ELEMENTS ? data.length : MAX_ELEMENTS)}
onClick={() =>
setMax(max === MAX_ELEMENTS ? data.length : MAX_ELEMENTS)
}
size="sm"
variant="text"
>
{max === MAX_ELEMENTS ? "Voir plus" : "Voir moins"}
</Button>
)
}
)}
</ul>
</Container>
);
Expand Down
56 changes: 31 additions & 25 deletions client/src/pages/atlas/components/main/tabs/components/sub-list-sectors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@ import { useQuery } from "@tanstack/react-query";

import Template from "../../../../../../components/template/index.tsx";
import { getNumberOfStudentsBySectorAndSublevel } from "../../../../../../api/index.ts";
import { DEFAULT_CURRENT_YEAR } from "../../../../../../constants.tsx";
import { getSubLevel } from "../../../../utils/index.tsx";
// import { DEFAULT_CURRENT_YEAR } from "../../../../../../constants.tsx";
import { useAtlas } from "../../../../useAtlas.tsx";

const MAX_ELEMENTS = 6;

export default function SubListSectors() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const geoId = searchParams.get("geo_id") || "";
const currentYear = searchParams.get("annee_universitaire") || DEFAULT_CURRENT_YEAR;
const { DEFAULT_CURRENT_YEAR } = useAtlas();
const currentYear =
searchParams.get("annee_universitaire") || DEFAULT_CURRENT_YEAR;
const [max, setMax] = useState(MAX_ELEMENTS);

const { data, isLoading } = useQuery({
Expand All @@ -32,11 +35,9 @@ export default function SubListSectors() {
if (!data) {
return null;
}

const maxValue: number = Math.max(
...data.map((el) => el.effectif_total)
);


const maxValue: number = Math.max(...data.map((el) => el.effectif_total));

// return null;
// // Special case "Saint-Martin" (geo_id = 978)
// data.data.forEach(item => {
Expand All @@ -50,7 +51,7 @@ export default function SubListSectors() {
<Row style={{ width: "100%" }}>
<div style={{ flexGrow: "1" }}>
<strong>
<i>{getSubLevel({geoId})}</i>
<i>{getSubLevel({ geoId })}</i>
</strong>
</div>
<div className="fr-mb-1w">
Expand All @@ -59,17 +60,19 @@ export default function SubListSectors() {
</Row>
<ul style={{ overflow: "auto", listStyle: "none", padding: 0 }}>
{data.slice(0, max).map((item) => {
const size_public = Math.round(item.effectif_secteur_public * 100 / maxValue);
const size_prive = Math.round(item.effectif_secteur_prive * 100 / maxValue);
const size_public = Math.round(
(item.effectif_secteur_public * 100) / maxValue
);
const size_prive = Math.round(
(item.effectif_secteur_prive * 100) / maxValue
);

return (
<li key={item.id}>
<Row key={item.id} style={{ width: "100%" }}>
<div style={{ flexGrow: "1" }}>{item.nom}</div>
<div>
<strong>
{item.effectif_total.toLocaleString()}
</strong>
<strong>{item.effectif_total.toLocaleString()}</strong>
{["R", "D", "A", "U", "P"].includes(geoId?.charAt(0)) && (
<Button
className="fr-ml-1w"
Expand Down Expand Up @@ -110,32 +113,35 @@ export default function SubListSectors() {
borderBottomRightRadius: "3px",
}}
/>
<span
<span
aria-hidden="true"
className="fr-tooltip fr-placement"
id={`tooltip_${item.id}`}
role="tooltip"
className="fr-tooltip fr-placement"
id={`tooltip_${item.id}`}
role="tooltip"
>
Effectifs <strong>{item.nom}</strong> par secteur pour l'année universitaire {currentYear}
Effectifs <strong>{item.nom}</strong> par secteur pour l'année
universitaire {currentYear}
<br />
Secteur public : {item.effectif_secteur_public.toLocaleString()} étudiants
Secteur public : {item.effectif_secteur_public.toLocaleString()}{" "}
étudiants
<br />
Secteur privé : {item.effectif_secteur_prive.toLocaleString()} étudiants
Secteur privé : {item.effectif_secteur_prive.toLocaleString()}{" "}
étudiants
</span>
</li>
);
})}
{
data.length > MAX_ELEMENTS && (
{data.length > MAX_ELEMENTS && (
<Button
onClick={() => setMax(max === MAX_ELEMENTS ? data.length : MAX_ELEMENTS)}
onClick={() =>
setMax(max === MAX_ELEMENTS ? data.length : MAX_ELEMENTS)
}
size="sm"
variant="text"
>
{max === MAX_ELEMENTS ? "Voir plus" : "Voir moins"}
</Button>
)
}
)}
</ul>
</Container>
);
Expand Down
Loading

0 comments on commit 6b779ac

Please sign in to comment.