add special case for level France

dataesr · Jun 14, 2024 · 84dd264 · 84dd264
1 parent 5a813d9
commit 84dd264
Show file tree

Hide file tree

Showing 6 changed files with 301 additions and 130 deletions.
diff --git a/client/src/pages/atlas/charts/map-with-polygon-and-bubbles.tsx b/client/src/pages/atlas/charts/map-with-polygon-and-bubbles.tsx
@@ -9,11 +9,13 @@ highchartsMap(Highcharts);
 
 export default function MapWithPolygonAndBubbles({
   currentYear,
+  idToFocus,
   isLoading,
   mapbubbleData = [],
   polygonsData = [],
 }: {
   currentYear: string;
+  idToFocus?: string;
   isLoading: boolean;
   mapbubbleData: MapBubbleDataProps;
   polygonsData: PolygonsDataProps;
@@ -56,23 +58,66 @@ export default function MapWithPolygonAndBubbles({
         color: "#D5706F",
         data: mapbubbleData,
         cursor: "pointer",
+        showInLegend: false,
       },
     ],
   };
 
+  const currentId = idToFocus || geoId;
+
   // special case : Normandie - ignore St-Pierre-et-Miquelon
-  if (geoId === "R28") {
+  if (currentId === "R28") {
     mapOptions["mapView"] = {
       center: [-0.3, 49],
       zoom: 7.5,
     };
   }
 
-  // special case : France - ignore DROM-COM
-  if (geoId === "PAYS_100") {
+  // special case : France - centeringOnMetropolitanFrance
+  if (currentId === "PAYS_100") {
     mapOptions["mapView"] = {
       center: [2.5, 47],
-      zoom: 5.5,
+      zoom: 5.7,
+    };
+  }
+
+  // special case : France but idToFocus === Guadeloupe
+  if (geoId === "PAYS_100" && currentId === "R01") {
+    mapOptions["mapView"] = {
+      center: [-61.55, 15.35],
+      zoom: 8,
+    };
+  }
+
+  // special case : France but idToFocus === Martinique
+  if (geoId === "PAYS_100" && currentId === "R02") {
+    mapOptions["mapView"] = {
+      center: [-61, 13.8],
+      zoom: 8,
+    };
+  }
+
+  // special case : France but idToFocus === Guyanne
+  if (geoId === "PAYS_100" && currentId === "R03") {
+    mapOptions["mapView"] = {
+      center: [-53, -1.1],
+      zoom: 5.4,
+    };
+  }
+
+  // special case : France but idToFocus === La Réunion
+  if (geoId === "PAYS_100" && currentId === "R04") {
+    mapOptions["mapView"] = {
+      center: [55.55, -21.95],
+      zoom: 8,
+    };
+  }
+
+  // special case : France but idToFocus === Mayotte
+  if (geoId === "PAYS_100" && currentId === "R06") {
+    mapOptions["mapView"] = {
+      center: [45.1, -13.5],
+      zoom: 8.3,
     };
   }
 

diff --git a/client/src/pages/atlas/components/atlas-map/index.tsx b/client/src/pages/atlas/components/atlas-map/index.tsx
@@ -17,6 +17,8 @@ import MapPieGender from "../../charts/map-pie-genders/index.jsx";
 import FilieresList from "../../../../components/filieres-list/index.tsx";
 import SubList from "./sub-list.tsx";
 
+import "./styles.scss";
+
 export default function AtlasMap() {
   const location = useLocation();
   const path = location.pathname.split("/");
@@ -70,47 +72,102 @@ export default function AtlasMap() {
 
   function MapSelector() {
     const mapbubbleData: MapBubbleDataProps = [];
-    switch (selectedTab) {
-      case "general":
-        dataHistoric.data.forEach((item) => {
-          /*
-            let calculateCenter;
-            console.log(polygon);
-
-            switch (geoId) {
-              case "R28": // special case : Normandie - ignore St-Pierre-et-Miquelon's coordinates [-56,..]
-                calculateCenter = turf.centerOfMass({
-                  coordinates: polygon.coordinates.filter(
-                    (el) => el.coordinates[0][0][0] > -2
-                  ),
-                  type: "MultiPolygon",
-                });
-                break;
-
-              case "PAYS_100": // special case : France - ignore DROM-COM' coordinates with ids
-                break;
-
-              default:
-                calculateCenter = turf.centerOfMass(polygon);
-            }
-*/
-
-          const polygon =
-            polygonsData.find((d) => d.originalId === item.geo_id)?.geometry ||
-            null;
-          if (polygon !== "undefined" && polygon !== null) {
-            const calculateCenter = turf.centerOfMass(polygon);
-            mapbubbleData.push({
-              z:
-                item.data.find((d) => d.annee_universitaire === currentYear)
-                  ?.effectif || 0,
-              name: item.geo_nom,
-              lat: calculateCenter.geometry.coordinates[1],
-              lon: calculateCenter.geometry.coordinates[0],
-            });
-          }
+    dataHistoric.data.forEach((item) => {
+      const polygon =
+        polygonsData.find((d) => d.originalId === item.geo_id)?.geometry ||
+        null;
+      if (polygon !== "undefined" && polygon !== null) {
+        const calculateCenter = turf.centerOfMass(polygon);
+        mapbubbleData.push({
+          z:
+            item.data.find((d) => d.annee_universitaire === currentYear)
+              ?.effectif || 0,
+          name: item.geo_nom,
+          lat: calculateCenter.geometry.coordinates[1],
+          lon: calculateCenter.geometry.coordinates[0],
         });
+      }
+    });
+
+    // France case
+    if (geoId === "PAYS_100") {
+      return (
+        <div className="atlas-map fr-mb-5w">
+          <Row gutters>
+            <Col>
+              <div style={{ width: "100%", height: "100%" }}>
+                <MapWithPolygonAndBubbles
+                  currentYear={currentYear}
+                  isLoading={isLoadingHistoric}
+                  mapbubbleData={mapbubbleData}
+                  polygonsData={polygonsData}
+                />
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <div className="drom-list">
+                <div className="drom-item">
+                  <MapWithPolygonAndBubbles
+                    currentYear={currentYear}
+                    idToFocus="R01"
+                    isLoading={isLoadingHistoric}
+                    mapbubbleData={mapbubbleData}
+                    polygonsData={polygonsData}
+                  />
+                </div>
+                <div className="drom-item">
+                  <MapWithPolygonAndBubbles
+                    currentYear={currentYear}
+                    idToFocus="R02"
+                    isLoading={isLoadingHistoric}
+                    mapbubbleData={mapbubbleData}
+                    polygonsData={polygonsData}
+                  />
+                </div>
+                <div className="drom-item">
+                  <MapWithPolygonAndBubbles
+                    currentYear={currentYear}
+                    idToFocus="R03"
+                    isLoading={isLoadingHistoric}
+                    mapbubbleData={mapbubbleData}
+                    polygonsData={polygonsData}
+                  />
+                </div>
+                <div className="drom-item">
+                  <MapWithPolygonAndBubbles
+                    currentYear={currentYear}
+                    idToFocus="R04"
+                    isLoading={isLoadingHistoric}
+                    mapbubbleData={mapbubbleData}
+                    polygonsData={polygonsData}
+                  />
+                </div>
+                <div className="drom-item">
+                  <MapWithPolygonAndBubbles
+                    currentYear={currentYear}
+                    idToFocus="R06"
+                    isLoading={isLoadingHistoric}
+                    mapbubbleData={mapbubbleData}
+                    polygonsData={polygonsData}
+                  />
+                </div>
+              </div>
+            </Col>
+          </Row>
+
+          <Row className="fr-mt-5w">
+            <Col>
+              <SubList />
+            </Col>
+          </Row>
+        </div>
+      );
+    }
 
+    switch (selectedTab) {
+      case "general":
         return (
           <Row gutters>
             <Col md={8}>

diff --git a/client/src/pages/atlas/components/atlas-map/styles.scss b/client/src/pages/atlas/components/atlas-map/styles.scss
@@ -0,0 +1,12 @@
+.atlas-map {
+  .drom-list {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    .drom-item {
+      width: 150px;
+      height: 160px;
+      overflow: hidden;
+    }
+  }
+}
diff --git a/client/src/pages/atlas/components/main/tabs/general.tsx b/client/src/pages/atlas/components/main/tabs/general.tsx
@@ -126,7 +126,7 @@ export function General() {
           />
         </Col>
       </Row>
-      <Row className="fr-mt-5w">
+      <Row className="fr-mt-5w fr-mb-5w">
         <Col md={6}>
           <Title as="h3" look="h5">
             Répartition des étudiants par genre