ajout de la map

com-480-data-visualization · May 30, 2024 · 1a34650 · 1a34650
1 parent 1a4343a
commit 1a34650
Show file tree

Hide file tree

Showing 13 changed files with 4,013 additions and 109 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "bootstrap": "^5.3.3",
     "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-leaflet": "^4.2.1"
   },
   "devDependencies": {
     "eslint": "^8",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -9,3 +9,14 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.switch-container {
+    max-width: 85%;
+    height: max-content;
+    margin: 25px auto;
+    position: center;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,38 +1,84 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { updateCountryInfo } from "../utils.js";
 
 import Body from "../components/Body.js";
 import Switch from "../components/Switch.js";
-import Listing from "../components/Listing.js";
 import Carousel from "../components/Carousel.js";
+import Map from "../components/Map.js";
+import Modal from "../components/Modal.js";
 
-import cancerData from "../data.json";
+
+// Part to select the data to represent
+function DataSelect({active, setActive}) {
+  return(
+      <div className="col text-center" >
+        <h4>Type of Cancer</h4>
+        <p>Select a type of cancer to learn about its statistics :</p>
+        <Body active={active} setActive={setActive} />
+      </div>
+  );
+}
+
+// Part to represent the data chosen
+function DataRepr({active}) {
+
+  // Mode of representation (false: Graphs, true: Map)
+  const [mode, setMode] = useState(false);
+  // Information about the selected country
+  const [countryInfo, setCountryInfo] = useState(null);
+
+  // Updates the information on countries when the active cancer changes
+  useEffect(() => {
+    if (countryInfo != null) {
+      updateCountryInfo(setCountryInfo, active, countryInfo.name, countryInfo.latlng)
+    }
+  }, [active]);
+
+  return (
+        <div className="col text-center" style={{ "borderLeft": "1px solid #ddd" }}>
+          <Modal countryInfo={countryInfo} />
+          <h4>Statistics {active == null ? "" : "on " + (active.type).toLowerCase() + " cancer"}</h4>
+          <div className="switch-container text-center">
+            <div className="row align-items-center">
+              <div className="col">
+                Graphs
+              </div>
+              <div className="col">
+                <Switch state={mode} stateSetter={setMode} />
+              </div>
+              <div className="col">
+                Map
+              </div>
+            </div>
+          </div>
+          {mode ? <Map setCountryInfo={setCountryInfo} currentCancer={active} /> : <Carousel currentCancer={active} />}
+        </div>
+    );
+}
 
 export default function Page() {
 
-  const cancers = cancerData.cancers;
+  // The current cancer that is displayed
   const [currentCancer, setCurrentCancer] = useState(null);
-  const [mode, setMode] = useState(false);
 
   return (
-    <div className="menu-container row">
-      <div className="col text-center" style={{ "borderRight": "1px solid #ddd" }}>
+    <>
 
-        <h4>Type of Cancer</h4>
-        <p>Select a type of cancer to learn about its statistics :</p>
-        <Switch state={mode} stateSetter={setMode} />
-        {mode ?
-          <Body active={currentCancer} setActive={setCurrentCancer} />
-          :
-          <Listing cancers={cancers} active={currentCancer} setActive={setCurrentCancer} />
-        }
-      </div>
-      <div className="col text-center">
-        <h4>Cancer Stat Facts {currentCancer == null ? "" : ": " + currentCancer.type}</h4>
-        {currentCancer == null ?  null : <Carousel currentCancer={currentCancer} />}
+    <nav className="navbar bg-body-tertiary">
+      <div className="container-fluid">
+        <a className="navbar-brand" href="">
+          TogetherAgainstCancer
+        </a>
       </div>
+    </nav>
+
+    <div className="menu-container row">
+      <DataSelect active={currentCancer} setActive={setCurrentCancer} />
+      {currentCancer === null ? null : <DataRepr active={currentCancer} /> }
     </div>
-
+
+    </>
   );
 }
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -1,4 +1,4 @@
-import cancerData from "../data";
+import cancerData from "../data/data.json";
 
 export default function Body({active, setActive}) {
 

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -1,31 +1,31 @@
+import { useState } from "react";
+
 export default function Carousel({ currentCancer }) {
 
   const isProd = process.env.NODE_ENV === 'production';
 
+  const [activeImage, setActiveImage] = useState(0);
+
   return (
-    <div id="carouselGraphs" className="carousel carousel-fade slide">
-      <div className="carousel-inner">
-        <div className="carousel-item ">
-          <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/daly.png"} className="d-block w-100" />
+    <div>
+      {activeImage === 0 ? <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/daly.png"} className="d-block w-100" /> : null }
+      {activeImage === 1 ? <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/hbar.png"} className="d-block w-100" /> : null }
+      {activeImage === 2 ? <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/time_series.png"} className="d-block w-100" /> : null }
+      {activeImage === 3 ? <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/vbar.png"} className="d-block w-100" /> : null }
+      <div className="row m-2 p-1">
+        <div className={"p-1 col" + (activeImage === 0 ? " text-bg-primary" : "")}>
+          <img onClick={() => setActiveImage(0)} src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/daly.png"} className="rounded mx-auto d-block w-100" />
         </div>
-        <div className="carousel-item active">
-          <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/hbar.png"} className="d-block w-100" />
+        <div className={"p-1 col" + (activeImage === 1 ? " text-bg-primary" : "")}>
+          <img onClick={() => setActiveImage(1)} src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/hbar.png"} className="rounded mx-auto d-block w-100" />
         </div>
-        <div className="carousel-item active">
-          <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/time_series.png"} className="d-block w-100" />
+        <div className={"p-1 col" + (activeImage === 2 ? " text-bg-primary" : "")}>
+          <img onClick={() => setActiveImage(2)} src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/time_series.png"} className="d-block w-100" />
         </div>
-        <div className="carousel-item active">
-          <img src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/vbar.png"} className="d-block w-100" />
+        <div className={"p-1 col" + (activeImage === 3 ? " text-bg-primary" : "")}>
+          <img onClick={() => setActiveImage(3)} src={(isProd ? "/TogetherAgainstCancer" : "") + "/graphs/" + (currentCancer.type).toLowerCase() + "/vbar.png"} className="d-block w-100" />
         </div>
       </div>
-      <button className="carousel-control-prev" type="button" data-bs-target="#carouselGraphs" data-bs-slide="prev">
-        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span className="visually-hidden">Previous</span>
-      </button>
-      <button className="carousel-control-next" type="button" data-bs-target="#carouselGraphs" data-bs-slide="next">
-        <span className="carousel-control-next-icon" aria-hidden="true"></span>
-        <span className="visually-hidden">Next</span>
-      </button>
-    </div>
+    </div >
   );
 }
diff --git a/src/components/Map.js b/src/components/Map.js
@@ -0,0 +1,34 @@
+import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
+import geoData from "../data/custom.geo.json";
+import 'leaflet/dist/leaflet.css'
+import { updateCountryInfo } from "../utils";
+
+
+// Map Component
+export default function Map({ setCountryInfo, currentCancer }) {
+
+    // Central Europe position
+    const position = [48.6908333333, 9.14055555556];
+
+    // Event Handler for each country
+    const countryHandler = (feature, layer) => {
+        layer.on({
+            click: (e) => {
+                const country = feature.properties.name;
+                updateCountryInfo(setCountryInfo, currentCancer, country, e.latlng);
+                const modal = new bootstrap.Modal('#modalCountry', {})
+                modal.show()
+            }
+        });
+    };
+
+    return (
+        <MapContainer center={position} zoom={4} style={{ height: '400px', width: '100%' }}>
+            <TileLayer
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            />
+            <GeoJSON key={Math.random()} data={geoData} onEachFeature={countryHandler} />
+        </MapContainer>
+    );
+}
diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -0,0 +1,27 @@
+export default function Modal({ countryInfo }) {
+
+    if (countryInfo != null) {
+        console.log(countryInfo.deathRateMen);
+    }
+
+    return (
+        <div className="modal fade" id="modalCountry" tabIndex="-1" aria-labelledby="modalCountryLabel" aria-hidden="true">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="modal-title fs-5" id="exampleModalLabel">Death Rate in {countryInfo === null ? "Country Not Found" : countryInfo.name}</h1>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div className="modal-body">
+                        {countryInfo === null || countryInfo.deathRateMen === null ? null : <p>Men &#9794; : {countryInfo.deathRateMen.toFixed(2)} / 100,000</p>}
+                        {countryInfo === null ? null : <p>Women &#9792; : {countryInfo.deathRateWomen.toFixed(2)} / 100,000</p>}
+                        <p><i>This metric represents a mean of numbers of deaths occurring in a population of 100,000 people from 1981 to 2019.</i></p> 
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/Switch.js b/src/components/Switch.js
@@ -5,15 +5,14 @@ export default function Switch({state, stateSetter}) {
     }
 
     return (
-        <div class="form-check form-switch">
+        <div className="form-switch">
             <input
                 id="mode"
                 type="checkbox"
-                class="form-check-input"
+                className="form-check-input"
                 checked={state}
                 onChange={switchHandler}
             />
-            <label htmlFor="mode">Advanced mode</label>
         </div>
     );
 }
diff --git a/src/data.json b/src/data.json