Spaces:
Running
Running
File size: 3,205 Bytes
e117470 d58e2d3 e117470 35527e2 d58e2d3 35527e2 d831612 35527e2 d831612 35527e2 d831612 35527e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
---
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
```
|