---
title: Training Load Dataviz
emoji: 🏃
colorFrom: green
colorTo: red
sdk: docker
pinned: false
license: mit
app_port: 8080
---

# Training Load Data Visualization

A full browser JavaScript/TypeScript app for visualizing Garmin activity data.

## Features

- Upload CSV file of Garmin activities history
- Display 3 graphs of Acute-Chronic Workload Ratio (ACWR) over time
  - based on Distance
  - based on Duration
  - based on Training Stress Score (TSS)

the 3 graphs x axis show each day, from first activity day, to last activity day
each day show to sum of value of the day ( left y axis )
one curve show the last 7 days average ( left y axis )
one curve show the last 28 days average ( left y axis )
another curve show the ACWR ( right y axis  )

## Running Locally

### Option 1: With Node.js

**Prerequisites:**
- Node.js 20+ and npm

**Steps:**
```bash
# Install dependencies
npm install

# Run development server
npm run dev
```

The app will be available at `http://localhost:3000`

### Option 2: With Docker

**Prerequisites:**
- Docker installed on your system

**Using Docker directly:**
```bash
# Build the Docker image
docker build -t training-load-dataviz .

# Run the container
docker run -d -p 8080:8080 --name training-load-app training-load-dataviz
```

The app will be available at `http://localhost:8080`

**Using Docker Compose (recommended):**

**Production Mode:**
```bash
# Start the application
docker compose up -d

# View logs
docker compose logs -f

# Stop the application
docker compose down
```

The app will be available at `http://localhost:8080`

**Development Mode (with hot reload):**
```bash
# Start in development mode with hot reload
docker compose -f docker-compose.yml -f docker-compose.dev.yml up

# Rebuild dev container after package.json changes
docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build
```

The dev server will be available at `http://localhost:5173` with hot reload enabled. Changes to `src/`, `index.html`, or config files will automatically refresh the browser.

**Docker Commands:**
```bash
# Rebuild after code changes (production)
docker compose up -d --build

# Stop and remove containers
docker compose down

# View running containers
docker ps

# Stop the container
docker stop training-load-app

# Remove the container
docker rm training-load-app

# Remove the image
docker rmi training-load-dataviz
```

## Building for Production

```bash
# Build the application
npm run build

# Preview production build
npm run preview
```

The built files will be in the `dist/` directory.

## Project Structure

```
training-load-dataviz/
├── src/
│   ├── components/     # Chart components
│   ├── types/          # TypeScript interfaces
│   ├── utils/          # Utility functions (CSV parser, ACWR calculator)
│   ├── main.ts         # Application entry point
│   └── style.css       # Styles
├── public/             # Static assets
├── index.html          # HTML entry point
├── Dockerfile          # Docker build configuration
├── docker-compose.yml  # Docker Compose configuration
└── package.json        # Dependencies and scripts
```