Introduction

Objective

In many projects, we often repeat tasks by copying and pasting chart and map components from other projects. This practice is inefficient and leads to inconsistencies and increased maintenance efforts. By creating a dedicated React component library for both ECharts and Leaflet, we aim to eliminate this redundancy, streamline integration, and ensure a consistent approach to data visualization and mapping across all our projects.

Unlike platforms such as Power Bi, which require complex setups with cron-jobs for Excel or intricate SQL integrations, ECharts and Leaflet provide seamless connections with back-end APIs. This library will facilitate effortless data filtering, parameter handling, and styling customization, ensuring that charts and maps perfectly match the host site’s design and functionality.

Chart Component, Maps Component, and Maps Utilities are example of how we often copy and paste these into many project. While copying and pasting is relatively easy, it is not maintainable in the long run. Our goal is to develop a tool that can generate dashboards with minimal configuration or parameters, reducing redundancy and enhancing maintainability across 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: Create a library of reusable React components for ECharts and Leaflet to standardize and simplify the integration process.
2. Enhance Data Handling: Ensure components are capable of handling complex data filtering and parameterization to meet diverse project requirements.
3. Improve Customization Options: Provide extensive styling options to ensure components can be easily customized to match the visual identity of any host site.
4. Streamline API Integration: Facilitate seamless integration with back-end APIs to enable real-time data visualization and mapping.
5. Support and Maintenance: Establish a robust framework for ongoing support and maintenance, ensuring that the library remains up-to-date with the latest features and security patches.