geographical orgs added

This commit is contained in:
louai98 2024-06-05 16:24:59 +02:00
parent 4172d1f941
commit 07638628ea
11 changed files with 641 additions and 491 deletions

View File

@ -1,8 +1,8 @@
import React, { createRef, useContext } from "react";
import Stack from "react-bootstrap/Stack";
import React, { createRef } from "react";
import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
import L, { icon } from "leaflet";
import L from "leaflet";
import Africa from "../../../Data/ControlinAfrica.geojson";
import Orgs from "../../../Data/Orgs.geojson";
import "../../../Styles/main.scss";
import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component
@ -40,6 +40,35 @@ import Icon24 from "../../../Icons/icon24.svg";
import Icon25 from "../../../Icons/icon25.svg";
import Icon26 from "../../../Icons/icon26.svg";
const iconMap = {
Icon1: Icon1,
Icon2: Icon2,
Icon3: Icon3,
Icon4: Icon4,
Icon5: Icon5,
Icon6: Icon6,
Icon7: Icon7,
Icon8: Icon8,
Icon9: Icon9,
Icon10: Icon10,
Icon11: Icon11,
Icon12: Icon12,
Icon13: Icon13,
Icon14: Icon14,
Icon15: Icon15,
Icon16: Icon16,
Icon17: Icon17,
Icon18: Icon18,
Icon19: Icon19,
Icon20: Icon20,
Icon21: Icon21,
Icon22: Icon22,
Icon23: Icon23,
Icon24: Icon24,
Icon25: Icon25,
Icon26: Icon26,
};
class ControlInAfricaMap extends React.Component {
constructor(props) {
super(props);
@ -49,6 +78,12 @@ class ControlInAfricaMap extends React.Component {
this.state = {
africaCountries: null,
countriesNames: [],
regional_organisations: [],
geographical_organisations: [],
regional_treaties: [],
international_treaties: [],
intsruments: [],
loading: true,
error: null,
@ -181,14 +216,14 @@ class ControlInAfricaMap extends React.Component {
];
componentDidMount() {
this.fetchAfricaCountries();
this.fetchData();
this.calculateZoomLevel();
window.addEventListener("resize", this.calculateZoomLevel);
}
componentWillUnmount() {}
fetchAfricaCountries = async () => {
fetchData = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
@ -208,6 +243,51 @@ class ControlInAfricaMap extends React.Component {
loading: false,
});
}
try {
console.log("fetching data");
const response = await fetch(Orgs); // Ensure this is a valid URL
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
// Replace icon names with actual icon objects
const regional_treaties = data.regional_treaties.map((treaty) => ({
...treaty,
icon_eligible: iconMap[treaty.icon_eligible] || null,
icon_signed: iconMap[treaty.icon_signed] || null,
icon_ratified: iconMap[treaty.icon_ratified] || null,
}));
const international_treaties = data.international_treaties.map(
(treaty) => ({
...treaty,
icon_eligible: iconMap[treaty.icon_eligible] || null,
icon_signed: iconMap[treaty.icon_signed] || null,
icon_ratified: iconMap[treaty.icon_ratified] || null,
})
);
const intsruments = data.intsruments.map((instrument) => ({
...instrument,
icon: iconMap[instrument.icon] || null,
}));
this.setState(
{
regional_organisations: data.regional_organisations,
geographical_organisations: data.geographical_organisations,
regional_treaties,
international_treaties,
intsruments,
},
() => {
// Callback after state has been updated (optional)
}
);
} catch (error) {
console.error("Error fetching the JSON file:", error);
}
};
calculateZoomLevel = () => {
@ -389,30 +469,31 @@ class ControlInAfricaMap extends React.Component {
selectedCountriesNamesRegions,
prevStatuesTreaty,
africaCountries,
regional_treaties,
international_treaties,
intsruments,
} = this.state;
// get the icon of the selected treaty based on the name and status of the treaty
console.log(name, status);
let org =
this.regional_treaties.find((org) => org.name2 === name) ||
this.international_treaties.find((org) => org.name2 === name);
regional_treaties.find((org) => org.name2 === name) ||
international_treaties.find((org) => org.name2 === name);
let instrument = this.intsruments.find(
let instrument = intsruments.find(
(instrument) => instrument.name2 === name
);
if (org) {
this.setState({
selectedIcon: org[`icon_${status.toLowerCase()}`] || "none",
});
}
const selectedIcon = org
? org[`icon_${status.toLowerCase()}`] || "none"
: instrument
? instrument[`icon`] || "none"
: "none";
if (instrument) {
this.setState({
selectedIcon: instrument[`icon`] || "none",
selectedIcon,
});
}
// if the same treaty is selected previously and the region is not selected
// then the treaty will be deselected
@ -463,7 +544,8 @@ class ControlInAfricaMap extends React.Component {
selectedCountriesFeaturesTreaties.push(feature);
}
});
// if the region is selected then the treaty will be selected based on the
// intersection of the region and the treaty
if (selectedRegion) {
console.log("intersect");
const intersection = selectedCountriesNamesTreaties.filter((country) =>
@ -473,7 +555,7 @@ class ControlInAfricaMap extends React.Component {
selectedCountriesNamesTreaties: intersection,
selectedCountry: "",
selectedTreaty: name,
prevStatuesTreaty: status || "checked",
prevStatuesTreaty: status,
showInfoBox: true,
});
return;
@ -483,29 +565,27 @@ class ControlInAfricaMap extends React.Component {
selectedCountriesNamesTreaties,
selectedCountry: "",
selectedTreaty: name,
prevStatuesTreaty: status || "checked",
prevStatuesTreaty: status,
selectedCountriesFeaturesTreaties,
});
// if region and treaty selected
if (
this.state.selectedRegion &&
this.regional_treaties.some((org) => org.name2 === name)
regional_treaties.some((org) => org.name2 === name)
) {
this.setState({
//selectedCountriesNamesRegions,
//selectedCountryColor: color,
//selectedCountry: "",
//selectedRegion: name,
//prevStatuesRegion: status,
//selectedCountriesFeaturesRegions,
selectedTreaty: name,
});
}
};
regionalOrganisationStatistics = () => {
const { selectedCountriesFeaturesRegions } = this.state;
const {
selectedCountriesFeaturesRegions,
regional_treaties,
international_treaties,
} = this.state;
// Helper function to process treaties
const processTreaties = (treaties) => {
@ -534,11 +614,9 @@ class ControlInAfricaMap extends React.Component {
});
};
const organisationsRegionalTreaties = processTreaties(
this.regional_treaties
);
const organisationsRegionalTreaties = processTreaties(regional_treaties);
const organisationsInternationalTreaties = processTreaties(
this.international_treaties
international_treaties
);
const organisationsInstruments = this.intsruments.map((instrument) => {
@ -596,11 +674,6 @@ class ControlInAfricaMap extends React.Component {
};
render() {
const findColorByName = (name) => {
const org = this.regional_organisations.find((org) => org.name === name);
return org ? org.color : ""; // Return color value if found, otherwise return an empty string
};
const {
africaCountries,
loading,
@ -613,6 +686,10 @@ class ControlInAfricaMap extends React.Component {
selectedRegion,
selectedTreaty,
selectedIcon,
geographical_organisations,
regional_organisations,
regional_treaties,
international_treaties,
} = this.state;
if (loading) {
@ -631,6 +708,10 @@ class ControlInAfricaMap extends React.Component {
handleCountryChange={this.handleCountryChange}
handleOrganizationClick={this.handleOrganizationClick}
handleTreatiesClick={this.handleTreatiesClick}
geographical_organisations={geographical_organisations}
regional_organisations={regional_organisations}
regional_treaties={regional_treaties}
international_treaties={international_treaties}
></FilterBox>
</Col>
<Col sm={9}>
@ -683,6 +764,9 @@ class ControlInAfricaMap extends React.Component {
>
<CountryPopup
feature={feature}
regional_organisations={regional_organisations}
regional_treaties={regional_treaties}
international_treaties={international_treaties}
></CountryPopup>
</Tooltip>
</Marker>
@ -716,6 +800,19 @@ class ControlInAfricaMap extends React.Component {
<button onClick={this.zoomOut}>-</button>
<button onClick={this.resetMap}>*</button>
</div>
<div className="country-select">
<select
onChange={this.handleCountryChange}
value={selectedCountry}
>
<option value="">Select a country</option>
{countriesNames.map((country, index) => (
<option key={index} value={country}>
{country}
</option>
))}
</select>
</div>
{this.state.showInfoBox && (
<MapInfoBox
className="info-box"

View File

@ -2,140 +2,21 @@ import React from "react";
import "../../../Styles/main.scss";
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 regional_organisations = [
{ name: "AU", color: "#b2df8a" },
{ name: "EAC", color: "#33a02c" },
{ name: "IGAD", color: "#fb9a99" },
{ name: "UMA", color: "#e31a1c" },
{ name: "COMESA", color: "#fdbf6f" },
{ name: "ECOWAS", color: "#ff7f00" },
{ name: "CEN-SAD", color: "#cab2d6" },
{ name: "SADC", color: "#6a3d9a" },
{ name: "ECCAS", color: "#ffff99" },
{ name: "ICGLR", color: "#b15928" },
{ name: "RECSA", color: "#a6cee3" },
{ name: "SARCOM", color: "#1f78b4" },
];
const regional_treaties = [
{
name: "Bamako Declaration",
name2: "BamakoDeclaration",
icon_eligible: Icon26,
icon_signed: Icon24,
icon_ratified: null,
},
{
name: "Kinshasa Convention",
name2: "KinshasaConvention",
icon_eligible: Icon4,
icon_signed: Icon6,
icon_ratified: Icon5,
},
{
name: "ECOWAS Convention",
name2: "ECOWASConvention",
icon_eligible: Icon2,
icon_signed: Icon3,
icon_ratified: null,
},
{
name: "Khartoum Declaration",
name2: "KhartoumDeclaration",
icon_eligible: Icon21,
icon_signed: Icon23,
icon_ratified: null,
},
{
name: "Nairobi Protocol",
name2: "NairobiProtocol",
icon_eligible: Icon22,
icon_signed: Icon25,
icon_ratified: null,
},
{
name: "SADC Firearms Protocol",
name2: "SADCFirearmsProtocol",
icon_eligible: Icon8,
icon_signed: Icon7,
icon_ratified: Icon9,
},
];
const international_treaties = [
{
name: "Arms Trade Treaty",
name2: "ArmsTradeTreaty",
icon_eligible: Icon19,
icon_signed: Icon17,
icon_ratified: Icon18,
},
{
name: "Firearms Protocol",
name2: "FirearmsProtocol",
icon_eligible: Icon12,
icon_signed: Icon10,
icon_ratified: Icon11,
},
{
name: "Wassenaar Agreement",
name2: "WassenaarAgreement",
icon_eligible: Icon15,
icon_signed: Icon13,
icon_ratified: Icon14,
},
];
const intsruments = [
{
name2: "UNProgrammeofAction",
name: "UN Programme of Action",
icon: Icon20,
},
{
name2: "InternationalTracingInstrument",
name: "International Tracing Instrument",
icon: Icon16,
},
{
name2: "StG-PoA",
name: "Silencing the Guns in Africa Programme of Action",
icon: Icon1,
},
];
const findColorByName = (name) => {
const findColorByName = (name, regional_organisations) => {
const org = regional_organisations.find((org) => org.name === name);
return org ? org.color : ""; // Return color value if found, otherwise return an empty string
};
const CountryPopup = (props) => {
const { feature } = props;
const {
feature,
regional_organisations,
regional_treaties,
international_treaties,
} = props;
return (
<>
<h5>{feature.properties.name}</h5>
@ -147,7 +28,7 @@ const CountryPopup = (props) => {
style={
feature.properties[org.name] === 1
? {
backgroundColor: findColorByName(org.name),
backgroundColor: findColorByName(org.name, regional_organisations),
}
: {}
}

View File

@ -1,306 +1,42 @@
import React from "react";
import "../../../Styles/main.scss";
import Geo_Org_Filter from "./Geo_Org_Filter";
import Reg_Org_Filter from "./Reg_Org_Filter";
import Treaties_Filter from "./Treaties_Filter";
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 regional_organisations = [
{ name: "AU", color: "#b2df8a" },
{ name: "EAC", color: "#33a02c" },
{ name: "IGAD", color: "#fb9a99" },
{ name: "UMA", color: "#e31a1c" },
{ name: "COMESA", color: "#fdbf6f" },
{ name: "ECOWAS", color: "#ff7f00" },
{ name: "CEN-SAD", color: "#cab2d6" },
{ name: "SADC", color: "#6a3d9a" },
{ name: "ECCAS", color: "#ffff99" },
{ name: "ICGLR", color: "#b15928" },
{ name: "RECSA", color: "#a6cee3" },
{ name: "SARCOM", color: "#1f78b4" },
];
const regional_treaties = [
{
name: "Bamako Declaration",
name2: "BamakoDeclaration",
icon_eligible: Icon26,
icon_signed: Icon24,
icon_ratified: null,
},
{
name: "Kinshasa Convention",
name2: "KinshasaConvention",
icon_eligible: Icon4,
icon_signed: Icon6,
icon_ratified: Icon5,
},
{
name: "ECOWAS Convention",
name2: "ECOWASConvention",
icon_eligible: Icon2,
icon_signed: Icon3,
icon_ratified: null,
},
{
name: "Khartoum Declaration",
name2: "KhartoumDeclaration",
icon_eligible: Icon21,
icon_signed: Icon23,
icon_ratified: null,
},
{
name: "Nairobi Protocol",
name2: "NairobiProtocol",
icon_eligible: Icon22,
icon_signed: Icon25,
icon_ratified: null,
},
{
name: "SADC Firearms Protocol",
name2: "SADCFirearmsProtocol",
icon_eligible: Icon8,
icon_signed: Icon7,
icon_ratified: Icon9,
},
];
const international_treaties = [
{
name: "Arms Trade Treaty",
name2: "ArmsTradeTreaty",
icon_eligible: Icon19,
icon_signed: Icon17,
icon_ratified: Icon18,
},
{
name: "Firearms Protocol",
name2: "FirearmsProtocol",
icon_eligible: Icon12,
icon_signed: Icon10,
icon_ratified: Icon11,
},
{
name: "Wassenaar Agreement",
name2: "WassenaarAgreement",
icon_eligible: Icon15,
icon_signed: Icon13,
icon_ratified: Icon14,
},
];
const intsruments = [
{
name2: "UNProgrammeofAction",
name: "UN Programme of Action",
icon: Icon20,
},
{
name2: "InternationalTracingInstrument",
name: "International Tracing Instrument",
icon: Icon16,
},
{
name2: "StG-PoA",
name: "Silencing the Guns in Africa Programme of Action",
icon: Icon1,
},
];
const FilterBox = (props) => {
const { selectedCountry, countriesNames, handleCountryChange, handleOrganizationClick, handleTreatiesClick } = props;
const {
handleOrganizationClick,
handleTreatiesClick,
regional_organisations,
regional_treaties,
international_treaties,
geographical_organisations,
} = props;
return (
<div className={`filters-box`}>
<div>
<h5>African Countries</h5>
<Geo_Org_Filter
handleOrganizationClick={handleOrganizationClick}
geographical_organisations={geographical_organisations}
/>
<hr />
<Reg_Org_Filter
handleOrganizationClick={handleOrganizationClick}
regional_organisations={regional_organisations}
/>
<hr />
<Treaties_Filter
regional_treaties={regional_treaties}
international_treaties={international_treaties}
handleTreatiesClick={handleTreatiesClick}
<select onChange={handleCountryChange} value={selectedCountry}>
<option value="">Select a country</option>
{countriesNames.map((country, index) => (
<option key={index} value={country}>
{country}
</option>
))}
</select>
<hr />
</div>
<div>
<h5>Regional Organisations</h5>
<div className="regional-organisations">
{regional_organisations.map((org, index) => (
<div
key={org.name}
className="organization-item"
style={{ backgroundColor: org.color }}
onClick={() =>
handleOrganizationClick(org.name, "", org.color)
}
>
<div className="name">{org.name}</div>
</div>
))}
</div>
/>
<hr />
</div>
<div>
<h5>Regional Treaties</h5>
<div className="regional-treaties">
{regional_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
<div className="treaty-item-name">{treaty.name}</div>
{treaty.icon_eligible && (
<img
src={treaty.icon_eligible}
alt={`${treaty.name}-Eligible`}
title={`${treaty.name}-Eligible`}
srcSet=""
className="icon"
onClick={() =>
handleTreatiesClick(treaty.name2, "Eligible")
}
/>
)}
{treaty.icon_signed && (
<img
src={treaty.icon_signed}
alt={`${treaty.name}-Signed`}
title={`${treaty.name}-Signed`}
srcSet=""
className="icon"
onClick={() =>
handleTreatiesClick(treaty.name2, "Signed")
}
/>
)}
{treaty.icon_ratified && (
<img
src={treaty.icon_ratified}
alt={`${treaty.name}-Ratified`}
title={`${treaty.name}-Ratified`}
srcSet=""
className="icon"
onClick={() =>
handleTreatiesClick(treaty.name2, "Ratified")
}
/>
)}
</div>
))}
</div>
<hr />
</div>
<div>
<h5>International Treaties</h5>
{international_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
<div className="treaty-item-name">{treaty.name}</div>
{treaty.icon_eligible && (
<img
src={treaty.icon_eligible}
alt={`${treaty.name}-Eligible`}
title={`${treaty.name}-Eligible`}
srcSet=""
className="icon-2"
onClick={() =>
handleTreatiesClick(treaty.name2, "Eligible")
}
/>
)}
{treaty.icon_signed && (
<img
src={treaty.icon_signed}
alt={`${treaty.name}-Signed`}
title={`${treaty.name}-Signed`}
srcSet=""
className="icon-2"
onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
/>
)}
{treaty.icon_ratified && (
<img
src={treaty.icon_ratified}
alt={`${treaty.name}-Ratified`}
title={`${treaty.name}-Ratified`}
srcSet=""
className="icon-2"
onClick={() =>
handleTreatiesClick(treaty.name2, "Ratified")
}
/>
)}
</div>
))}
<hr />
</div>
<div>
<h5>
International Guidelines & Instruments <br />
<small>(countries with recent activities only, 2014 - 2019)</small>
</h5>
<div className="treaty-item-2">
<div className="treaty-item-name">UN Programme of Action</div>
<img
src={Icon20}
alt=""
className="icon-2"
onClick={() => handleTreatiesClick("UNProgrammeofAction", "Checked")}
/>
</div>
<div className="treaty-item-2">
<div className="treaty-item-name">
International Tracing Instrument
</div>
<img
src={Icon16}
alt=""
className="icon-2"
onClick={() =>
handleTreatiesClick("InternationalTracingInstrument", "Checked")
}
/>
</div>
<hr />
</div>
<div>
<h5>African Guidelines & Instrumentss</h5>
<div className="treaty-item-2">
<div className="treaty-item-name">
Silencing the Guns in Africa Programme of Action
</div>
<img
src={Icon1}
alt=""
className="icon-2"
onClick={() => handleTreatiesClick("StG-PoA", "Checked")}
/>
</div>
</div>
</div>
);
};

View File

@ -0,0 +1,27 @@
import React from 'react'
const Geo_Org_Filter = (props) => {
const {
handleOrganizationClick,
geographical_organisations,
} = props;
return (
<div>
<h5>Geographical Organisations</h5>
<div className="regional-organisations">
{geographical_organisations.map((org, index) => (
<div
key={org.name}
className="organization-item p-2"
style={{ backgroundColor: org.color }}
onClick={() => handleOrganizationClick(org.name, "", org.color)}
>
<div className="name">{org.name}</div>
</div>
))}
</div>
</div>
)
}
export default Geo_Org_Filter

View File

@ -2,33 +2,6 @@ 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 (
<Marker

View File

@ -0,0 +1,25 @@
import React from "react";
const Reg_Org_Filter = (props) => {
const { handleOrganizationClick, regional_organisations } = props;
return (
<div>
<h5>Regional Organisations</h5>
<h6>Organisations internationales / المنظمات الإقليمية</h6>
<div className="regional-organisations">
{regional_organisations.map((org, index) => (
<div
key={org.name}
className="organization-item"
style={{ backgroundColor: org.color }}
onClick={() => handleOrganizationClick(org.name, "", org.color)}
>
<div className="name">{org.name}</div>
</div>
))}
</div>
</div>
);
};
export default Reg_Org_Filter;

View File

@ -0,0 +1,181 @@
import React from "react";
import Icon1 from "../../../Icons/icon1.svg";
import Icon16 from "../../../Icons/icon16.svg";
import Icon20 from "../../../Icons/icon20.svg";
const Treaties_Filter = (props) => {
const { international_treaties, handleTreatiesClick, regional_treaties } = props;
return (
<div>
<div>
<h5>Regional Treaties</h5>
<h6>Traités régionales / المعاهدات الأقليمية</h6>
<div className="regional-treaties">
<div className="treaty-item mb-0">
<div className="treaty-item-name">Eligible</div>
<div className="treaty-item-name">Signed</div>
<div className="treaty-item-name">Ratified</div>
<div className="treaty-item-name"></div>
</div>
<div className="treaty-item mb-0">
<div className="treaty-item-name">Eligible</div>
<div className="treaty-item-name">Signé</div>
<div className="treaty-item-name">Ratifié</div>
<div className="treaty-item-name"></div>
</div>
<div className="treaty-item">
<div className="treaty-item-name">المتفق عليها</div>
<div className="treaty-item-name">موقعة</div>
<div className="treaty-item-name">مصدق عليها</div>
<div className="treaty-item-name"></div>
</div>
{regional_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
{treaty.icon_eligible ? (
<img
src={treaty.icon_eligible}
alt={`${treaty.name}-Eligible`}
title={`${treaty.name}-Eligible`}
srcSet=""
className="icon"
onClick={() => handleTreatiesClick(treaty.name2, "Eligible")}
/>
) : (
<div className="icon"></div>
)}
{treaty.icon_signed ? (
<img
src={treaty.icon_signed}
alt={`${treaty.name}-Signed`}
title={`${treaty.name}-Signed`}
srcSet=""
className="icon"
onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
/>
) : (
<div className="icon"></div>
)}
{treaty.icon_ratified ? (
<img
src={treaty.icon_ratified}
alt={`${treaty.name}-Ratified`}
title={`${treaty.name}-Ratified`}
srcSet=""
className="icon"
onClick={() => handleTreatiesClick(treaty.name2, "Ratified")}
/>
) : (
<div className="icon"></div>
)}
<div className="treaty-item-name">{treaty.name}</div>
</div>
))}
</div>
<hr />
</div>
<div>
<h5>International Treaties</h5>
<h6>Traités internationales / المعاهدات الدولية</h6>
{international_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
{treaty.icon_eligible ? (
<img
src={treaty.icon_eligible}
alt={`${treaty.name}-Eligible`}
title={`${treaty.name}-Eligible`}
srcSet=""
className="icon-2"
onClick={() => handleTreatiesClick(treaty.name2, "Eligible")}
/>
) : (
<div className="icon"></div>
)}
{treaty.icon_signed ? (
<img
src={treaty.icon_signed}
alt={`${treaty.name}-Signed`}
title={`${treaty.name}-Signed`}
srcSet=""
className="icon-2"
onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
/>
) : (
<div className="icon"></div>
)}
{treaty.icon_ratified ? (
<img
src={treaty.icon_ratified}
alt={`${treaty.name}-Ratified`}
title={`${treaty.name}-Ratified`}
srcSet=""
className="icon-2"
onClick={() => handleTreatiesClick(treaty.name2, "Ratified")}
/>
) : (
<div className="icon"></div>
)}
<div className="treaty-item-name">{treaty.name}</div>
</div>
))}
<hr />
</div>
<div>
<h5>
International Guidelines & Instruments <br />
<small>(countries with recent activities only, 2014 - 2019)</small>
</h5>
<h6>
Directives & instruments internationaux <br />
<small>(pays avec activité récente uniquement, 2014 - 2019)</small>
</h6>
<h6>
المبادىء التوجيهية و الأدوات الدولية <br />
<small>(فقط الدول ذات النشاطات الحديثة 2014-2019)</small>
</h6>
<div className="treaty-item-2">
<img
src={Icon20}
alt=""
className="icon-2"
onClick={() =>
handleTreatiesClick("UNProgrammeofAction", "Checked")
}
/>
<div className="treaty-item-name">UN Programme of Action</div>
</div>
<div className="treaty-item-2">
<img
src={Icon16}
alt=""
className="icon-2"
onClick={() =>
handleTreatiesClick("InternationalTracingInstrument", "Checked")
}
/>
<div className="treaty-item-name">
International Tracing Instrument
</div>
</div>
<hr />
</div>
<div>
<h5>African Guidelines & Instrumentss</h5>
<h6>Directives & instruments africains</h6>
<h6>المبادىء التوجيهية و الأدوات السياسية في افريقيا</h6>
<div className="treaty-item-2">
<img
src={Icon1}
alt=""
className="icon-2"
onClick={() => handleTreatiesClick("StG-PoA", "Checked")}
/>
<div className="treaty-item-name">
Silencing the Guns in Africa Programme of Action
</div>
</div>
</div>
</div>
);
};
export default Treaties_Filter;

109
src/Data/Orgs.geojson Normal file
View File

@ -0,0 +1,109 @@
{"regional_organisations": [
{ "name": "AU", "color": "#b2df8a" },
{ "name": "EAC", "color": "#33a02c" },
{ "name": "IGAD", "color": "#fb9a99" },
{ "name": "UMA", "color": "#e31a1c" },
{ "name": "COMESA", "color": "#fdbf6f" },
{ "name": "ECOWAS", "color": "#ff7f00" },
{ "name": "CEN-SAD", "color": "#cab2d6" },
{ "name": "SADC", "color": "#6a3d9a" },
{ "name": "ECCAS", "color": "#ffff99" },
{ "name": "ICGLR", "color": "#b15928" },
{ "name": "RECSA", "color": "#a6cee3" },
{ "name": "SARCOM", "color": "#1f78b4" }
],
"geographical_organisations": [
{ "name": "Northern-Africa", "color": "#e3e3e3" },
{ "name": "Eastern-Africa", "color": "#e3e3e3" },
{ "name": "Southern-Africa", "color": "#e3e3e3" },
{ "name": "Western-Africa", "color": "#e3e3e3" },
{ "name": "Central-Africa", "color": "#e3e3e3" }
],
"regional_treaties": [
{
"name": "Bamako Declaration",
"name2": "BamakoDeclaration",
"icon_eligible": "Icon26",
"icon_signed": "Icon24",
"icon_ratified": "none"
},
{
"name": "Kinshasa Convention",
"name2": "KinshasaConvention",
"icon_eligible": "Icon4",
"icon_signed": "Icon6",
"icon_ratified": "Icon5"
},
{
"name": "ECOWAS Convention",
"name2": "ECOWASConvention",
"icon_eligible": "Icon2",
"icon_signed": "Icon3",
"icon_ratified": "none"
},
{
"name": "Khartoum Declaration",
"name2": "KhartoumDeclaration",
"icon_eligible": "Icon21",
"icon_signed": "Icon23",
"icon_ratified": "none"
},
{
"name": "Nairobi Protocol",
"name2": "NairobiProtocol",
"icon_eligible": "Icon22",
"icon_signed": "Icon25",
"icon_ratified": "none"
},
{
"name": "SADC Firearms Protocol",
"name2": "SADCFirearmsProtocol",
"icon_eligible": "Icon8",
"icon_signed": "Icon7",
"icon_ratified": "Icon9"
}
],
"international_treaties": [
{
"name": "Arms Trade Treaty",
"name2": "ArmsTradeTreaty",
"icon_eligible": "Icon19",
"icon_signed": "Icon17",
"icon_ratified": "Icon18"
},
{
"name": "Firearms Protocol",
"name2": "FirearmsProtocol",
"icon_eligible": "Icon12",
"icon_signed": "Icon10",
"icon_ratified": "Icon11"
},
{
"name": "Wassenaar Agreement",
"name2": "WassenaarAgreement",
"icon_eligible": "Icon15",
"icon_signed": "Icon13",
"icon_ratified": "Icon14"
}
],
"intsruments": [
{
"name2": "UNProgrammeofAction",
"name": "UN Programme of Action",
"icon": "Icon20"
},
{
"name2": "InternationalTracingInstrument",
"name": "International Tracing Instrument",
"icon": "Icon16"
},
{
"name2": "StG-PoA",
"name": "Silencing the Guns in Africa Programme of Action",
"icon": "Icon1"
}
]}

View File

@ -1,7 +1,7 @@
.filters-box {
padding: $gap;
border: 1px solid $border-color;
height: 100vh;
//height: 100vh;
}
// _organizations
@ -54,6 +54,6 @@
.treaty-item-2 {
display: grid;
grid-template-columns: repeat(2, 75%);
grid-template-columns: repeat(2, 25%);
margin-bottom: 15px;
}

View File

@ -13,3 +13,15 @@
margin-top: 0px;
}
.country-select{
position: absolute;
top: 20px;
left: 20px;
// background-color: white;
// padding: 10px;
// border: 1px solid #ccc;
// border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}

109
src/tmp/orgs.txt Normal file
View File

@ -0,0 +1,109 @@
"regional_organisations": [
{ "name": "AU", "color": "#b2df8a" },
{ "name": "EAC", "color": "#33a02c" },
{ "name": "IGAD", "color": "#fb9a99" },
{ "name": "UMA", "color": "#e31a1c" },
{ "name": "COMESA", "color": "#fdbf6f" },
{ "name": "ECOWAS", "color": "#ff7f00" },
{ "name": "CEN-SAD", "color": "#cab2d6" },
{ "name": "SADC", "color": "#6a3d9a" },
{ "name": "ECCAS", "color": "#ffff99" },
{ "name": "ICGLR", "color": "#b15928" },
{ "name": "RECSA", "color": "#a6cee3" },
{ "name": "SARCOM", "color": "#1f78b4" }
],
"geographical_organisations": [
{ "name": "Northern-Africa", "color": "#e3e3e3" },
{ "name": "Eastern-Africa", "color": "#e3e3e3" },
{ "name": "Southern-Africa", "color": "#e3e3e3" },
{ "name": "Western-Africa", "color": "#e3e3e3" },
{ "name": "Central-Africa", "color": "#e3e3e3" }
],
"regional_treaties": [
{
"name": "Bamako Declaration",
"name2": "BamakoDeclaration",
"icon_eligible": "Icon26",
"icon_signed": "Icon24",
"icon_ratified": "none"
},
{
"name": "Kinshasa Convention",
"name2": "KinshasaConvention",
"icon_eligible": "Icon4",
"icon_signed": "Icon6",
"icon_ratified": "Icon5"
},
{
"name": "ECOWAS Convention",
"name2": "ECOWASConvention",
"icon_eligible": "Icon2",
"icon_signed": "Icon3",
"icon_ratified": "none"
},
{
"name": "Khartoum Declaration",
"name2": "KhartoumDeclaration",
"icon_eligible": "Icon21",
"icon_signed": "Icon23",
"icon_ratified": "none"
},
{
"name": "Nairobi Protocol",
"name2": "NairobiProtocol",
"icon_eligible": "Icon22",
"icon_signed": "Icon25",
"icon_ratified": "none"
},
{
"name": "SADC Firearms Protocol",
"name2": "SADCFirearmsProtocol",
"icon_eligible": "Icon8",
"icon_signed": "Icon7",
"icon_ratified": "Icon9"
}
],
"international_treaties": [
{
"name": "Arms Trade Treaty",
"name2": "ArmsTradeTreaty",
"icon_eligible": "Icon19",
"icon_signed": "Icon17",
"icon_ratified": "Icon18"
},
{
"name": "Firearms Protocol",
"name2": "FirearmsProtocol",
"icon_eligible": "Icon12",
"icon_signed": "Icon10",
"icon_ratified": "Icon11"
},
{
"name": "Wassenaar Agreement",
"name2": "WassenaarAgreement",
"icon_eligible": "Icon15",
"icon_signed": "Icon13",
"icon_ratified": "Icon14"
}
],
"intsruments": [
{
"name2": "UNProgrammeofAction",
"name": "UN Programme of Action",
"icon": "Icon20"
},
{
"name2": "InternationalTracingInstrument",
"name": "International Tracing Instrument",
"icon": "Icon16"
},
{
"name2": "StG-PoA",
"name": "Silencing the Guns in Africa Programme of Action",
"icon": "Icon1"
}
]