# ayon-coder/future_ml_01 architecture

> Architecture diagram of the GitHub repository ayon-coder/future_ml_01, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ayon-coder/future_ml_01
- Repository: https://github.com/ayon-coder/future_ml_01

## Overview

This is a sales-forecasting product: a browser dashboard requests forecast, model-metric, and business-insight data from a Flask API, which prepares Superstore data, trains and evaluates a model, and computes dashboard summaries. The graph preserves the documented dashboard capabilities. Backend calls and frontend requests are visible in excerpts; some dashboard page details and the client/server data handoff are supported by the README rather than fully sampled implementation.

Main entry points: [`backend/app.py`](https://github.com/ayon-coder/future_ml_01/blob/main/backend/app.py) (Flask API routes), [`frontend/app.js`](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js) (Dashboard navigation), [`backend/data_preprocessing.py`](https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py) (Load and clean data), [`Sample - Superstore.csv`](https://github.com/ayon-coder/future_ml_01/blob/main/Sample%20-%20Superstore.csv) (Superstore transactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Dashboard"]
  node_dashboard["Dashboard navigation<br/>[app.js]"]
  node_overview["Overview and growth<br/>[app.js]"]
  node_forecastview["Forecast view<br/>[app.js]"]
  node_breakdown["Breakdown view<br/>[app.js]"]
  node_seasonality["Seasonality view<br/>[app.js]"]
  node_modelview["Model evaluation view<br/>[app.js]"]
end

subgraph group_api["API Service"]
  node_api["Flask API routes<br/>[app.py]"]
end

subgraph group_data["Data Preparation"]
  node_dataset["Superstore transactions"]
  node_preprocess["Load and clean data"]
  node_monthly["Monthly aggregation"]
  node_features["Time features"]
  node_insights["Business summaries"]
end

subgraph group_forecast["Forecasting"]
  node_training["Train and evaluate<br/>[model.py]"]
  node_prediction["12-month forecast<br/>[model.py]"]
  node_history["Historical series<br/>[model.py]"]
end

node_analyst(("Dashboard user"))

node_analyst -->|"uses"| node_dashboard
node_dashboard -->|"requests data"| node_api
node_api -->|"loads and cleans"| node_preprocess
node_dataset -->|"reads CSV"| node_preprocess
node_api -->|"aggregates data"| node_monthly
node_api -->|"adds features"| node_features
node_api -->|"computes summaries"| node_insights
node_api -->|"trains model"| node_training
node_api -->|"generates forecast"| node_prediction
node_api -->|"gets history"| node_history
node_api -->|"serves JSON"| node_dashboard
node_dashboard -->|"renders"| node_overview
node_dashboard -->|"renders"| node_forecastview
node_dashboard -->|"renders"| node_breakdown
node_dashboard -->|"renders"| node_seasonality
node_dashboard -->|"renders"| node_modelview

click node_dashboard "https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js"
click node_overview "https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js"
click node_forecastview "https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js"
click node_breakdown "https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js"
click node_seasonality "https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js"
click node_modelview "https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js"
click node_api "https://github.com/ayon-coder/future_ml_01/blob/main/backend/app.py"
click node_dataset "https://github.com/ayon-coder/future_ml_01/blob/main/Sample%20-%20Superstore.csv"
click node_preprocess "https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py"
click node_monthly "https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py"
click node_features "https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py"
click node_insights "https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py"
click node_training "https://github.com/ayon-coder/future_ml_01/blob/main/backend/model.py"
click node_prediction "https://github.com/ayon-coder/future_ml_01/blob/main/backend/model.py"
click node_history "https://github.com/ayon-coder/future_ml_01/blob/main/backend/model.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_dashboard,node_overview,node_forecastview,node_breakdown,node_seasonality,node_modelview,node_analyst toneBlue
class node_api toneAmber
class node_dataset,node_preprocess,node_monthly,node_features,node_insights toneMint
class node_training,node_prediction,node_history toneRose
```

## Components

### Dashboard

- [Dashboard navigation](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js): `frontend/app.js`
- [Overview and growth](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js): `frontend/app.js`
- [Forecast view](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js): `frontend/app.js`
- [Breakdown view](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js): `frontend/app.js`
- [Seasonality view](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js): `frontend/app.js`
- [Model evaluation view](https://github.com/ayon-coder/future_ml_01/blob/main/frontend/app.js): `frontend/app.js`

### API Service

- [Flask API routes](https://github.com/ayon-coder/future_ml_01/blob/main/backend/app.py): `backend/app.py`

### Data Preparation

- [Superstore transactions](https://github.com/ayon-coder/future_ml_01/blob/main/Sample%20-%20Superstore.csv): `Sample - Superstore.csv`
- [Load and clean data](https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py): `backend/data_preprocessing.py`
- [Monthly aggregation](https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py): `backend/data_preprocessing.py`
- [Time features](https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py): `backend/data_preprocessing.py`
- [Business summaries](https://github.com/ayon-coder/future_ml_01/blob/main/backend/data_preprocessing.py): `backend/data_preprocessing.py`

### Forecasting

- [Train and evaluate](https://github.com/ayon-coder/future_ml_01/blob/main/backend/model.py): `backend/model.py`
- [12-month forecast](https://github.com/ayon-coder/future_ml_01/blob/main/backend/model.py): `backend/model.py`
- [Historical series](https://github.com/ayon-coder/future_ml_01/blob/main/backend/model.py): `backend/model.py`

### Other components

- **Dashboard user**

## Connections

- Dashboard user → Dashboard navigation: uses (evidence: `README.md`)
- Dashboard navigation → Flask API routes: requests data (evidence: `frontend/app.js`)
- Flask API routes → Load and clean data: loads and cleans (evidence: `backend/app.py`)
- Superstore transactions → Load and clean data: reads CSV (evidence: `backend/data_preprocessing.py`)
- Flask API routes → Monthly aggregation: aggregates data (evidence: `backend/app.py`)
- Flask API routes → Time features: adds features (evidence: `backend/app.py`)
- Flask API routes → Business summaries: computes summaries (evidence: `backend/app.py`)
- Flask API routes → Train and evaluate: trains model (evidence: `backend/app.py`)
- Flask API routes → 12-month forecast: generates forecast (evidence: `backend/app.py`)
- Flask API routes → Historical series: gets history (evidence: `backend/app.py`)
- Flask API routes → Dashboard navigation: serves JSON (evidence: `README.md`)
- Dashboard navigation → Overview and growth: renders (evidence: `frontend/app.js`)
- Dashboard navigation → Forecast view: renders (evidence: `frontend/app.js`)
- Dashboard navigation → Breakdown view: renders (evidence: `frontend/app.js`)
- Dashboard navigation → Seasonality view: renders (evidence: `frontend/app.js`)
- Dashboard navigation → Model evaluation view: renders (evidence: `frontend/app.js`)