# Low-Level Design

## **Architecture Overview**

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

1. **Component Layer:** Where all the chart and maps 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 Akvo-Charts components can use.

- **API Service:** Manages API calls to fetch the data needed for Akvo-Charts and maps.
- **Data Processing Service:** Transforms raw data into something Akvo-Charts components can work with.
- **Configuration Service:** Manages default settings and configurations for Akvo-Charts 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.

## **Build and Deployment Scripts**

The Akvo-Charts project utilizes a set of scripts defined in the [package.json](https://github.com/akvo/akvo-charts/blob/main/package.json) file to handle various tasks related to building, testing, and deploying the library.

```json
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs --css-modules 'ae-[local]'",
    "start": "microbundle-crl watch --no-compress --format modern,cjs --css-module 'ae-[local]'",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build ",
    "test:build": "run-s build",
    "test:lint": "eslint --config .eslintrc.json ./src/ --ext .js,.jsx",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && yarn install && yarn run build",
    "deploy": "gh-pages -d example/build"
  }
```

Here’s a breakdown of what each script does:

1. **`build`:** This script uses [microbundle-crl](https://www.npmjs.com/package/microbundle-crl) to bundle the library. It generates two formats (modern and cjs) without compression and applies CSS modules with a naming convention of `ac-[local]`.
2. **`start`:** This script is for development purposes. It watches for changes and rebuilds the library on the fly, using the same settings as the build script.
3. **`prepare`:** This script runs the build script as a part of the package preparation before publishing or deploying.
4. **`test`:** This script runs a series of sub-scripts to execute unit tests, linting, and build tests. 
    - **`test:build`:** This script triggers the build process as part of the testing sequence.
    - **`test:lint`:** This script uses ESLint to lint the source files according to the configurations specified in .eslintrc.json.
    - **`test:unit`:** This script runs unit tests in a CI environment using react-scripts with jsdom as the test environment.
    - **`test:watch`:** This script runs unit tests in watch mode for ongoing development.
5. **`predeploy`:** This script prepares the example project for deployment by navigating into the [example](https://github.com/akvo/akvo-charts/tree/main/example) directory, installing dependencies, and building the example project.
6. **`deploy`:** This script deploys the built example project to GitHub Pages.