Introduction

Objective

InMany manyprojects projects,involve we often repeatrepeating tasks by copying and pasting chart and map components from other projects. This practice is inefficient andpractice leads to inconsistencies and increased maintenance efforts. ByOur creatingsolution is to create a dedicated React component library for both ECharts and Leaflet,. weThis aim towill eliminate this redundancy, streamlineoptimize integration, and ensure a consistent approach to data visualization and mapping acrossin all our projects.

UnlikePlatforms platforms such aslike Power Bi, whichBi require complex setups with cron-jobs for Excel or intricatedetailed SQL integrations,integrations. In contrast, ECharts and Leaflet provideoffer seamlesssmooth connections with back-end APIs. ThisOur library will facilitate effortlessmake data filtering, parameter handling, and styling customization,customization ensuringeffortless. This ensures that charts and maps perfectly match the host site’s design and functionality.functionality perfectly.

Examples like the Chart Component,Component, Maps Component, and Maps Utilities are examplecommonly of how we often copycopied and pastepasted theseacross into many project.projects. While copyingthis and pastingmethod is relatively easy,simple, it islacks notlong-term maintainable in the long run.maintainability. Our goalobjective is to developcreate a tool that can generate dashboards with minimal configuration or parameters, reducing redundancy and enhancingimproving maintainability acrossin all projects.

Benefits

• Consistency: Ensures uniform charting and mapping components across different projects.
• Efficiency: Reduces time spent on repetitive tasks, allowing developers to focus on core functionalities.
• Seamless Integration: Simplifies the connection with back-end APIs for dynamic data handling.
• Customization: Enables easy styling adjustments to match the host site’s aesthetics.
• Maintenance: Eases the maintenance and updating process by centralizing chart and map components in one library.

Project Showcase

The ECharts and Leaflet libraries have been successfully implemented in various projects, demonstrating their versatility and effectiveness. These projects include:

• Wash in School:
  • https://si-wins.akvotest.org/
  • https://siwins.akvo.org/
• Income Drive Calculator (IDH): https://idc.akvo.org/
• 2SCALE: https://2scale.tc.akvo.org/
• Wash SDG Portal:
  • https://wai-ethiopia.akvotest.org/
  • https://districtwash-ug.org/
  • https://districtwash-np.org/
  • https://districtwash-bd.org/
• MIS Portal: https://ug-wai-mis.tc.akvo.org/
• UNEP Actions: https://unep.tc.akvo.org/
• IDH Farmfit: https://idh-prod.tc.akvo.org/login
• Kabarole WASH: https://si-hcf-wash.tc.akvo.org/
• Covid Uganda: https://covid-ug5w.tc.akvo.org/
• and Many more

---

Goals

1. Develop Reusable Components: To Createstandardize and simplify the integration process, create a library of reusable React components for ECharts and Leaflet to standardize and simplify the integration process.Leaflet.
2. Enhance Data Handling: Make Ensuresure the components arecan capable of handlinghandle complex data filtering and parameterization to meet diversevarious project requirements.
3. Improve Customization Options:  ProvideOffer extensive styling options to ensureso components can easily be easily customized to match the visual identity of any host site.
4. StreamlineOptimize API Integration:  Facilitate seamless integration with back-end APIs to enableEnable real-time data visualization and mapping.mapping by assisting smooth integration with back-end APIs.
5. Support and Maintenance:  Establish a robuststrong framework for ongoing support and maintenance,maintenance ensuringto thatkeep the library remains up-to-date with the latest features and security patches.