Skip to content

Commit

Permalink
Merge pull request #35 from dataesr/chartUS
Browse files Browse the repository at this point in the history 
Chart us
  • Loading branch information
@jerem1508
jerem1508 authored May 30, 2024
2 parents c51a176 + 73af568 commit ecc8f20
Show file tree
Hide file tree
Showing 8 changed files with 806 additions and 36 deletions.
25 changes: 24 additions & 1 deletion client/src/api/atlas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export async function getNumberOfStudentsHistoricByLevel(geoId: string, currentY
if (geoId.startsWith('U')) { level = `niveau_geo=COMMUNE&uucr_id=${geoId}`; }
if (geoId === ('PAYS_100')) { level = `niveau_geo=REGION`; }


const url = `${VITE_APP_SERVER_URL}/atlas/number-of-students-historic-by-level?${level}`
const data = await fetch(url).then((response) => (response.json()));

Expand Down Expand Up @@ -83,4 +82,28 @@ export async function getGeoIdsFromSearch(q: string) {
export async function getParentsFromGeoId(geoId: string) {
const url = `${VITE_APP_SERVER_URL}/atlas/get-parents-from-geo-id?geo_id=${geoId}`;
return fetch(url).then((response) => (response.json()))
}

export async function getNumberOfStudentsBySectorAndSublevel(geoId: string, currentYear: string) {
// ex: http://localhost:3000/api/atlas/number-of-students-by-sector-and-sublevel?aca_id=A11&niveau_geo=DEPARTEMENT
let params = `niveau_geo=COMMUNE&geo_id=${geoId}&annee_universitaire=${currentYear}`;
if (geoId.startsWith('R')) { params = `niveau_geo=ACADEMIE&reg_id=${geoId}`; }
if (geoId.startsWith('D')) { params = `niveau_geo=COMMUNE&dep_id=${geoId}`; }
if (geoId.startsWith('A')) { params = `niveau_geo=DEPARTEMENT&aca_id=${geoId}`; }
if (geoId.startsWith('U')) { params = `niveau_geo=COMMUNE&uucr_id=${geoId}`; }
if (geoId === ('PAYS_100')) { params = `niveau_geo=REGION`; }
const url = `${VITE_APP_SERVER_URL}/atlas/number-of-students-by-sector-and-sublevel?${params}`
return fetch(url).then((response) => (response.json()))
}

export async function getNumberOfStudentsByGenderAndSublevel(geoId: string, currentYear: string) {
// ex: http://localhost:3000/api/atlas/number-of-students-by-gender-and-sublevel?aca_id=A11&niveau_geo=DEPARTEMENT
let params = `niveau_geo=COMMUNE&geo_id=${geoId}&annee_universitaire=${currentYear}`;
if (geoId.startsWith('R')) { params = `niveau_geo=ACADEMIE&reg_id=${geoId}`; }
if (geoId.startsWith('D')) { params = `niveau_geo=COMMUNE&dep_id=${geoId}`; }
if (geoId.startsWith('A')) { params = `niveau_geo=DEPARTEMENT&aca_id=${geoId}`; }
if (geoId.startsWith('U')) { params = `niveau_geo=COMMUNE&uucr_id=${geoId}`; }
if (geoId === ('PAYS_100')) { params = `niveau_geo=REGION`; }
const url = `${VITE_APP_SERVER_URL}/atlas/number-of-students-by-gender-and-sublevel?${params}`
return fetch(url).then((response) => (response.json()))
}
84 changes: 51 additions & 33 deletions client/src/pages/atlas/charts/atlas-map.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
import { Container, Row, Col, Button, Title, Badge } from "@dataesr/dsfr-plus";
import {
Badge,
Button,
Container, Row, Col,
Title,
} from "@dataesr/dsfr-plus";
import {
useSearchParams,
useLocation,
useNavigate,
useLocation
useSearchParams,
} from "react-router-dom";

import * as turf from '@turf/turf';

import Template from "../../../components/template/index.tsx";
import { getNumberOfStudentsHistoricByLevel, getGeoPolygon } from "../../../api/atlas.ts";
import { getNumberOfStudentsHistoricByLevel, getGeoPolygon, getNumberOfStudentsBySectorAndSublevel, getNumberOfStudentsByGenderAndSublevel } from "../../../api/atlas.ts";
import { MapBubbleDataProps } from "../../../types/atlas.ts";
import { useQuery } from "@tanstack/react-query";
import MapSkeleton from "./skeletons/map.tsx";
import MapWithPolygonHighcharts from "./map-with-polygon-highcharts.tsx";
import { MapBubbleDataProps } from "../../../types/atlas.ts";
import MapWithPolygonHighchartsPie from "./map-with-polygon-highcharts-pie/index.tsx";

import MapPieSectors from "./map-pie-sectors/index.jsx";
import MapPieGender from "./map-pie-genders/index.jsx";
import Template from "../../../components/template/index.tsx";

export default function AtlasMap() {
const location = useLocation();
const path = location.pathname.split('/');
const selectedTab = path[path.length - 1];

console.log('selectedTab', selectedTab);

const [searchParams] = useSearchParams();
const navigate = useNavigate();

const geoId = searchParams.get('geo_id') || '';
const currentYear = searchParams.get('annee_universitaire') || '2022-23';

const { data: dataHistoric, isLoading: isLoadingHistoric } = useQuery({
queryKey: ["atlas/number-of-students-historic-by-level", geoId],
queryKey: ["atlas/number-of-students-historic-by-level", geoId, currentYear],
queryFn: () => getNumberOfStudentsHistoricByLevel(geoId, currentYear)
})

Expand All @@ -38,9 +39,19 @@ export default function AtlasMap() {
queryFn: () => getGeoPolygon(geoId)
})

const { data: dataSectors, isLoading: isLoadingDataSectors } = useQuery({
queryKey: ["atlas/get-number-of-students-by-sector-and-sublevel", geoId, currentYear],
queryFn: () => getNumberOfStudentsBySectorAndSublevel(geoId, currentYear)
})

const { data: dataGenders, isLoading: isLoadingDataGenders } = useQuery({
queryKey: ["atlas/get-number-of-students-by-gender-and-sublevel", geoId, currentYear],
queryFn: () => getNumberOfStudentsByGenderAndSublevel(geoId, currentYear)
})

if (isLoadingPolygons || !polygonsData || !polygonsData.length
|| isLoadingHistoric || !dataHistoric?.data || !dataHistoric?.data.length) {
return <div>Loading...</div>
return <MapSkeleton />;
}

const getSubLevel = () => {
Expand All @@ -60,13 +71,10 @@ export default function AtlasMap() {
return 'Effectifs étudiants de la commune';
}

function SubList({ data }) {
if (isLoadingHistoric) {
return <Template />;
}
if (!data) {
return null;
}
function SubList() {
if (isLoadingHistoric) { return <Template height="338" />; }
if (!dataHistoric?.data) { return null; }

return (
<Container fluid as="section">
<Row style={{ width: "100%" }}>
Expand All @@ -81,7 +89,7 @@ export default function AtlasMap() {
</Row>
<div style={{ height: '338px', overflow: 'auto' }}>
{
data.slice(0, 15).map((item) => (
dataHistoric?.data.slice(0, 15).map((item) => (
<Row style={{ width: "100%", borderBottom: '1px solid #ddd' }} key={item.geo_nom}>
<div style={{ flexGrow: "1" }}>
{item.geo_nom}
Expand Down Expand Up @@ -112,10 +120,8 @@ export default function AtlasMap() {
);
}


function MapSelector() {
const mapbubbleData: MapBubbleDataProps = [];

switch (selectedTab) {
case 'general':
dataHistoric.data.forEach((item) => {
Expand All @@ -134,25 +140,37 @@ export default function AtlasMap() {
return (
<MapWithPolygonHighcharts
currentYear={currentYear}
isLoading={isLoadingHistoric}
mapbubbleData={mapbubbleData}
polygonsData={polygonsData}
/>
);

case 'effectifs-par-secteurs':
return (
<MapWithPolygonHighchartsPie />
)
<MapPieSectors
currentYear={currentYear}
isLoading={isLoadingDataSectors}
mapPieData={dataSectors}
polygonsData={polygonsData}
/>
);

case 'effectifs-par-genre':
return (
<MapPieGender
currentYear={currentYear}
isLoading={isLoadingDataGenders}
mapPieData={dataGenders}
polygonsData={polygonsData}
/>
);

default:
break;
}


// selectedTab

}


return (
<Container as="section" fluid>
<Row>
Expand All @@ -167,7 +185,7 @@ export default function AtlasMap() {
<MapSelector />
</Col>
<Col md={5}>
<SubList data={dataHistoric?.data} />
<SubList />
</Col>
</Row>
</Container>
Expand Down
Loading

0 comments on commit ecc8f20

Please sign in to comment.