KPI Dashboards – Telemetry Health

React + Python dashboard for telemetry health indicators: CSV upload, local CSV_DATA processing, and Google BigQuery. Built with Vite, TypeScript, React, shadcn-ui, Tailwind CSS, and a FastAPI backend.

Setup

1. Install dependencies

Frontend (Node.js)

npm install

Backend (Python)

cd backend
python -m venv .venv
# Windows PowerShell:
.\.venv\Scripts\activate
# macOS/Linux:
# source .venv/bin/activate
pip install -r requirements.txt

2. Backend credentials (optional, for BigQuery)

To use Load from BigQuery in the dashboard:

• Copy your Google Cloud service account JSON key to backend/google-credentials.json, or
• Set GOOGLE_APPLICATION_CREDENTIALS to the path of your key file.

3. Run

Terminal 1 – Backend

cd backend
.\.venv\Scripts\activate   # Windows
uvicorn main:app --reload --host 127.0.0.1 --port 8000

Terminal 2 – Frontend

npm run dev

Open http://localhost:8080 (or the URL shown by Vite). Use the dashboard to upload a CSV, process a file from the CSV_DATA folder, or load from BigQuery (truck tables).

Requirements

• Frontend: Node.js 18+, npm. All packages are in package.json; run npm install.
• Backend: Python 3.10+. All packages are in backend/requirements.txt; run pip install -r backend/requirements.txt.

Project structure

• src/ – React app (context, components, charts, config)
• backend/ – FastAPI app (main.py), requirements.txt, optional google-credentials.json
• CSV_DATA/ – Optional folder for large CSVs (processed by the backend)

Repo

https://github.com/aadi-python/KPI-Dashboards