geographical orgs added
This commit is contained in:
louai98
parent
4172d1f941
commit
07638628ea
@ -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",
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
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) {
|
||||
@ -625,12 +702,16 @@ class ControlInAfricaMap extends React.Component {
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<FilterBox
|
||||
selectedCountry={selectedCountry}
|
||||
countriesNames={countriesNames}
|
||||
handleCountryChange={this.handleCountryChange}
|
||||
handleOrganizationClick={this.handleOrganizationClick}
|
||||
handleTreatiesClick={this.handleTreatiesClick}
|
||||
<FilterBox
|
||||
selectedCountry={selectedCountry}
|
||||
countriesNames={countriesNames}
|
||||
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"
|
||||
|
||||
@ -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),
|
||||
}
|
||||
: {}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
27
src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx
Normal file
27
src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx
Normal 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
|
||||
@ -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
|
||||
|
||||
25
src/Components/Layout/ControlInAfrica/Reg_Org_Filter.jsx
Normal file
25
src/Components/Layout/ControlInAfrica/Reg_Org_Filter.jsx
Normal 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;
|
||||
181
src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx
Normal file
181
src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx
Normal 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
109
src/Data/Orgs.geojson
Normal 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"
|
||||
}
|
||||
]}
|
||||
@ -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;
|
||||
}
|
||||
@ -12,4 +12,16 @@
|
||||
height: 100vh;
|
||||
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
109
src/tmp/orgs.txt
Normal 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"
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user