From 18c1cf0b259cde5d44c07edec833fe8ac0f549e5 Mon Sep 17 00:00:00 2001 From: louai98 Date: Tue, 4 Jun 2024 15:00:39 +0200 Subject: [PATCH] multiple select --- .../ControlInAfrica/ControlInAfricaMap.js | 323 ++++++++++++++---- .../Layout/ControlInAfrica/MapInfoBox.jsx | 28 +- .../Layout/ControlInAfrica/MarkerIcon.jsx | 49 +++ .../Layout/ControlInAfrica/countryStyles.js | 43 +-- src/Components/Pages/ControlInAfrica.js | 16 +- 5 files changed, 351 insertions(+), 108 deletions(-) create mode 100644 src/Components/Layout/ControlInAfrica/MarkerIcon.jsx diff --git a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js index ffbdfe5..a956630 100644 --- a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js +++ b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js @@ -1,12 +1,12 @@ import React, { createRef, useContext } from "react"; import Stack from "react-bootstrap/Stack"; import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet"; -import L, { control } from "leaflet"; +import L from "leaflet"; import Africa from "../../../Data/ControlinAfrica.geojson"; import "../../../Styles/main.scss"; import { CountryStyle, CountrySelectedStyle } from "./countryStyles"; import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component - +import MarkerIcon, { iconMarker } from "./MarkerIcon"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; @@ -54,13 +54,22 @@ class ControlInAfricaMap extends React.Component { zoom: 4, scrollWheelZoom: false, - selectedCountry: "", openedTooltipLayer: null, - selectedCountriesNames: [], - selectedCountriesFeatures: [], - selectedCountryColor: "yellow", + + selectedCountry: "", selectedRegion: "", - prevStatues: "", + selectedTreaty: "", + + selectedCountriesNamesRegions: [], + selectedCountriesNamesTreaties: [], + selectedCountriesFeaturesRegions: [], + selectedCountriesFeaturesTreaties: [], + selectedCountriesIntersections: [], + + selectedCountryColor: "yellow", + + prevStatuesRegion: "", + prevStatuesTreaty: "", infoBox: [], showInfoBox: false, @@ -256,6 +265,7 @@ class ControlInAfricaMap extends React.Component { direction: "top", className: "tooltip-custom", }).setContent(popupContent); + layer.bindTooltip(tooltip).openTooltip(); // Update the state to store the currently opened tooltip @@ -263,77 +273,205 @@ class ControlInAfricaMap extends React.Component { }; onMouseClick = (e) => { - this.setState({ - selectedCountriesNames: [], - selectedCountryColor: "yellow", - showInfoBox: false, - }); const countryName = e.target.feature.properties.name; if (countryName === this.state.selectedCountry) { - this.setState({ selectedCountry: "" }); + this.setState({ + selectedCountry: "", + selectedRegion: "", + selectedTreaty: "", + + selectedCountriesNamesRegions: [], + selectedCountriesNamesTreaties: [], + selectedCountriesFeaturesRegions: [], + selectedCountriesFeaturesTreaties: [], + selectedCountriesIntersections: [], + + selectedCountryColor: "yellow", + + prevStatuesRegion: "", + prevStatuesTreaty: "", + + infoBox: [], + showInfoBox: false, + }); + this.props.updateCountryID(null); return; } - this.setState({ selectedCountry: countryName }); + + this.setState({ + selectedCountry: countryName, + selectedRegion: "", + selectedTreaty: "", + + selectedCountriesNamesRegions: [], + selectedCountriesNamesTreaties: [], + selectedCountriesFeaturesRegions: [], + selectedCountriesFeaturesTreaties: [], + selectedCountriesIntersections: [], + + selectedCountryColor: "yellow", + + prevStatuesRegion: "", + prevStatuesTreaty: "", + + infoBox: [], + showInfoBox: false, + }); this.props.updateCountryID(e.target.feature.properties.id); }; handleOrganizationClick = (name, status, color) => { - const { selectedRegion, prevStatues, africaCountries } = this.state; + const { + selectedRegion, + prevStatuesRegion, + prevStatuesTreaty, + africaCountries, + } = this.state; - if (selectedRegion === name && prevStatues === status) { + if (selectedRegion === name && prevStatuesRegion === status) { + console.log("same"); this.setState({ - selectedCountriesNames: [], + selectedCountriesNamesRegions: [], + selectedCountriesNamesTreaties: [], selectedCountryColor: "yellow", selectedCountry: "", selectedRegion: "", - prevStatues: "", + prevStatuesRegion: "", showInfoBox: false, }); return; } - let selectedCountriesNames = []; - let selectedCountriesFeatures = []; + if (prevStatuesTreaty) { + console.log("change"); + this.setState({ + selectedCountriesNamesTreaties: [], + selectedCountry: "", + }); + } + + let selectedCountriesNamesRegions = []; + let selectedCountriesFeaturesRegions = []; + + africaCountries.forEach((feature) => { + if (feature.properties[name] === 1) { + selectedCountriesNamesRegions.push(feature.properties.name); + selectedCountriesFeaturesRegions.push(feature); + } + }); + + this.setState({ + selectedCountriesNamesRegions, + selectedCountryColor: color, + selectedCountry: "", + selectedRegion: name, + prevStatuesRegion: status, + selectedCountriesFeaturesRegions, + selectedTreaty: "", + showInfoBox: true, + }); + }; + + handleTreatiesClick = (name, status, color) => { + const { + selectedRegion, + selectedTreaty, + selectedCountriesNamesRegions, + prevStatuesTreaty, + africaCountries, + } = this.state; + // if the same treaty is selected previously and the region is not selected + // then the treaty will be deselected + if ( + selectedTreaty === name && + prevStatuesTreaty === status && + selectedRegion === "" + ) { + console.log("1"); + this.setState({ + selectedCountriesNamesRegions: [], + selectedCountriesNamesTreaties: [], + selectedCountryColor: "yellow", + selectedCountry: "", + selectedTreaty: "", + prevStatuesTreaty: "", + prevStatuesRegion: "", + showInfoBox: false, + }); + return; + } + + // if the same treaty is selected previously and the region is selected + // then the treaty will be deselected + if (selectedTreaty === name && prevStatuesTreaty === status) { + console.log("2"); + this.setState({ + selectedCountriesNamesTreaties: [], + selectedCountry: "", + selectedTreaty: "", + prevStatuesTreaty: "", + showInfoBox: true, + }); + return; + } + + let selectedCountriesNamesTreaties = []; + let selectedCountriesFeaturesTreaties = []; africaCountries.forEach((feature) => { if ( feature.properties[name] === 1 || feature.properties[name] === status ) { - selectedCountriesNames.push(feature.properties.name); - selectedCountriesFeatures.push(feature); + selectedCountriesNamesTreaties.push(feature.properties.name); + selectedCountriesFeaturesTreaties.push(feature); } }); - this.setState( - { - selectedCountriesNames, - selectedCountryColor: color, + if (selectedRegion) { + console.log("intersect"); + const intersection = selectedCountriesNamesTreaties.filter((country) => + selectedCountriesNamesRegions.includes(country) + ); + this.setState({ + selectedCountriesNamesTreaties: intersection, + //selectedCountryColor: "yellow", selectedCountry: "", - selectedRegion: name, - prevStatues: status, - selectedCountriesFeatures, - }, - - ); - - if (this.regional_organisations.some(org => org.name === name)) { - this.setState({ + selectedTreaty: name, + prevStatuesTreaty: status, showInfoBox: true, - }, - this.regionalOrganisationStatistics - ) + }); + return; } - else{ + + this.setState({ + selectedCountriesNamesTreaties, + selectedCountry: "", + selectedTreaty: name, + prevStatuesTreaty: status, + selectedCountriesFeaturesTreaties, + }); + + // if region and treaty selected + if ( + this.state.selectedRegion && + this.regional_treaties.some((org) => org.name2 === name) + ) { this.setState({ - showInfoBox: false, - }) + //selectedCountriesNamesRegions, + //selectedCountryColor: color, + //selectedCountry: "", + //selectedRegion: name, + //prevStatuesRegion: status, + //selectedCountriesFeaturesRegions, + selectedTreaty: name, + }); } }; regionalOrganisationStatistics = () => { - const { selectedCountriesFeatures } = this.state; + const { selectedCountriesFeaturesRegions } = this.state; // Helper function to process treaties const processTreaties = (treaties) => { @@ -342,7 +480,7 @@ class ControlInAfricaMap extends React.Component { let countriesEligible = 0; let countriesRatified = 0; - selectedCountriesFeatures.forEach((feature) => { + selectedCountriesFeaturesRegions.forEach((feature) => { const status = feature.properties[org.name2]; if (status === "Signed") { countriesSigned++; @@ -370,7 +508,7 @@ class ControlInAfricaMap extends React.Component { ); const organisationsInstruments = this.intsruments.map((instrument) => { - const countris = selectedCountriesFeatures.filter( + const countris = selectedCountriesFeaturesRegions.filter( (feature) => feature.properties[instrument.name2] === 1 ); return { @@ -386,6 +524,41 @@ class ControlInAfricaMap extends React.Component { }; }; + // Define the function to determine the style + getFeatureStyle = ( + feature, + selectedCountry, + selectedCountriesNamesRegions, + selectedCountriesNamesTreaties, + selectedCountryColor + ) => { + if (feature.properties.name === selectedCountry) { + console.log("one country selected"); + return CountrySelectedStyle(selectedCountryColor); + } else if ( + selectedCountriesNamesRegions.includes(feature.properties.name) && + selectedCountriesNamesTreaties.length === 0 + ) { + console.log("region selected"); + return CountrySelectedStyle(selectedCountryColor); + } else if ( + selectedCountriesNamesRegions.includes(feature.properties.name) && + selectedCountriesNamesTreaties.includes(feature.properties.name) === false + ) { + console.log("region and treaty selected 1"); + return CountrySelectedStyle(selectedCountryColor); + } else if ( + selectedCountriesNamesRegions.includes(feature.properties.name) && + selectedCountriesNamesTreaties.includes(feature.properties.name) + ) { + console.log("region and treaty selected 2"); + return CountrySelectedStyle(selectedCountryColor, 0.7); + } else { + console.log("default"); + return CountryStyle(); + } + }; + render() { const findColorByName = (name) => { const org = this.regional_organisations.find((org) => org.name === name); @@ -398,9 +571,11 @@ class ControlInAfricaMap extends React.Component { error, countriesNames, selectedCountry, - selectedCountriesNames, + selectedCountriesNamesRegions, + selectedCountriesNamesTreaties, selectedCountryColor, selectedRegion, + selectedTreaty, } = this.state; if (loading) { @@ -464,10 +639,7 @@ class ControlInAfricaMap extends React.Component { srcSet="" className="icon" onClick={() => - this.handleOrganizationClick( - treaty.name2, - "Eligible" - ) + this.handleTreatiesClick(treaty.name2, "Eligible") } /> )} @@ -479,7 +651,7 @@ class ControlInAfricaMap extends React.Component { srcSet="" className="icon" onClick={() => - this.handleOrganizationClick(treaty.name2, "Signed") + this.handleTreatiesClick(treaty.name2, "Signed") } /> )} @@ -491,10 +663,7 @@ class ControlInAfricaMap extends React.Component { srcSet="" className="icon" onClick={() => - this.handleOrganizationClick( - treaty.name2, - "Ratified" - ) + this.handleTreatiesClick(treaty.name2, "Ratified") } /> )} @@ -517,7 +686,7 @@ class ControlInAfricaMap extends React.Component { srcSet="" className="icon-2" onClick={() => - this.handleOrganizationClick(treaty.name2, "Eligible") + this.handleTreatiesClick(treaty.name2, "Eligible") } /> )} @@ -529,7 +698,7 @@ class ControlInAfricaMap extends React.Component { srcSet="" className="icon-2" onClick={() => - this.handleOrganizationClick(treaty.name2, "Signed") + this.handleTreatiesClick(treaty.name2, "Signed") } /> )} @@ -541,7 +710,7 @@ class ControlInAfricaMap extends React.Component { srcSet="" className="icon-2" onClick={() => - this.handleOrganizationClick(treaty.name2, "Ratified") + this.handleTreatiesClick(treaty.name2, "Ratified") } /> )} @@ -563,7 +732,7 @@ class ControlInAfricaMap extends React.Component { alt="" className="icon-2" onClick={() => - this.handleOrganizationClick("UNProgrammeofAction") + this.handleTreatiesClick("UNProgrammeofAction") } /> @@ -576,9 +745,7 @@ class ControlInAfricaMap extends React.Component { alt="" className="icon-2" onClick={() => - this.handleOrganizationClick( - "InternationalTracingInstrument" - ) + this.handleTreatiesClick("InternationalTracingInstrument") } /> @@ -594,7 +761,7 @@ class ControlInAfricaMap extends React.Component { src={Icon1} alt="" className="icon-2" - onClick={() => this.handleOrganizationClick("StG-PoA")} + onClick={() => this.handleTreatiesClick("StG-PoA")} /> @@ -617,12 +784,13 @@ class ControlInAfricaMap extends React.Component { onEachFeature={this.onEachFeature} id="africa-map" style={(feature) => - feature.properties.name === selectedCountry || - selectedCountriesNames.find( - (item) => item === feature.properties.name + this.getFeatureStyle( + feature, + selectedCountry, + selectedCountriesNamesRegions, + selectedCountriesNamesTreaties, + selectedCountryColor ) - ? CountrySelectedStyle(selectedCountryColor) - : CountryStyle() } key="africa-map" data={africaCountries} @@ -729,6 +897,27 @@ class ControlInAfricaMap extends React.Component { } })} + {selectedTreaty && + selectedCountriesNamesTreaties && + africaCountries.map((feature, index) => { + if ( + selectedCountriesNamesTreaties.includes( + feature.properties.name + ) + ) { + return ( + + ); + } + })} +
diff --git a/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx b/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx index 06932f9..ef7f73d 100644 --- a/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx +++ b/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx @@ -4,25 +4,27 @@ const MapInfoBox = (props) => { const regional_treaties = props.info.organisationsRegionalTreaties; const international_treaties = props.info.organisationsInternationalTreaties; const instruments = props.info.organisationsInstruments; - console.log(regional_treaties); + return (

{props.selectedRegion}

Number of countries

- - - - - - + + + + + + + + {regional_treaties && regional_treaties.map((item, index) => { diff --git a/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx b/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx new file mode 100644 index 0000000..5f48899 --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx @@ -0,0 +1,49 @@ +import React from "react"; +import L from "leaflet"; +import { Marker } from "react-leaflet"; + +import Icon1 from "../../../Icons/icon1.svg"; +import Icon2 from "../../../Icons/icon2.svg"; +import Icon3 from "../../../Icons/icon3.svg"; +import Icon4 from "../../../Icons/icon4.svg"; +import Icon5 from "../../../Icons/icon5.svg"; +import Icon6 from "../../../Icons/icon6.svg"; +import Icon7 from "../../../Icons/icon7.svg"; +import Icon8 from "../../../Icons/icon8.svg"; +import Icon9 from "../../../Icons/icon9.svg"; +import Icon10 from "../../../Icons/icon10.svg"; +import Icon11 from "../../../Icons/icon11.svg"; +import Icon12 from "../../../Icons/icon12.svg"; +import Icon13 from "../../../Icons/icon13.svg"; +import Icon14 from "../../../Icons/icon14.svg"; +import Icon15 from "../../../Icons/icon15.svg"; +import Icon16 from "../../../Icons/icon16.svg"; +import Icon17 from "../../../Icons/icon17.svg"; +import Icon18 from "../../../Icons/icon18.svg"; +import Icon19 from "../../../Icons/icon19.svg"; +import Icon20 from "../../../Icons/icon20.svg"; +import Icon21 from "../../../Icons/icon21.svg"; +import Icon22 from "../../../Icons/icon22.svg"; +import Icon23 from "../../../Icons/icon23.svg"; +import Icon24 from "../../../Icons/icon24.svg"; +import Icon25 from "../../../Icons/icon25.svg"; +import Icon26 from "../../../Icons/icon26.svg"; + +const MarkerIcon = (props) => { + return ( + + ); +}; + +export default MarkerIcon; diff --git a/src/Components/Layout/ControlInAfrica/countryStyles.js b/src/Components/Layout/ControlInAfrica/countryStyles.js index f5de2a3..17e3b63 100644 --- a/src/Components/Layout/ControlInAfrica/countryStyles.js +++ b/src/Components/Layout/ControlInAfrica/countryStyles.js @@ -1,25 +1,26 @@ export const CountryStyle = () => { - return { - color: "black", - weight: 1, - opacity: 1, - fillColor: "#FDEDE2", - fillOpacity: 0.3, - }; + return { + color: "black", + weight: 1, + opacity: 1, + fillColor: "#FDEDE2", + fillOpacity: 0.3, }; +}; - export const CountrySelectedStyle = (color) => { - return { - fillColor: color, - color: "black", - weight: 3, - }; - } +export const CountrySelectedStyle = (color, opacity = 0.3) => { + return { + fillColor: color, + color: "black", + weight: 3, + fillOpacity: opacity, + }; +}; - export const CountryHighlightStyle = () => { - return { - fillColor: "yellow", - color: "black", - weight: 3, - }; - } \ No newline at end of file +export const CountryHighlightStyle = () => { + return { + fillColor: "yellow", + color: "black", + weight: 3, + }; +}; diff --git a/src/Components/Pages/ControlInAfrica.js b/src/Components/Pages/ControlInAfrica.js index c38894f..a74e331 100644 --- a/src/Components/Pages/ControlInAfrica.js +++ b/src/Components/Pages/ControlInAfrica.js @@ -1,23 +1,25 @@ -import React, {useState} from "react"; +import React, { useState } from "react"; import Container from "react-bootstrap/Container"; import ControlInAfricaMap from "../Layout/ControlInAfrica/ControlInAfricaMap"; import Title from "../Layout/ControlInAfrica/Title"; import DetailsSection from "../Layout/ControlInAfrica/DetailsSection"; const ControlInAfrica = (props) => { - const [countryID, setCountryID] = useState(null); const updateCountryID = (countryID) => { - setCountryID(countryID) - } - + setCountryID(countryID); + }; return ( - - + + {countryID !== null && ( + + )} ); };
- Signed - - Eligible - - Ratified -
+ Signed + + Eligible + + Ratified +