-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1 lines (1 loc) · 27.5 KB
/
index.html
1
<!DOCTYPE html> <html lang="en"> <head> <!-- Essential Meta Tagss --> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Rwanda-Geo-Structure Documentation</title> <meta name="description" content="Rwanda Geo Structure, A JavaScript package that provides easy access to Rwanda's administrative divisions. Work with data about provinces, districts, sectors, cells, and villages in Rwanda." /> <meta name="keywords" content="Rwanda, Geo Structure, administrative divisions, provinces, districts, sectors, cells, villages, Rwanda data, Rwanda geography, Rwanda administrative data" /> <meta name="author" content="Derrick NUBY IRADUKUNDA" /> <meta name="robots" content="index, follow" /> <meta name="language" content="English" /> <!-- Favicon --> <link rel="icon" type="image/png" href="https://www.statistics.gov.rw/sites/default/files/images/favicon.ico" /> <link rel="apple-touch-icon" sizes="180x180" href="https://www.statistics.gov.rw/sites/default/files/images/favicon.ico" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://github.com/Derrick-Nuby/Rwanda-Geo-Structure" /> <meta property="og:title" content="Rwanda Geo Structure" /> <meta property="og:description" content="A JavaScript package that provides easy access to Rwanda's administrative divisions. Work with data about provinces, districts, sectors, cells, and villages in Rwanda." /> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/c/c4/Rwanda_Districts_Map.jpg" /> <meta property="og:image:alt" content="Rwanda Geo Structure" /> <meta property="og:site_name" content="Rwanda Geo Structure" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@derricknuby" /> <meta name="twitter:creator" content="@derricknuby" /> <meta name="twitter:title" content="Rwanda-Geo-Structure Documentation" /> <meta name="twitter:description" content="A JavaScript package that provides easy access to Rwanda's administrative divisions. Work with data about provinces, districts, sectors, cells, and villages in Rwanda." /> <meta name="twitter:image" content="https://upload.wikimedia.org/wikipedia/commons/c/c4/Rwanda_Districts_Map.jpg" /> <meta name="twitter:image:alt" content="Rwanda Districts Map" /> <!-- Mobile App Tags --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-title" content="Rwanda Geo Structure" /> <meta name="application-name" content="Rwanda Geo Structure" /> <meta name="theme-color" content="#ffffff" /> <!-- Cache Control --> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <!-- Verification Tags --> <meta name="google-site-verification" content="your-google-verification-code" /> <meta name="msvalidate.01" content="your-bing-verification-code" /> <meta name="yandex-verification" content="your-yandex-verification-code" /> <!-- Additional SEO Tags --> <link rel="canonical" href="https://github.com/Derrick-Nuby/Rwanda-Geo-Structure" /> <meta name="referrer" content="no-referrer-when-downgrade" /> <meta name="format-detection" content="telephone=no" /> <meta name="geo.region" content="RW" /> <meta name="geo.placename" content="Kigali" /> <!-- Additional Social Media Tags --> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <!-- Structured Data --> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "SoftwareApplication", "name": "Rwanda Geo Structure", "description": "A JavaScript package that provides easy access to Rwanda's administrative divisions.", "author": { "@type": "Person", "name": "Derrick NUBY IRADUKUNDA" }, "url": "https://github.com/Derrick-Nuby/Rwanda-Geo-Structure", "applicationCategory": "DeveloperApplication", "operatingSystem": "Any", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" } } </script> <style> :root { --bg-color: #ffffff; --text-color: #333333; --sidebar-bg: #f4f4f4; --sidebar-text: #333333; --accent-color: #3498db; --code-bg: #f8f8f8; --link-color: #2980b9; } .dark-mode { --bg-color: #1a1a1a; --text-color: #f0f0f0; --sidebar-bg: #2c2c2c; --sidebar-text: #f0f0f0; --accent-color: #3498db; --code-bg: #2c2c2c; --link-color: #5dade2; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); display: flex; transition: background-color 0.3s, color 0.3s; } .sidebar { width: 300px; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--sidebar-bg); padding: 20px; overflow-y: auto; } .sidebar h2 { margin-bottom: 20px; color: var(--sidebar-text); font-size: 1.5em; } .sidebar ul { list-style-type: none; } .sidebar ul li { margin-bottom: 10px; } .sidebar ul li a { color: var(--sidebar-text); text-decoration: none; transition: color 0.3s; display: flex; justify-content: space-between; align-items: center; } .sidebar ul li a:hover { color: var(--accent-color); } .sidebar .main-section { font-weight: bold; font-size: 1.1em; margin-top: 20px; } .sidebar .sub-section { padding-left: 20px; font-size: 0.9em; margin-top: 5px; } .copy-link { background-color: var(--accent-color); color: white; border: none; padding: 2px 5px; border-radius: 3px; font-size: 0.8em; cursor: pointer; transition: background-color 0.3s; margin-left: 20px; } .copy-link:hover { background-color: #2980b9; } .main-content { margin-left: 300px; padding: 20px; max-width: 800px; margin-right: auto; margin-left: auto; } h1, h2, h3 { margin-bottom: 20px; color: var(--accent-color); } p { margin-bottom: 15px; } code { background-color: var(--code-bg); padding: 2px 4px; border-radius: 4px; font-family: "Courier New", Courier, monospace; } pre { background-color: var(--code-bg); padding: 15px; border-radius: 4px; overflow-x: auto; margin-bottom: 20px; } .function-section { margin-bottom: 40px; } .dark-mode-toggle { position: fixed; top: 20px; right: 20px; background-color: var(--accent-color); color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .dark-mode-toggle:hover { background-color: #2980b9; } @media (max-width: 1024px) { .sidebar { width: 250px; } .main-content { margin-left: 250px; } } @media (max-width: 768px) { .sidebar { width: 100%; height: auto; position: relative; } .main-content { margin-left: 0; } } </style> </head> <body> <div class="sidebar"> <h2> <a style="color: #2980b9; font-weight: bold; cursor:pointer; font-size: 20px; text-decoration: none; " href="#"> rwanda-geo-structure </a> </h2> <ul> <li class="main-section"><a href="#introduction">Introduction</a></li> <li class="main-section"><a href="#installation">Installation</a></li> <li class="main-section"><a href="#usage">Usage</a></li> <li class="main-section"><a href="#api-reference">API Reference</a></li> <li class="sub-section"> <a href="#getcountry"> getCountry() </a> </li> <li class="sub-section"> <a href="#getprovinces"> getProvinces() </a> </li> <li class="sub-section"> <a href="#getdistricts"> getDistricts() </a> </li> <li class="sub-section"> <a href="#getdistrictsbyprovinces"> getDistrictsByProvince() </a> </li> <li class="sub-section"> <a href="#getsectors"> getSectors() </a> </li> <li class="sub-section"> <a href="#getsectorsbydistrict"> getSectorsByDistrict() </a> </li> <li class="sub-section"> <a href="#getcells"> getCells() </a> </li> <li class="sub-section"> <a href="#getcellsbysector"> getCellsBySector() </a> </li> <li class="sub-section"> <a href="#getvillages"> getVillages() </a> </li> <li class="sub-section"> <a href="#getvillagesbycell"> getVillagesByCell() </a> </li> <li class="sub-section"> <a href="#getrandomlocation"> getRandomLocation() </a> </li> <li class="sub-section"> <a href="#countlocations"> countLocations() </a> </li> <li class="main-section"><a href="#examples">Examples</a></li> <li class="main-section"><a href="#contributing">Contributing</a></li> <li class="main-section"><a href="#license">License</a></li> </ul> </div> <div class="main-content"> <h1>rwanda-geo-structure Documentation</h1> <section id="introduction" class="function-section"> <h2>Introduction</h2> <p> rwanda-geo-structure is a comprehensive JavaScript package that provides easy access to Rwanda's administrative divisions. It allows developers to retrieve and work with data about provinces, districts, sectors, cells, and villages in Rwanda, streamlining the process of collecting and managing location-based data for applications focused on Rwanda. </p> <p> This package is essential for developers working on projects that require accurate and up-to-date information about Rwanda's geographical structure. It can be used in various applications, including but not limited to: </p> <ul> <li>Address validation and verification systems</li> <li>Geographical information systems (GIS)</li> <li>Location-based services</li> <li>Demographic analysis tools</li> <li>Electoral systems</li> <li>Logistics and delivery applications</li> </ul> </section> <section id="installation" class="function-section"> <h2>Installation</h2> <p> To install the Rwanda Geo Structure package, run the following command in your project directory: </p> <pre><code>npm install rwanda-geo-structure</code></pre> <p>or if you're using Yarn:</p> <pre><code>yarn add rwanda-geo-structure</code></pre> <p> After installation, you can import the package in your JavaScript or TypeScript files and start using its functions immediately. </p> </section> <section id="usage" class="function-section"> <h2>Usage</h2> <p> After installation, you can import and use the functions provided by the package. Here's a basic example of how to use some of the core functions: </p> <pre><code>import { getProvinces, getDistrictsByProvince, getSectorsByDistrict } from 'rwanda-geo-structure'; // Get all provinces const provinces = getProvinces(); console.log('Provinces:', provinces); // Get districts in a specific province const kigaliDistricts = getDistrictsByProvince('Kigali City'); console.log('Districts in Kigali City:', kigaliDistricts); // Get sectors in a specific district const sectors = getSectorsByDistrict('Kigali City', 'Gasabo'); console.log('Sectors in Gasabo district:', sectors);</code></pre> <p> This package provides a hierarchical structure of Rwanda's administrative divisions, allowing you to navigate from the country level down to individual villages. </p> </section> <section id="api-reference" class="function-section"> <h2>API Reference</h2> <h3 id="getcountry">getCountry() <button class="copy-link" data-link="#getcountry"> # </button> </h3> <p>Returns the country name.</p> <p> <strong>Returns:</strong> <code>string</code> - Always returns "Rwanda" </p> <p> This function is useful when you need to explicitly specify the country in your application or when you're extending the package to potentially include other countries in the future. </p> <pre><code>import { getCountry } from 'rwanda-geo-structure'; const country = getCountry(); console.log(country); // Output: "Rwanda"</code></pre> <h3 id="getprovinces">getProvinces() <button class="copy-link" data-link="#getprovinces"> # </button> </h3> <p>Retrieves all provinces in Rwanda.</p> <p> <strong>Returns:</strong> <code>string[]</code> - An array of province names </p> <p> This function is crucial for applications that need to display or process data at the provincial level. It provides a comprehensive list of all provinces in Rwanda. </p> <pre><code>import { getProvinces } from 'rwanda-geo-structure'; const provinces = getProvinces(); console.log(provinces); // Output: ['Eastern Province', 'Kigali City', 'Northern Province', 'Southern Province', 'Western Province']</code></pre> <h3 id="getdistricts">getDistricts() <button class="copy-link" data-link="#getdistricts"> # </button> </h3> <p>Retrieves all districts in Rwanda.</p> <p> <strong>Returns:</strong> <code>string[]</code> - An array of district names </p> <p> This function provides a complete list of all districts in Rwanda, regardless of their province. It's useful when you need a comprehensive view of all districts in the country. </p> <pre><code>import { getDistricts } from 'rwanda-geo-structure'; const allDistricts = getDistricts(); console.log(allDistricts); // Output: ['Bugesera', 'Gatsibo', 'Kayonza', 'Kirehe', 'Ngoma', 'Nyagatare', 'Rwamagana', 'Gasabo', 'Kicukiro', 'Nyarugenge', ...]</code></pre> <h3 id="getdistrictsbyprovinces"> getDistrictsByProvince(province: string) <button class="copy-link" data-link="#getdistrictsbyprovinces"> # </button> </h3> <p>Retrieves all districts within a specified province.</p> <p><strong>Parameters:</strong></p> <ul> <li><code>province: string</code> - The name of the province</li> </ul> <p> <strong>Returns:</strong> <code>string[]</code> - An array of district names within the specified province </p> <p> This function is essential when you need to display or process districts within a specific province. It's particularly useful for creating cascading dropdown menus or filtering data by province and district. </p> <pre><code>import { getDistrictsByProvince } from 'rwanda-geo-structure'; const kigaliDistricts = getDistrictsByProvince('Kigali City'); console.log(kigaliDistricts); // Output: ['Gasabo', 'Kicukiro', 'Nyarugenge'] const westernDistricts = getDistrictsByProvince('Western Province'); console.log(westernDistricts); // Output: ['Karongi', 'Ngororero', 'Nyabihu', 'Nyamasheke', 'Rubavu', 'Rutsiro', 'Rusizi']</code></pre> <h3 id="getsectors">getSectors() <button class="copy-link" data-link="#getsectors"> # </button> </h3> <p>Retrieves all sectors in Rwanda.</p> <p> <strong>Returns:</strong> <code>string[]</code> - An array of sector names </p> <p> This function provides a comprehensive list of all sectors in Rwanda, regardless of their district or province. It's useful when you need an overview of all sectors in the country. </p> <pre><code>import { getSectors } from 'rwanda-geo-structure'; const allSectors = getSectors(); console.log(allSectors); // Output: ['Gitega', 'Kanyinya', 'Kigali', 'Kimisagara', 'Mageragere', 'Muhima', ...]</code></pre> <h3 id="getsectorsbydistrict"> getSectorsByDistrict(province: string, district: string) <button class="copy-link" data-link="#getsectorsbydistrict"> # </button> </h3> <p>Retrieves all sectors within a specified district.</p> <p><strong>Parameters:</strong></p> <ul> <li><code>province: string</code> - The name of the province</li> <li><code>district: string</code> - The name of the district</li> </ul> <p> <strong>Returns:</strong> <code>string[]</code> - An array of sector names within the specified district </p> <p> This function is crucial for applications that need to display or process data at the sector level within a specific district. It's particularly useful for creating multi-level dropdown menus or for data analysis at the district and sector level. </p> <pre><code>import { getSectorsByDistrict } from 'rwanda-geo-structure'; const gasaboSectors = getSectorsByDistrict('Kigali City', 'Gasabo'); console.log(gasaboSectors); // Output: ['Bumbogo', 'Gatsata', 'Gikomero', 'Gisozi', 'Jabana', 'Jali', 'Kacyiru', 'Kimihurura', 'Kimironko', 'Kinyinya', 'Ndera', 'Nduba', 'Remera', 'Rusororo', 'Rutunga']</code></pre> <h3 id="getcells">getCells() <button class="copy-link" data-link="#getcells"> # </button> </h3> <p>Retrieves all cells in Rwanda.</p> <p> <strong>Returns:</strong> <code>string[]</code> - An array of cell names </p> <p> This function provides a complete list of all cells in Rwanda, regardless of their sector, district, or province. It's useful when you need a comprehensive view of all cells in the country. </p> <pre><code>import { getCells } from 'rwanda-geo-structure'; const allCells = getCells(); console.log(allCells); // Output: ['Agatare', 'Biryogo', 'Kiyovu', 'Nyarugenge', 'Rwampara', 'Umujyi wa Huye', ...]</code></pre> <h3 id="getcellsbysector"> getCellsBySector(province: string, district: string, sector: string) <button class="copy-link" data-link="#getcellsbysector"> # </button> </h3> <p>Retrieves all cells within a specified sector.</p> <p><strong>Parameters:</strong></p> <ul> <li><code>province: string</code> - The name of the province</li> <li><code>district: string</code> - The name of the district</li> <li><code>sector: string</code> - The name of the sector</li> </ul> <p> <strong>Returns:</strong> <code>string[]</code> - An array of cell names within the specified sector </p> <p> This function is essential for applications that need to display or process data at the cell level within a specific sector. It's particularly useful for creating detailed geographical selections or for analyzing data at a granular level. </p> <pre><code>import { getCellsBySector } from 'rwanda-geo-structure'; const remeraCells = getCellsBySector('Kigali City', 'Gasabo', 'Remera'); console.log(remeraCells); // Output: ['Nyabisindu', 'Nyarutarama', 'Rukiri I', 'Rukiri II', 'Rusororo']</code></pre> <h3 id="getvillages">getVillages() <button class="copy-link" data-link="#getvillages"> # </button> </h3> <p>Retrieves all villages in Rwanda.</p> <p> <strong>Returns:</strong> <code>string[]</code> - An array of village names </p> <p> This function provides a comprehensive list of all villages in Rwanda, regardless of their cell, sector, district, or province. It's useful when you need an overview of all villages in the country, but be aware that this list can be quite extensive. </p> <pre><code>import { getVillages } from 'rwanda-geo-structure'; const allVillages = getVillages(); console.log(allVillages); // Output: ['Abatarushwa', 'Abizerwa', 'Agatare', 'Akabahizi', 'Akabeza', ...]</code></pre> <h3 id="getvillagesbycell"> getVillagesByCell(province: string, district: string, sector: string, cell: string) <button class="copy-link" data-link="#getvillagesbycell"> # </button> </h3> <p>Retrieves all villages within a specified cell.</p> <p><strong>Parameters:</strong></p> <ul> <li><code>province: string</code> - The name of the province</li> <li><code>district: string</code> - The name of the district</li> <li><code>sector: string</code> - The name of the sector</li> <li><code>cell: string</code> - The name of the cell</li> </ul> <p> <strong>Returns:</strong> <code>string[]</code> - An array of village names within the specified cell </p> <p> This function is crucial for applications that require the most detailed level of geographical data in Rwanda. It's particularly useful for applications dealing with very specific locations, such as delivery services or detailed demographic studies. </p> <pre><code>import { getVillagesByCell } from 'rwanda-geo-structure'; const nyabisinduVillages = getVillagesByCell('Kigali City', 'Gasabo', 'Remera', 'Nyabisindu'); console.log(nyabisinduVillages); // Output: ['Amarembo I', 'Amarembo II', 'Gihogere', 'Kagara', 'Kinunga', 'Nyabisindu']</code></pre> <h3 id="getrandomlocation">getRandomLocation() <button class="copy-link" data-link="#getrandomlocation"> # </button> </h3> <p> Generates a random location in Rwanda, including province, district, sector, cell, and village. </p> <p> <strong>Returns:</strong> <code>Object</code> - An object containing randomly selected location data </p> <p> This function is particularly useful for generating test data, creating mock scenarios, or for educational purposes to explore Rwanda's administrative divisions. It provides a complete, randomly selected location from province down to village level. </p> <pre><code>import { getRandomLocation } from 'rwanda-geo-structure'; const randomLocation = getRandomLocation(); console.log(randomLocation); // Output example: // { // province: 'Southern Province', // district: 'Huye', // sector: 'Ngoma', // cell: 'Butare', // village: 'Akabuye' // }</code></pre> <h3 id="countlocations">countLocations() <button class="copy-link" data-link="#countlocations"> # </button> </h3> <p> Counts the number of administrative divisions at each level in Rwanda. </p> <p> <strong>Returns:</strong> <code>Object</code> - An object containing the count of each administrative division </p> <p> This function provides a quick overview of the number of administrative divisions at each level in Rwanda. It's useful for understanding the scale of the geographical data and for statistical purposes. </p> <pre><code>import { countLocations } from 'rwanda-geo-structure'; const locationCounts = countLocations(); console.log(locationCounts); // Output example: // { // provinces: 5, // districts: 30, // sectors: 416, // cells: 2148, // villages: 14837 // }</code></pre> </section> <section id="examples" class="function-section"> <h2>Examples</h2> <p> Here are some more detailed examples of how to use the Rwanda Geo Structure package in your projects: </p> <h3>Creating a Cascading Dropdown for Location Selection</h3> <pre><code>import React, { useState, useEffect } from 'react'; import { getProvinces, getDistrictsByProvince, getSectorsByDistrict, getCellsBySector, getVillagesByCell } from 'rwanda-geo-structure'; function LocationSelector() { const [provinces, setProvinces] = useState([]); const [districts, setDistricts] = useState([]); const [sectors, setSectors] = useState([]); const [cells, setCells] = useState([]); const [villages, setVillages] = useState([]); const [selectedProvince, setSelectedProvince] = useState(''); const [selectedDistrict, setSelectedDistrict] = useState(''); const [selectedSector, setSelectedSector] = useState(''); const [selectedCell, setSelectedCell] = useState(''); const [selectedVillage, setSelectedVillage] = useState(''); useEffect(() => { setProvinces(getProvinces()); }, []); useEffect(() => { if (selectedProvince) { setDistricts(getDistrictsByProvince(selectedProvince)); setSelectedDistrict(''); setSelectedSector(''); setSelectedCell(''); setSelectedVillage(''); } }, [selectedProvince]); useEffect(() => { if (selectedDistrict) { setSectors(getSectorsByDistrict(selectedProvince, selectedDistrict)); setSelectedSector(''); setSelectedCell(''); setSelectedVillage(''); } }, [selectedProvince, selectedDistrict]); useEffect(() => { if (selectedSector) { setCells(getCellsBySector(selectedProvince, selectedDistrict, selectedSector)); setSelectedCell(''); setSelectedVillage(''); } }, [selectedProvince, selectedDistrict, selectedSector]); useEffect(() => { if (selectedCell) { setVillages(getVillagesByCell(selectedProvince, selectedDistrict, selectedSector, selectedCell)); setSelectedVillage(''); } }, [selectedProvince, selectedDistrict, selectedSector, selectedCell]); return ( <div> <select value={selectedProvince} onChange={(e) => setSelectedProvince(e.target.value)}> <option value="">Select Province</option> {provinces.map(province => ( <option key={province} value={province}>{province}</option> ))} </select> <select value={selectedDistrict} onChange={(e) => setSelectedDistrict(e.target.value)} disabled={!selectedProvince}> <option value="">Select District</option> {districts.map(district => ( <option key={district} value={district}>{district}</option> ))} </select> <select value={selectedSector} onChange={(e) => setSelectedSector(e.target.value)} disabled={!selectedDistrict}> <option value="">Select Sector</option> {sectors.map(sector => ( <option key={sector} value={sector}>{sector}</option> ))} </select> <select value={selectedCell} onChange={(e) => setSelectedCell(e.target.value)} disabled={!selectedSector}> <option value="">Select Cell</option> {cells.map(cell => ( <option key={cell} value={cell}>{cell}</option> ))} </select> <select value={selectedVillage} onChange={(e) => setSelectedVillage(e.target.value)} disabled={!selectedCell}> <option value="">Select Village</option> {villages.map(village => ( <option key={village} value={village}>{village}</option> ))} </select> </div> ); } export default LocationSelector;</code></pre> <h3>Generating Random Test Data</h3> <pre><code>import { getRandomLocation, countLocations } from 'rwanda-geo-structure'; function generateTestData(count) { const testData = []; const locationCounts = countLocations(); for (let i = 0; i < count; i++) { const location = getRandomLocation(); testData.push({ id: i + 1, name: `Test User ${i + 1}`, ...location }); } console.log(`Generated ${count} test users`); console.log(`Total locations in Rwanda: `, locationCounts); return testData; } const testUsers = generateTestData(10); console.log(testUsers);</code></pre> <h3>Creating a Location Statistics Dashboard</h3> <pre><code>import { countLocations, getProvinces, getDistrictsByProvince } from 'rwanda-geo-structure'; function LocationStatistics() { const stats = countLocations(); const provinces = getProvinces(); const provinceStats = provinces.map(province => ({ name: province, districts: getDistrictsByProvince(province).length })); return ( <div> <h1>Rwanda Location Statistics</h1> <h2>Overall Statistics</h2> <ul> <li>Total Provinces: {stats.provinces}</li> <li>Total Districts: {stats.districts}</li> <li>Total Sectors: {stats.sectors}</li> <li>Total Cells: {stats.cells}</li> <li>Total Villages: {stats.villages}</li> </ul> <h2>Province-wise Statistics</h2> <ul> {provinceStats.map(province => ( <li key={province.name}> {province.name}: {province.districts} districts </li> ))} </ul> </div> ); } export default LocationStatistics;</code></pre> </section> <section id="contributing" class="function-section"> <h2>Contributing</h2> <p> Contributions to the Rwanda Geo Structure package are welcome! Here are some ways you can contribute: </p> <ol> <li> Report bugs or request features by opening an issue on the GitHub repository. </li> <li> Submit pull requests to fix bugs or add new features. Please ensure your code adheres to the existing style and that all tests pass. </li> <li> Improve documentation or add usage examples to help other developers understand and use the package more effectively. </li> <li> Share your experience using the package and suggest improvements based on real-world usage scenarios. </li> </ol> <p> Before making significant changes, please open an issue to discuss your proposed changes. This helps ensure that your contribution aligns with the project's goals and direction. </p> </section> <section id="license" class="function-section"> <h2>License</h2> <p> This project is licensed under the MIT License. This means you are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, subject to the following conditions: </p> <ul> <li> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. </li> <li> The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. </li> </ul> <p> For the full license text, please see the LICENSE file in the project repository. </p> </section> </div> <button class="dark-mode-toggle" onclick="toggleDarkMode()"> Toggle Dark Mode </button> <script> function toggleDarkMode() { document.body.classList.toggle("dark-mode"); } document.querySelectorAll(".copy-link").forEach((button) => { button.addEventListener("click", (e) => { e.preventDefault(); const link = window.location.href.split("#")[0] + e.target.dataset.link; navigator.clipboard.writeText(link).then(() => { alert("Link copied to clipboard!"); }); }); }); </script> </body> </html>