README.md

metadata

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:

# 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:

# 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:

# 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):

# 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:

# 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

# 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