From 07638628eac36eb04fe1ae2c1b998141d490895e Mon Sep 17 00:00:00 2001 From: louai98 Date: Wed, 5 Jun 2024 16:24:59 +0200 Subject: [PATCH] geographical orgs added --- .../ControlInAfrica/ControlInAfricaMap.js | 185 +++++++--- .../Layout/ControlInAfrica/CountryPopup.jsx | 135 +------- .../Layout/ControlInAfrica/FilterBox.jsx | 318 ++---------------- .../Layout/ControlInAfrica/Geo_Org_Filter.jsx | 27 ++ .../Layout/ControlInAfrica/MarkerIcon.jsx | 27 -- .../Layout/ControlInAfrica/Reg_Org_Filter.jsx | 25 ++ .../ControlInAfrica/Treaties_Filter.jsx | 181 ++++++++++ src/Data/Orgs.geojson | 109 ++++++ src/Styles/Layout/_filters.scss | 4 +- src/Styles/Layout/_map.scss | 12 + src/tmp/orgs.txt | 109 ++++++ 11 files changed, 641 insertions(+), 491 deletions(-) create mode 100644 src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx create mode 100644 src/Components/Layout/ControlInAfrica/Reg_Org_Filter.jsx create mode 100644 src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx create mode 100644 src/Data/Orgs.geojson create mode 100644 src/tmp/orgs.txt diff --git a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js index 2fccf54..939f175 100644 --- a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js +++ b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js @@ -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 { - @@ -683,6 +764,9 @@ class ControlInAfricaMap extends React.Component { > @@ -716,6 +800,19 @@ class ControlInAfricaMap extends React.Component { +
+ +
{this.state.showInfoBox && ( { +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 ( <>
{feature.properties.name}
@@ -147,7 +28,7 @@ const CountryPopup = (props) => { style={ feature.properties[org.name] === 1 ? { - backgroundColor: findColorByName(org.name), + backgroundColor: findColorByName(org.name, regional_organisations), } : {} } diff --git a/src/Components/Layout/ControlInAfrica/FilterBox.jsx b/src/Components/Layout/ControlInAfrica/FilterBox.jsx index 638ce9f..2a344cc 100644 --- a/src/Components/Layout/ControlInAfrica/FilterBox.jsx +++ b/src/Components/Layout/ControlInAfrica/FilterBox.jsx @@ -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 (
-
-
African Countries
+ +
+ +
+ - - {countriesNames.map((country, index) => ( - - ))} - -
-
-
-
Regional Organisations
-
- {regional_organisations.map((org, index) => ( -
- handleOrganizationClick(org.name, "", org.color) - } - > -
{org.name}
-
- ))} -
- -
-
-
-
Regional Treaties
-
- {regional_treaties.map((treaty) => ( -
-
{treaty.name}
- - {treaty.icon_eligible && ( - {`${treaty.name}-Eligible`} - handleTreatiesClick(treaty.name2, "Eligible") - } - /> - )} - {treaty.icon_signed && ( - {`${treaty.name}-Signed`} - handleTreatiesClick(treaty.name2, "Signed") - } - /> - )} - {treaty.icon_ratified && ( - {`${treaty.name}-Ratified`} - handleTreatiesClick(treaty.name2, "Ratified") - } - /> - )} -
- ))} -
-
-
-
-
International Treaties
- {international_treaties.map((treaty) => ( -
-
{treaty.name}
- - {treaty.icon_eligible && ( - {`${treaty.name}-Eligible`} - handleTreatiesClick(treaty.name2, "Eligible") - } - /> - )} - {treaty.icon_signed && ( - {`${treaty.name}-Signed`} handleTreatiesClick(treaty.name2, "Signed")} - /> - )} - {treaty.icon_ratified && ( - {`${treaty.name}-Ratified`} - handleTreatiesClick(treaty.name2, "Ratified") - } - /> - )} -
- ))} -
-
-
-
- International Guidelines & Instruments
- (countries with recent activities only, 2014 - 2019) -
-
-
UN Programme of Action
- handleTreatiesClick("UNProgrammeofAction", "Checked")} - /> -
-
-
- International Tracing Instrument -
- - handleTreatiesClick("InternationalTracingInstrument", "Checked") - } - /> -
-
-
-
-
African Guidelines & Instrumentss
-
-
- Silencing the Guns in Africa Programme of Action -
- handleTreatiesClick("StG-PoA", "Checked")} - /> -
-
+ /> +
); }; diff --git a/src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx b/src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx new file mode 100644 index 0000000..49642b1 --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/Geo_Org_Filter.jsx @@ -0,0 +1,27 @@ +import React from 'react' + +const Geo_Org_Filter = (props) => { + const { + handleOrganizationClick, + geographical_organisations, + } = props; + return ( +
+
Geographical Organisations
+
+ {geographical_organisations.map((org, index) => ( +
handleOrganizationClick(org.name, "", org.color)} + > +
{org.name}
+
+ ))} +
+
+ ) +} + +export default Geo_Org_Filter \ No newline at end of file diff --git a/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx b/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx index 5f48899..7c12c5b 100644 --- a/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx +++ b/src/Components/Layout/ControlInAfrica/MarkerIcon.jsx @@ -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 ( { + const { handleOrganizationClick, regional_organisations } = props; + return ( +
+
Regional Organisations
+
Organisations internationales / المنظمات الإقليمية
+
+ {regional_organisations.map((org, index) => ( +
handleOrganizationClick(org.name, "", org.color)} + > +
{org.name}
+
+ ))} +
+
+ ); +}; + +export default Reg_Org_Filter; diff --git a/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx b/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx new file mode 100644 index 0000000..44cc88e --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx @@ -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 ( +
+
+
Regional Treaties
+
Traités régionales / المعاهدات الأقليمية
+
+
+
Eligible
+
Signed
+
Ratified
+
+
+
+
Eligible
+
Signé
+
Ratifié
+
+
+
+
المتفق عليها
+
موقعة
+
مصدق عليها
+
+
+ {regional_treaties.map((treaty) => ( +
+ {treaty.icon_eligible ? ( + {`${treaty.name}-Eligible`} handleTreatiesClick(treaty.name2, "Eligible")} + /> + ) : ( +
+ )} + {treaty.icon_signed ? ( + {`${treaty.name}-Signed`} handleTreatiesClick(treaty.name2, "Signed")} + /> + ) : ( +
+ )} + {treaty.icon_ratified ? ( + {`${treaty.name}-Ratified`} handleTreatiesClick(treaty.name2, "Ratified")} + /> + ) : ( +
+ )} +
{treaty.name}
+
+ ))} +
+
+
+
+
International Treaties
+
Traités internationales / المعاهدات الدولية
+ {international_treaties.map((treaty) => ( +
+ {treaty.icon_eligible ? ( + {`${treaty.name}-Eligible`} handleTreatiesClick(treaty.name2, "Eligible")} + /> + ) : ( +
+ )} + {treaty.icon_signed ? ( + {`${treaty.name}-Signed`} handleTreatiesClick(treaty.name2, "Signed")} + /> + ) : ( +
+ )} + {treaty.icon_ratified ? ( + {`${treaty.name}-Ratified`} handleTreatiesClick(treaty.name2, "Ratified")} + /> + ) : ( +
+ )} +
{treaty.name}
+
+ ))} +
+
+
+
+ International Guidelines & Instruments
+ (countries with recent activities only, 2014 - 2019) +
+
+ Directives & instruments internationaux
+ (pays avec activité récente uniquement, 2014 - 2019) +
+
+ المبادىء التوجيهية و الأدوات الدولية
+ (فقط الدول ذات النشاطات الحديثة 2014-2019) +
+
+ + handleTreatiesClick("UNProgrammeofAction", "Checked") + } + /> +
UN Programme of Action
+
+
+ + handleTreatiesClick("InternationalTracingInstrument", "Checked") + } + /> +
+ International Tracing Instrument +
+
+
+
+
+
African Guidelines & Instrumentss
+
Directives & instruments africains
+
المبادىء التوجيهية و الأدوات السياسية في افريقيا
+
+ handleTreatiesClick("StG-PoA", "Checked")} + /> +
+ Silencing the Guns in Africa Programme of Action +
+
+
+
+ ); +}; + +export default Treaties_Filter; diff --git a/src/Data/Orgs.geojson b/src/Data/Orgs.geojson new file mode 100644 index 0000000..4c24ae0 --- /dev/null +++ b/src/Data/Orgs.geojson @@ -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" + } +]} \ No newline at end of file diff --git a/src/Styles/Layout/_filters.scss b/src/Styles/Layout/_filters.scss index 43ab486..c051b4b 100644 --- a/src/Styles/Layout/_filters.scss +++ b/src/Styles/Layout/_filters.scss @@ -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; } \ No newline at end of file diff --git a/src/Styles/Layout/_map.scss b/src/Styles/Layout/_map.scss index 6abcb0a..9ea28d1 100644 --- a/src/Styles/Layout/_map.scss +++ b/src/Styles/Layout/_map.scss @@ -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; + } \ No newline at end of file diff --git a/src/tmp/orgs.txt b/src/tmp/orgs.txt new file mode 100644 index 0000000..399c52b --- /dev/null +++ b/src/tmp/orgs.txt @@ -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" + } + ] \ No newline at end of file