Introduction

Objective

Many projects involve repeating tasks by copying and pasting chart and map components from other projects. This inefficient practice leads to inconsistencies and increased maintenance efforts. Our solution is to create a dedicated React component library for both ECharts and Leaflet. This will eliminate redundancy, optimize integration, and ensure a consistent approach to data visualization and mapping in all projects.

Platforms like Power Bi require complex setups with cron-jobs for Excel or detailed SQL integrations. In contrast, ECharts and Leaflet offer smooth connections with back-end APIs. Our library will make data filtering, parameter handling, and styling customization effortless. This ensures that charts and maps match the host site’s design and functionality perfectly.

Examples like the Chart Component, Maps Component, and Maps Utilities are commonly copied and pasted across projects. While this method is simple, it lacks long-term maintainability. Our objective is to create a tool that can generate dashboards with minimal configuration or parameters, reducing redundancy and improving maintainability in 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 standardize and simplify the integration process, create a library of reusable React components for ECharts and Leaflet.
2. Enhance Data Handling: Make sure the components can handle complex data filtering and parameterization to meet various project requirements.
3. Improve Customization Options: Offer extensive styling options so components can easily be customized to match the visual identity of any host site.
4. Optimize API Integration: Enable real-time data visualization and mapping by assisting smooth integration with back-end APIs.
5. Support and Maintenance: Establish a strong framework for ongoing support and maintenance to keep the library up-to-date with the latest features and security patches.