Skip to main content

Low-Level Design

Architecture Overview

We're building a React component library to make charting and mapping easier and more consistent across our projects. The library will be divided into several key parts:

  1. Component Layer: Where all our chart and map components live.
  2. Service Layer: Handles all the data fetching and API calls and also stores JWT.
  3. Utility Layer: Contains helper functions to make data transform easier and unified.
  4. Styling Layer: Ensures everything looks good and stays consistent.

1. Component Layer

This is the heart of Akvo charts library, containing reusable React components that are easy to configure and use.

  • Chart Components:
    • BaseChart: A foundational component for all charts, setting up ECharts with basic settings.
    • LineChart, BarChart, PieChart: Specific chart types built on top of BaseChart, each with their unique configurations.
    • Etc...
  • Map Components:
    • BaseMap: The foundational map component, setting up Leaflet with basic settings.
    • MarkerMap, HeatMap: Specific map types built on top of BaseMap, adding more features.

Each component will be designed to accept props for data, options, and styling, to making them flexible and reusable.

2. Service Layer

The service layer takes care of all the heavy lifting related to data. This includes fetching data from APIs and processing it into a format our components can use.

  • API Service: Manages API calls to fetch the data needed for our charts and maps.
  • Data Processing Service: Transforms raw data into something our components can work with.
  • Configuration Service: Manages default settings and configurations for our components.

3. Utility Layer

This layer is packed with helpful functions that make our components and services work smoothly together.

  • Data Utilities: Functions for filtering, sorting, and manipulating data.
  • Config Utilities: Functions to merge user settings with default configurations.
  • Style Utilities: Functions to ensure consistent styling across components.

4. Styling Layer

The styling layer ensures our components look good and consistent across different projects.

  • Base Styles: Common styles for all components.
  • Theming: Allows for custom themes to match the host site's design.
  • Responsive Design: Ensures components look great on all screen sizes.
Back to top