init

.dockerignore

@@ -0,0 +1,21 @@
+node_modules
+dist
+dist-ssr
+*.local
+.git
+.gitignore
+README.md
+.vscode
+.idea
+.DS_Store
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+coverage
+*.tmp
+*.temp
+.env
+.env.local
+.env.*.local

.gitignore

@@ -0,0 +1,40 @@
+# Dependencies
+node_modules
+.pnpm-store
+
+# Build output
+dist
+dist-ssr
+*.local
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Test coverage
+coverage
+*.lcov
+
+# Temporary files
+*.tmp
+*.temp

Activities.csv

@@ -0,0 +1,36 @@
+Activity Type,Date,Favorite,Title,Distance,Calories,Time,Avg HR,Max HR,Aerobic TE,Avg Run Cadence,Max Run Cadence,Avg Pace,Best Pace,Total Ascent,Total Descent,Avg Stride Length,Avg Vertical Ratio,Avg Vertical Oscillation,Avg Ground Contact Time,Avg GAP,Normalized Power® (NP®),Training Stress Score®,Avg Power,Max Power,Steps,Total Reps,Total Sets,Body Battery Drain,Min Temp,Decompression,Best Lap Time,Number of Laps,Max Temp,Moving Time,Elapsed Time,Min Elevation,Max Elevation
+Running,2025-12-02 09:19:49,false,"Torcy - Threshold","8.34","565","00:48:51","166","195","3.9","168","204","5:51","4:29","67","73","1.00","8.1","8.0","251","5:47","302","0.0","275","481","8,366","--","--","-15","12.0","No","00:00:21.8","11","24.0","00:48:46","00:48:51","37","98"
+Strength Training,2025-12-01 21:29:04,false,"renfo 🦵🦿🏋️‍♀️","0.00","114","00:20:51","112","141","0.5","--","--","--","--","--","--","--","--","--","--","--","--","0.0","--","--","208","104","12","-2","27.0","No","00:20:51","1","29.0","00:16:55","00:20:51","--","--"
+Running,2025-11-30 10:37:54,false,"Torcy - reprise TFL W2S1🩼🤕","10.34","697","01:09:46","146","166","3.4","161","182","6:45","5:16","71","76","0.93","9.1","8.2","276","6:44","250","0.0","242","350","11,628","--","--","-17","14.0","No","00:00:57.1","12","25.0","01:09:31","01:38:54","66","101"
+Cycling,2025-11-29 12:58:40,false,"Torcy Cycling","28.54","806","01:53:46","124","189","3.0","--","--","15.1","42.8","204","209","--","--","--","--","--","--","0.0","--","--","--","--","--","-20","17.0","No","00:15:05","6","26.0","01:40:30","03:17:42","44","133"
+Running,2025-11-28 09:18:56,false,"Torcy - reprise TFL W1S3🩼🤕","5.87","394","00:41:30","145","167","2.7","165","200","7:04","3:46","--","7","0.85","9.4","7.8","272","7:09","232","0.0","223","438","6,980","--","--","-9","15.0","No","00:00:20","17","27.0","00:41:14","00:41:30","88","95"
+Strength Training,2025-11-27 21:48:52,false,"renfo 🦵🦿🏋️‍♀️","0.00","85","00:15:57","112","127","0.4","--","--","--","--","--","--","--","--","--","--","--","--","0.0","--","--","114","57","11","-1","28.0","No","00:15:57","1","30.0","00:13:00","00:15:57","--","--"
+Running,2025-11-27 09:21:57,false,"Torcy - reprise TFL W1S2🩼🤕","4.14","293","00:27:00","158","168","2.8","169","184","6:32","5:28","31","32","0.92","8.9","7.9","265","6:30","253","0.0","247","356","4,688","--","--","-10","18.0","No","00:02:00.3","5","24.0","00:26:58","00:27:02","73","103"
+Cycling,2025-11-26 12:46:57,false,"Torcy - 🫀🫁📈🌬️🚴 VO2max 3","20.06","516","00:54:45","159","190","3.6","--","--","22.0","46.5","181","185","--","--","--","--","--","--","0.0","--","--","--","--","--","-11","16.0","No","00:00:30","43","26.0","00:53:11","00:54:45","82","109"
+Running,2025-11-25 17:11:49,false,"Torcy - reprise TFL 🩼🤕","2.94","193","00:21:11","132","155","2.1","145","239","7:12","5:39","--","6","0.92","8.5","7.7","275","7:12","226","0.0","205","306","3,214","--","--","-5","15.0","No","00:00:10.9","15","26.0","00:21:11","00:21:11","86","94"
+Cycling,2025-11-23 10:20:06,false,"Torcy Cycling","36.89","997","02:21:32","141","181","3.1","--","--","15.6","41.6","280","279","--","--","--","--","--","--","0.0","--","--","--","--","--","-19","11.0","No","00:08:15","8","27.0","02:11:25","02:21:32","37","108"
+Cycling,2025-11-22 08:36:16,false,"Torcy Cycling","15.86","451","00:40:53","160","176","3.2","--","--","23.3","42.3","150","151","--","--","--","--","--","--","0.0","--","--","--","--","--","-9","8.0","No","00:02:36.5","4","26.0","00:40:38","00:40:53","82","108"
+Cycling,2025-11-20 08:49:23,false,"Torcy Cycling","17.43","510","00:47:36","158","185","3.3","--","--","22.0","45.6","103","104","--","--","--","--","--","--","0.0","--","--","--","--","--","-11","13.0","No","00:07:52.7","4","25.0","00:46:08","00:47:36","35","95"
+Cycling,2025-11-19 07:52:32,false,"Torcy Cycling","25.92","755","01:12:13","160","181","3.6","--","--","21.5","43.0","235","235","--","--","--","--","--","--","0.0","--","--","--","--","--","-16","13.0","No","00:02:56.3","6","27.0","01:11:47","01:12:19","37","127"
+Running,2025-11-15 16:35:54,false,"Torcy - Base","5.34","377","00:36:53","154","164","2.6","159","176","6:54","5:30","12","13","0.95","9.1","8.2","277","6:54","234","0.0","231","329","6,146","--","--","-6","17.0","No","00:02:17.9","6","28.0","00:36:51","00:36:53","92","99"
+Running,2025-11-13 08:50:52,false,"Torcy - Base","6.31","462","00:41:17","160","183","3.2","166","212","6:33","5:03","77","78","0.95","8.7","7.9","266","6:24","262","0.0","251","364","7,154","--","--","-9","19.0","No","00:02:16.9","7","29.0","00:41:15","00:41:17","39","95"
+Running,2025-11-12 07:59:43,false,"Torcy - Base","9.66","685","01:01:56","160","174","3.5","169","187","6:25","5:24","76","75","0.94","8.9","8.1","265","6:23","262","0.0","257","341","10,706","--","--","-11","14.0","No","00:00:03.1","11","27.0","01:01:50","01:01:56","81","104"
+Cycling,2025-11-11 10:20:08,false,"Torcy Cycling","36.36","892","01:56:39","142","183","3.1","--","--","18.7","45.4","334","334","--","--","--","--","--","--","0.0","--","--","--","--","--","-20","16.0","No","00:04:53.9","8","27.0","01:53:43","01:56:44","35","101"
+Running,2025-11-09 10:01:02,false,"Montigny-le-Bretonneux - 5km-10km PARCOURIR MONTIGNY (10 km)","10.06","681","00:50:58","185","205","5.0","181","200","5:04","3:26","21","22","1.09","7.7","8.3","238","5:05","324","0.0","320","484","9,244","--","--","-15","16.0","No","00:00:13.1","11","21.0","00:50:56","00:50:58","156","166"
+Running,2025-11-08 10:36:30,false,"Torcy - Sprint","4.75","323","00:30:43","154","188","2.7","157","226","6:28","2:39","10","58","0.96","8.9","8.0","271","6:33","245","0.0","226","604","5,124","--","--","-11","19.0","No","00:00:15","14","27.0","00:30:19","00:31:47","36","92"
+Running,2025-11-06 07:29:02,false,"Torcy - Base","6.85","494","00:42:34","162","181","3.4","168","211","6:13","4:56","60","58","0.98","8.4","8.0","259","6:08","268","0.0","261","504","7,518","--","--","-11","19.0","No","00:01:32.9","8","27.0","00:42:31","00:42:34","76","105"
+Running,2025-11-05 08:25:58,false,"Torcy - Tempo","8.52","598","00:50:51","167","181","3.8","170","188","5:58","4:52","49","47","0.99","8.6","8.3","260","5:57","286","0.0","279","427","8,806","--","--","-15","17.0","No","00:02:00","12","25.0","00:50:48","00:50:51","70","102"
+Running,2025-11-04 08:44:09,false,"Torcy - Base","6.43","448","00:41:17","157","190","3.3","163","185","6:25","5:02","66","65","0.97","8.9","8.4","271","6:22","278","0.0","262","447","6,982","--","--","-11","16.0","No","00:00:08.2","8","23.0","00:41:10","00:41:17","41","94"
+Running,2025-11-03 08:49:43,false,"Torcy - Base","5.97","416","00:36:31","163","183","3.4","171","192","6:07","4:38","34","34","0.98","8.4","7.9","257","6:06","270","0.0","265","398","6,460","--","--","-13","15.0","No","00:05:26.3","6","27.0","00:36:30","00:36:31","87","103"
+Running,2025-11-02 10:14:20,false,"Torcy Running","6.94","483","00:44:13","168","201","3.4","163","202","6:22","3:34","15","15","0.94","9.0","8.2","266","6:24","296","0.0","259","495","7,280","--","--","-12","19.0","No","00:00:20.8","13","23.0","00:43:56","00:44:13","40","48"
+Running,2025-11-01 08:35:12,false,"Torcy Running","8.23","564","00:45:09","179","199","4.5","177","205","5:29","4:20","70","72","1.05","7.8","8.0","245","5:27","309","0.0","303","482","8,182","--","--","-15","21.0","No","00:01:01.3","9","26.0","00:45:06","00:45:09","68","99"
+Running,2025-10-31 07:46:16,false,"Torcy Running","12.25","856","01:28:59","154","166","3.3","159","212","7:16","4:31","115","114","0.87","9.7","8.3","287","7:13","241","0.0","236","328","14,504","--","--","-17","15.0","No","00:01:51.9","13","26.0","01:28:49","01:28:59","45","116"
+Cardio,2025-10-30 09:24:59,false,"pyramid direct on top 😜","0.00","217","00:18:50","171","206","3.0","--","--","--","--","--","--","--","--","--","--","--","--","0.0","--","--","544","165","31","-4","17.0","No","00:18:50","1","18.0","00:00:00","00:18:50","--","--"
+Running,2025-10-30 09:07:07,false,"Torcy Running","2.35","158","00:14:25","155","190","2.5","155","207","6:08","3:47","46","57","1.15","7.4","7.5","253","5:48","275","0.0","249","440","2,582","--","--","-4","17.0","No","00:02:50.4","3","24.0","00:14:16","00:14:25","41","98"
+Running,2025-10-29 07:47:13,false,"Torcy Running","10.01","674","00:56:16","179","197","5.0","176","189","5:37","4:49","77","78","1.02","8.0","8.1","248","5:36","296","0.0","291","379","10,084","--","--","-17","18.0","No","00:00:01.9","11","27.0","00:56:08","00:56:16","86","112"
+HIIT,2025-10-27 21:50:56,false,"Shadow boxing 20 min","0.00","207","00:20:13","159","182","3.0","--","--","--","--","--","--","--","--","--","--","--","--","0.0","--","--","328","164","27","-6","24.0","No","00:20:13","1","27.0","00:19:39","00:20:13","--","--"
+Running,2025-10-26 12:08:23,false,"Lognes Running","3.06","207","00:17:21","178","198","3.4","172","200","5:41","2:59","31","14","1.03","8.2","8.4","252","5:33","310","0.0","302","504","3,048","--","--","-4","18.0","No","00:00:15.4","4","24.0","00:17:15","00:17:21","76","101"
+Running,2025-10-26 10:52:19,false,"Lognes Running","4.01","286","00:22:56","184","206","4.3","161","192","5:43","4:04","11","13","1.07","8.4","8.9","255","5:45","316","0.0","294","434","3,756","--","--","-9","16.0","No","00:00:03.1","5","23.0","00:21:41","00:22:56","76","81"
+Running,2025-10-26 10:19:17,false,"Torcy Running","3.06","204","00:17:35","172","186","3.7","170","188","5:45","5:00","8","29","1.03","8.4","8.6","257","5:47","299","0.0","292","388","3,040","--","--","-6","20.0","No","00:00:20.3","4","27.0","00:17:33","00:17:35","72","99"
+Cycling,2025-10-25 09:26:19,false,"Torcy Cycling","50.19","1,061","02:10:58","152","173","4.6","--","--","23.0","43.7","269","268","--","--","--","--","--","--","0.0","--","--","--","--","--","-29","16.0","No","00:01:33.8","11","24.0","02:10:02","02:10:58","31","104"
+Running,2025-10-23 19:16:02,false,"10km Parc des droits de l'enfant ","10.05","869","00:58:16","179","199","5.0","170","179","5:48","2:39","32","36","1.01","8.6","8.7","261","5:48","302","0.0","298","377","9,920","--","--","-30","17.0","No","00:00:29.8","11","28.0","00:58:08","00:58:40","90","99"

Dockerfile

@@ -0,0 +1,31 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built assets from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,115 @@
+# 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:80 --name training-load-app training-load-dataviz
+```
+
+The app will be available at `http://localhost:8080`
+
+**Using Docker Compose (recommended):**
+```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`
+
+**Docker Commands:**
+```bash
+# Rebuild after code changes
+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
+```

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  training-load-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:80"
+    container_name: training-load-dataviz
+    restart: unless-stopped

index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Training Load Data Visualization</title>
+    <link rel="stylesheet" href="/src/style.css">
+</head>
+
+<body>
+    <div id="app">
+        <header>
+            <h1>Training Load Data Visualization</h1>
+        </header>
+
+        <main>
+            <section id="upload-section">
+                <h2>Upload Garmin Activities CSV</h2>
+                <div class="upload-container">
+                    <div class="ftp-input-container">
+                        <label for="ftp-input">
+                            Functional Threshold Power (FTP)
+                        </label>
+                        <input type="number" id="ftp-input" value="343" min="0" step="1" placeholder="343" />
+                        <span class="ftp-unit">Watts</span>
+                    </div>
+                    <input type="file" id="csv-upload" accept=".csv" />
+                    <label for="csv-upload" class="upload-label">
+                        Choose CSV File
+                    </label>
+                    <div id="upload-status"></div>
+                </div>
+            </section>
+
+            <section id="filter-section" class="hidden">
+                <div class="filter-container">
+                    <label class="filter-checkbox">
+                        <input type="checkbox" id="running-only-filter" />
+                        <span>🏃 Running only</span>
+                    </label>
+                </div>
+            </section>
+
+            <section id="charts-section" class="hidden">
+                <div class="chart-container">
+                    <h2>Distance-based ACWR</h2>
+                    <canvas id="distance-chart"></canvas>
+                </div>
+
+                <div class="chart-container">
+                    <h2>Duration-based ACWR</h2>
+                    <canvas id="duration-chart"></canvas>
+                </div>
+
+                <div class="chart-container">
+                    <h2>TSS-based ACWR</h2>
+                    <canvas id="tss-chart"></canvas>
+                </div>
+
+                <div class="legend">
+                    <div class="legend-item">
+                        <span class="legend-color low"></span>
+                        <span>ACWR &lt; 0.8 - Detraining risk</span>
+                    </div>
+                    <div class="legend-item">
+                        <span class="legend-color optimal"></span>
+                        <span>ACWR 0.8 - 1.3 - Optimal</span>
+                    </div>
+                    <div class="legend-item">
+                        <span class="legend-color high"></span>
+                        <span>ACWR &gt; 1.5 - Injury risk</span>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

nginx.conf

@@ -0,0 +1,32 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Enable gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache";
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Handle 404 errors
+    error_page 404 /index.html;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

package.json

@@ -0,0 +1,22 @@
+{
+    "name": "training-load-dataviz",
+    "version": "1.0.0",
+    "description": "Training load data visualization from Garmin CSV activities",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "type-check": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@types/node": "^20.10.0",
+        "typescript": "^5.3.0",
+        "vite": "^5.0.0"
+    },
+    "dependencies": {
+        "chart.js": "^4.4.0",
+        "papaparse": "^5.4.1",
+        "@types/papaparse": "^5.3.14"
+    }
+}

src/components/charts.ts

@@ -0,0 +1,246 @@
+import { Chart, ChartConfiguration, registerables } from 'chart.js';
+import type { MetricACWRData } from '@/types';
+
+// Register all Chart.js components
+Chart.register(...registerables);
+
+let distanceChart: Chart | null = null;
+let durationChart: Chart | null = null;
+let tssChart: Chart | null = null;
+
+// Common chart styling inspired by Garmin
+const commonOptions = {
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+        legend: {
+            display: true,
+            position: 'top' as const,
+            labels: {
+                usePointStyle: true,
+                padding: 15,
+                font: {
+                    size: 12,
+                },
+            },
+        },
+        tooltip: {
+            mode: 'index' as const,
+            intersect: false,
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            titleColor: '#1e293b',
+            bodyColor: '#475569',
+            borderColor: '#e2e8f0',
+            borderWidth: 1,
+            padding: 12,
+            displayColors: true,
+        },
+    },
+    scales: {
+        x: {
+            grid: {
+                display: false,
+                drawBorder: false,
+            },
+            ticks: {
+                maxRotation: 45,
+                minRotation: 45,
+                padding: 8,
+                color: '#64748b',
+                font: {
+                    size: 10,
+                },
+                autoSkip: true,
+                maxTicksLimit: 20,
+            },
+        },
+    },
+};
+
+function createDualAxisChart(
+    canvasId: string,
+    data: MetricACWRData,
+    metricLabel: string,
+    metricUnit: string,
+    barColor: string
+): Chart {
+    const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
+    if (!canvas) throw new Error(`Canvas ${canvasId} not found`);
+
+    const config: ChartConfiguration = {
+        type: 'bar',
+        data: {
+            labels: data.dates,
+            datasets: [
+                {
+                    type: 'bar',
+                    label: `Daily ${metricLabel}`,
+                    data: data.values,
+                    backgroundColor: barColor,
+                    borderWidth: 0,
+                    borderRadius: 2,
+                    barPercentage: 0.8,
+                    yAxisID: 'y',
+                },
+                {
+                    type: 'line',
+                    label: '7-Day Average',
+                    data: data.average7d,
+                    borderColor: 'rgba(239, 68, 68, 0.9)',
+                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                    borderWidth: 2,
+                    pointRadius: 0,
+                    pointHoverRadius: 4,
+                    tension: 0.4,
+                    fill: false,
+                    yAxisID: 'y',
+                },
+                {
+                    type: 'line',
+                    label: '28-Day Average',
+                    data: data.average28d,
+                    borderColor: 'rgba(249, 115, 22, 0.9)',
+                    backgroundColor: 'rgba(249, 115, 22, 0.1)',
+                    borderWidth: 2,
+                    pointRadius: 0,
+                    pointHoverRadius: 4,
+                    tension: 0.4,
+                    fill: false,
+                    yAxisID: 'y',
+                },
+                {
+                    type: 'line',
+                    label: 'ACWR',
+                    data: data.acwr,
+                    borderColor: 'rgba(139, 92, 246, 1)',
+                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                    borderWidth: 3,
+                    pointRadius: 0,
+                    pointHoverRadius: 5,
+                    tension: 0.4,
+                    fill: false,
+                    yAxisID: 'y1',
+                },
+            ],
+        },
+        options: {
+            ...commonOptions,
+            scales: {
+                ...commonOptions.scales,
+                y: {
+                    type: 'linear',
+                    position: 'left',
+                    beginAtZero: true,
+                    border: {
+                        display: false,
+                    },
+                    grid: {
+                        color: 'rgba(148, 163, 184, 0.1)',
+                    },
+                    ticks: {
+                        padding: 8,
+                        color: '#64748b',
+                        font: {
+                            size: 11,
+                        },
+                    },
+                    title: {
+                        display: true,
+                        text: `${metricLabel} ${metricUnit}`,
+                        color: '#64748b',
+                        font: {
+                            size: 12,
+                            weight: 500,
+                        },
+                    },
+                },
+                y1: {
+                    type: 'linear',
+                    position: 'right',
+                    beginAtZero: true,
+                    suggestedMin: 0,
+                    suggestedMax: 2,
+                    grid: {
+                        drawOnChartArea: false,
+                    },
+                    ticks: {
+                        padding: 8,
+                        color: '#8b5cf6',
+                        font: {
+                            size: 11,
+                        },
+                    },
+                    title: {
+                        display: true,
+                        text: 'ACWR',
+                        color: '#8b5cf6',
+                        font: {
+                            size: 12,
+                            weight: 500,
+                        },
+                    },
+                },
+            },
+            interaction: {
+                mode: 'index' as const,
+                intersect: false,
+            },
+        },
+    };
+
+    return new Chart(canvas, config);
+}
+
+export function createDistanceChart(data: MetricACWRData): void {
+    if (distanceChart) {
+        distanceChart.destroy();
+    }
+    distanceChart = createDualAxisChart(
+        'distance-chart',
+        data,
+        'Distance',
+        '(km)',
+        'rgba(59, 130, 246, 0.6)'
+    );
+}
+
+export function createDurationChart(data: MetricACWRData): void {
+    if (durationChart) {
+        durationChart.destroy();
+    }
+    durationChart = createDualAxisChart(
+        'duration-chart',
+        data,
+        'Duration',
+        '(min)',
+        'rgba(16, 185, 129, 0.6)'
+    );
+}
+
+export function createTSSChart(data: MetricACWRData): void {
+    if (tssChart) {
+        tssChart.destroy();
+    }
+    tssChart = createDualAxisChart(
+        'tss-chart',
+        data,
+        'TSS',
+        '',
+        'rgba(245, 158, 11, 0.6)'
+    );
+}
+
+export function destroyAllCharts(): void {
+    if (distanceChart) {
+        distanceChart.destroy();
+        distanceChart = null;
+    }
+    if (durationChart) {
+        durationChart.destroy();
+        durationChart = null;
+    }
+    if (tssChart) {
+        tssChart.destroy();
+        tssChart = null;
+    }
+}

src/main.ts

@@ -0,0 +1,126 @@
+import './style.css';
+import { parseCSV } from './utils/csvParser';
+import { calculateMetricACWR } from './utils/metricAcwr';
+import type { Activity } from './types';
+import {
+    createDistanceChart,
+    createDurationChart,
+    createTSSChart,
+    destroyAllCharts,
+} from './components/charts';
+
+// DOM elements
+const csvUpload = document.getElementById('csv-upload') as HTMLInputElement;
+const ftpInput = document.getElementById('ftp-input') as HTMLInputElement;
+const uploadStatus = document.getElementById('upload-status') as HTMLDivElement;
+const chartsSection = document.getElementById('charts-section') as HTMLElement;
+const filterSection = document.getElementById('filter-section') as HTMLElement;
+const runningOnlyFilter = document.getElementById('running-only-filter') as HTMLInputElement;
+
+// Store all activities globally
+let allActivities: Activity[] = [];
+
+// Event listeners
+csvUpload?.addEventListener('change', handleFileUpload);
+runningOnlyFilter?.addEventListener('change', handleFilterChange);
+
+async function handleFileUpload(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    if (!file) {
+        return;
+    }
+
+    uploadStatus.textContent = 'Processing CSV file...';
+    uploadStatus.className = '';
+
+    try {
+        // Get FTP value from input
+        const ftp = parseInt(ftpInput.value) || 343;
+
+        // Parse CSV with user-provided FTP
+        allActivities = await parseCSV(file, ftp);
+
+        if (allActivities.length === 0) {
+            throw new Error('No valid activities found in the CSV file');
+        }
+
+        // Reset filter
+        if (runningOnlyFilter) {
+            runningOnlyFilter.checked = false;
+        }
+
+        // Render charts with all activities
+        renderCharts(allActivities);
+
+        // Show filter and charts sections
+        filterSection.classList.remove('hidden');
+        chartsSection.classList.remove('hidden');
+
+        // Update status
+        uploadStatus.textContent = `Successfully loaded ${allActivities.length} activities`;
+        uploadStatus.className = 'success';
+    } catch (error) {
+        console.error('Error processing file:', error);
+        uploadStatus.textContent = error instanceof Error ? error.message : 'Failed to process CSV file';
+        uploadStatus.className = 'error';
+        filterSection.classList.add('hidden');
+        chartsSection.classList.add('hidden');
+    }
+}
+
+function handleFilterChange(): void {
+    if (allActivities.length === 0) return;
+
+    const filteredActivities = runningOnlyFilter.checked
+        ? allActivities.filter(activity => activity.activityType === 'Running')
+        : allActivities;
+
+    renderCharts(filteredActivities);
+}
+
+function renderCharts(activities: Activity[]): void {
+    // Calculate date range from all activities for consistency
+    let dateRange: { start: Date; end: Date } | undefined;
+    if (allActivities.length > 0) {
+        const sortedAll = [...allActivities].sort((a, b) => a.date.getTime() - b.date.getTime());
+        // Normalize to midnight to avoid timezone/time comparison issues
+        const startDate = new Date(sortedAll[0].date);
+        startDate.setHours(0, 0, 0, 0);
+        const endDate = new Date(sortedAll[sortedAll.length - 1].date);
+        endDate.setHours(23, 59, 59, 999);
+        dateRange = {
+            start: startDate,
+            end: endDate,
+        };
+    }
+
+    // Calculate ACWR for each metric with consistent date range
+    const distanceData = calculateMetricACWR(
+        activities,
+        (activity) => activity.distance,
+        dateRange
+    );
+    const durationData = calculateMetricACWR(
+        activities,
+        (activity) => activity.duration,
+        dateRange
+    );
+    const tssData = calculateMetricACWR(
+        activities,
+        (activity) => activity.trainingStressScore,
+        dateRange
+    );
+
+    // Destroy existing charts
+    destroyAllCharts();
+
+    // Create new charts
+    createDistanceChart(distanceData);
+    createDurationChart(durationData);
+    createTSSChart(tssData);
+}
+
+// Initialize
+console.log('Training Load Data Visualization initialized');

src/style.css

@@ -0,0 +1,273 @@
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #64748b;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --bg-color: #f8fafc;
+    --card-bg: #ffffff;
+    --text-color: #1e293b;
+    --border-color: #e2e8f0;
+    --optimal-color: rgba(16, 185, 129, 0.2);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+#app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    background-color: var(--card-bg);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1.5rem 2rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+header h1 {
+    font-size: 1.75rem;
+    color: var(--primary-color);
+    font-weight: 700;
+}
+
+main {
+    flex: 1;
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+section {
+    margin-bottom: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+    font-weight: 600;
+}
+
+.hidden {
+    display: none;
+}
+
+/* Upload Section */
+#upload-section {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.upload-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.ftp-input-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    background-color: var(--bg-color);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+}
+
+.ftp-input-container label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color);
+    white-space: nowrap;
+}
+
+#ftp-input {
+    width: 100px;
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 1rem;
+    text-align: center;
+    background-color: var(--card-bg);
+}
+
+#ftp-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.ftp-unit {
+    font-size: 0.875rem;
+    color: var(--secondary-color);
+    font-weight: 500;
+}
+
+#csv-upload {
+    display: none;
+}
+
+.upload-label {
+    display: inline-block;
+    padding: 0.75rem 2rem;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.upload-label:hover {
+    background-color: #1d4ed8;
+}
+
+#upload-status {
+    font-size: 0.875rem;
+    color: var(--secondary-color);
+    min-height: 1.5rem;
+}
+
+#upload-status.success {
+    color: var(--success-color);
+    font-weight: 500;
+}
+
+#upload-status.error {
+    color: var(--danger-color);
+    font-weight: 500;
+}
+
+/* Filter Section */
+#filter-section {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 1rem 2rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.filter-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.filter-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 1rem;
+    user-select: none;
+}
+
+.filter-checkbox input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--primary-color);
+}
+
+.filter-checkbox span {
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+/* Charts Section */
+#charts-section {
+    display: grid;
+    gap: 2rem;
+}
+
+.chart-container {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.chart-container canvas {
+    max-height: 400px;
+    width: 100%;
+}
+
+/* Legend */
+.legend {
+    margin-top: 1rem;
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.legend-color {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+}
+
+.legend-color.low {
+    background-color: rgba(191, 219, 254, 0.5);
+    border: 2px solid rgba(59, 130, 246, 0.7);
+}
+
+.legend-color.optimal {
+    background-color: rgba(187, 247, 208, 0.5);
+    border: 2px solid rgba(34, 197, 94, 0.7);
+}
+
+.legend-color.high {
+    background-color: rgba(254, 202, 202, 0.5);
+    border: 2px solid rgba(239, 68, 68, 0.7);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    header {
+        padding: 1rem;
+    }
+
+    header h1 {
+        font-size: 1.25rem;
+    }
+
+    main {
+        padding: 1rem;
+    }
+
+    h2 {
+        font-size: 1.25rem;
+    }
+
+    #upload-section {
+        padding: 1.5rem;
+    }
+
+    .chart-container {
+        padding: 1rem;
+    }
+}

src/types/index.ts

@@ -0,0 +1,23 @@
+export interface Activity {
+    date: Date;
+    activityType?: string;
+    distance?: number; // in kilometers
+    duration?: number; // in minutes
+    trainingStressScore?: number;
+}
+
+export interface ProcessedData {
+    activities: Activity[];
+    dates: string[];
+    distances: (number | null)[];
+    durations: (number | null)[];
+    tss: (number | null)[];
+}
+
+export interface MetricACWRData {
+    dates: string[];
+    values: (number | null)[]; // Daily sum values
+    average7d: (number | null)[]; // 7-day rolling average
+    average28d: (number | null)[]; // 28-day rolling average
+    acwr: (number | null)[]; // ACWR based on this metric
+}

src/utils/acwr.ts

@@ -0,0 +1,95 @@
+import type { Activity } from '@/types';
+
+// This file is deprecated - functionality moved to metricAcwr.ts
+// Kept for reference only
+
+interface ACWRData {
+    dates: string[];
+    acwr: (number | null)[];
+    acuteLoad: (number | null)[];
+    chronicLoad: (number | null)[];
+}
+
+/**
+ * Calculate Acute-Chronic Workload Ratio (ACWR)
+ * Acute load: 7-day rolling average
+ * Chronic load: 28-day rolling average
+ * ACWR = Acute / Chronic
+ * Optimal range: 0.8 - 1.3
+ */
+export function calculateACWR(activities: Activity[], dateRange?: { start: Date; end: Date }): ACWRData {
+    if (activities.length === 0 && !dateRange) {
+        return { dates: [], acwr: [], acuteLoad: [], chronicLoad: [] };
+    }
+
+    const dates: string[] = [];
+    const acwr: (number | null)[] = [];
+    const acuteLoad: (number | null)[] = [];
+    const chronicLoad: (number | null)[] = [];
+
+    // Create a map of date to total load (using TSS, or distance as fallback)
+    const dailyLoad = new Map<string, number>();
+
+    activities.forEach(activity => {
+        const dateKey = activity.date.toISOString().split('T')[0];
+        const load = activity.trainingStressScore || activity.distance || 0;
+
+        if (!dailyLoad.has(dateKey)) {
+            dailyLoad.set(dateKey, 0);
+        }
+        dailyLoad.set(dateKey, dailyLoad.get(dateKey)! + load);
+    });
+
+    // Get all dates in range
+    const startDate = dateRange?.start || (activities.length > 0 ? activities[0].date : new Date());
+    const endDate = dateRange?.end || (activities.length > 0 ? activities[activities.length - 1].date : new Date());
+    const allDates: Date[] = [];
+
+    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+        allDates.push(new Date(d));
+    }
+
+    // Calculate ACWR for each date
+    allDates.forEach((date, index) => {
+        const dateKey = date.toISOString().split('T')[0];
+        dates.push(dateKey);
+
+        // Need at least 28 days of data for chronic load
+        if (index < 27) {
+            acuteLoad.push(null);
+            chronicLoad.push(null);
+            acwr.push(null);
+            return;
+        }
+
+        // Calculate acute load (7-day average)
+        let acuteSum = 0;
+        for (let i = 0; i < 7; i++) {
+            const d = allDates[index - i];
+            const key = d.toISOString().split('T')[0];
+            acuteSum += dailyLoad.get(key) || 0;
+        }
+        const acuteAvg = acuteSum / 7;
+
+        // Calculate chronic load (28-day average)
+        let chronicSum = 0;
+        for (let i = 0; i < 28; i++) {
+            const d = allDates[index - i];
+            const key = d.toISOString().split('T')[0];
+            chronicSum += dailyLoad.get(key) || 0;
+        }
+        const chronicAvg = chronicSum / 28;
+
+        acuteLoad.push(acuteAvg);
+        chronicLoad.push(chronicAvg);
+
+        // Calculate ACWR
+        if (chronicAvg > 0) {
+            acwr.push(acuteAvg / chronicAvg);
+        } else {
+            acwr.push(null);
+        }
+    });
+
+    return { dates, acwr, acuteLoad, chronicLoad };
+}

src/utils/csvParser.ts

@@ -0,0 +1,115 @@
+import Papa from 'papaparse';
+import type { Activity } from '@/types';
+import { calculateTSS } from './tssCalculator';
+
+export function parseCSV(file: File, userFTP: number = 343): Promise<Activity[]> {
+    return new Promise((resolve, reject) => {
+        Papa.parse(file, {
+            header: true,
+            skipEmptyLines: true,
+            complete: (results) => {
+                try {
+                    const activities = results.data.map((row: any) => {
+                        // Parse date - Garmin format: "2025-12-02 09:19:49"
+                        const dateStr = row['Date'] || row['Activity Date'] || row['date'];
+                        if (!dateStr || dateStr === '--') {
+                            return null;
+                        }
+                        const date = new Date(dateStr);
+                        if (isNaN(date.getTime())) {
+                            return null;
+                        }
+
+                        // Parse distance - Garmin format: "8.34" (in km)
+                        let distance: number | undefined;
+                        const distanceStr = row['Distance'] || row['distance'];
+                        if (distanceStr && distanceStr !== '--' && distanceStr !== '0.00') {
+                            const parsed = parseFloat(distanceStr.replace(/,/g, ''));
+                            if (!isNaN(parsed) && parsed > 0) {
+                                distance = parsed;
+                            }
+                        }
+
+                        // Parse duration - Garmin format: "00:48:51" (HH:MM:SS)
+                        let duration: number | undefined;
+                        let durationSeconds: number | undefined;
+                        const durationStr = row['Time'] || row['Duration'] || row['Moving Time'] || row['Elapsed Time'];
+                        if (durationStr && durationStr !== '--') {
+                            if (durationStr.includes(':')) {
+                                const parts = durationStr.split(':');
+                                const hours = parseInt(parts[0]) || 0;
+                                const minutes = parseInt(parts[1]) || 0;
+                                const seconds = parseFloat(parts[2]) || 0;
+                                duration = hours * 60 + minutes + seconds / 60;
+                                durationSeconds = hours * 3600 + minutes * 60 + seconds;
+                            } else {
+                                const parsed = parseFloat(durationStr);
+                                if (!isNaN(parsed)) {
+                                    duration = parsed;
+                                    durationSeconds = parsed * 60; // Assume minutes if no colon
+                                }
+                            }
+                        }
+
+                        // Parse TSS - Try to calculate from power data first
+                        let trainingStressScore: number | undefined;
+
+                        // First, check if TSS is already provided in CSV
+                        const tssStr = row['Training Stress Score®'] || row['Training Stress Score'] || row['TSS'];
+                        if (tssStr && tssStr !== '--' && tssStr !== '0.0' && tssStr !== '0') {
+                            const parsed = parseFloat(tssStr);
+                            if (!isNaN(parsed) && parsed > 0) {
+                                trainingStressScore = parsed;
+                            }
+                        }
+
+                        // If no TSS provided, try to calculate from power data
+                        if (!trainingStressScore && durationSeconds) {
+                            // Parse Normalized Power (NP)
+                            const npStr = row['Normalized Power (NP)'] || row['Normalized Power'] || row['NP'];
+                            const normalizedPower = npStr && npStr !== '--' ? parseFloat(npStr) : undefined;
+
+                            // Use FTP from CSV if available, otherwise use user-provided FTP
+                            const ftpStr = row['FTP'] || row['Functional Threshold Power'];
+                            const ftp = ftpStr && ftpStr !== '--' ? parseFloat(ftpStr) : userFTP;
+
+                            if (normalizedPower && ftp) {
+                                const calculatedTSS = calculateTSS({
+                                    durationSeconds,
+                                    normalizedPower,
+                                    ftp,
+                                });
+                                if (calculatedTSS !== undefined) {
+                                    trainingStressScore = calculatedTSS;
+                                }
+                            }
+                        }
+
+                        // Get activity type
+                        const activityType = row['Activity Type'] || row['Type'] || row['Sport'];
+
+                        const activity: Activity = {
+                            date,
+                            activityType,
+                            distance,
+                            duration,
+                            trainingStressScore,
+                        };
+
+                        return activity;
+                    }).filter((activity): activity is Activity => activity !== null);
+
+                    // Sort by date
+                    activities.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+                    resolve(activities);
+                } catch (error) {
+                    reject(new Error('Failed to parse CSV data'));
+                }
+            },
+            error: (error) => {
+                reject(new Error(`CSV parsing error: ${error.message}`));
+            },
+        });
+    });
+}

src/utils/dataProcessor.ts

@@ -0,0 +1,95 @@
+import type { Activity, ProcessedData } from '@/types';
+
+/**
+ * Format date to YYYY-MM-DD in local timezone (not UTC)
+ */
+function formatDateLocal(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+export function processActivities(activities: Activity[], dateRange?: { start: Date; end: Date }): ProcessedData {
+    if (activities.length === 0 && !dateRange) {
+        return {
+            activities: [],
+            dates: [],
+            distances: [],
+            durations: [],
+            tss: [],
+        };
+    }
+
+    // Sort activities by date
+    const sortedActivities = [...activities].sort((a, b) => a.date.getTime() - b.date.getTime());
+
+    // Get date range
+    const startDate = dateRange?.start || (sortedActivities.length > 0 ? new Date(sortedActivities[0].date) : new Date());
+    const endDate = dateRange?.end || (sortedActivities.length > 0 ? new Date(sortedActivities[sortedActivities.length - 1].date) : new Date());
+
+    // Create a map of date -> activities
+    const activityMap = new Map<string, Activity[]>();
+    sortedActivities.forEach(activity => {
+        const dateStr = formatDateLocal(activity.date);
+        if (!activityMap.has(dateStr)) {
+            activityMap.set(dateStr, []);
+        }
+        activityMap.get(dateStr)!.push(activity);
+    });
+
+    // Generate all dates in range
+    const dates: string[] = [];
+    const distances: (number | null)[] = [];
+    const durations: (number | null)[] = [];
+    const tss: (number | null)[] = [];
+
+    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+        const dateStr = formatDateLocal(d);
+        dates.push(dateStr);
+
+        const dayActivities = activityMap.get(dateStr) || [];
+
+        if (dayActivities.length === 0) {
+            // No activity this day
+            distances.push(null);
+            durations.push(null);
+            tss.push(null);
+        } else {
+            // Sum up activities for the day
+            let totalDistance = 0;
+            let totalDuration = 0;
+            let totalTss = 0;
+            let hasDistance = false;
+            let hasDuration = false;
+            let hasTss = false;
+
+            dayActivities.forEach(activity => {
+                if (activity.distance !== undefined) {
+                    totalDistance += activity.distance;
+                    hasDistance = true;
+                }
+                if (activity.duration !== undefined) {
+                    totalDuration += activity.duration;
+                    hasDuration = true;
+                }
+                if (activity.trainingStressScore !== undefined) {
+                    totalTss += activity.trainingStressScore;
+                    hasTss = true;
+                }
+            });
+
+            distances.push(hasDistance ? totalDistance : null);
+            durations.push(hasDuration ? totalDuration : null);
+            tss.push(hasTss ? totalTss : null);
+        }
+    }
+
+    return {
+        activities: sortedActivities,
+        dates,
+        distances,
+        durations,
+        tss,
+    };
+}

src/utils/metricAcwr.ts

@@ -0,0 +1,132 @@
+import type { Activity, MetricACWRData } from '@/types';
+
+/**
+ * Format date to YYYY-MM-DD in local timezone (not UTC)
+ */
+function formatDateLocal(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+/**
+ * Calculate ACWR for a specific metric (distance, duration, or TSS)
+ * @param activities - Array of activities
+ * @param metricExtractor - Function to extract the metric value from an activity
+ * @param dateRange - Optional date range to maintain consistency
+ */
+export function calculateMetricACWR(
+    activities: Activity[],
+    metricExtractor: (activity: Activity) => number | undefined,
+    dateRange?: { start: Date; end: Date }
+): MetricACWRData {
+    if (activities.length === 0 && !dateRange) {
+        return {
+            dates: [],
+            values: [],
+            average7d: [],
+            average28d: [],
+            acwr: [],
+        };
+    }
+
+    // Sort activities by date
+    const sortedActivities = [...activities].sort((a, b) => a.date.getTime() - b.date.getTime());
+
+    // Get date range
+    const startDate = dateRange?.start || (sortedActivities.length > 0 ? new Date(sortedActivities[0].date) : new Date());
+    const endDate = dateRange?.end || (sortedActivities.length > 0 ? new Date(sortedActivities[sortedActivities.length - 1].date) : new Date());
+
+    // Create a map of date -> daily sum
+    const dailyValues = new Map<string, number>();
+    sortedActivities.forEach(activity => {
+        const dateStr = formatDateLocal(activity.date);
+        const value = metricExtractor(activity);
+        if (value !== undefined) {
+            dailyValues.set(dateStr, (dailyValues.get(dateStr) || 0) + value);
+        }
+    });
+
+    const dates: string[] = [];
+    const values: (number | null)[] = [];
+    const average7d: (number | null)[] = [];
+    const average28d: (number | null)[] = [];
+    const acwr: (number | null)[] = [];
+
+    // Generate all dates in range
+    const allDates: Date[] = [];
+    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+        allDates.push(new Date(d));
+    }
+
+    // Calculate for each date
+    allDates.forEach((date, index) => {
+        const dateStr = formatDateLocal(date);
+        dates.push(dateStr);
+
+        // Get daily value
+        const dailyValue = dailyValues.get(dateStr) || null;
+        values.push(dailyValue);
+
+        // Calculate 7-day rolling average (acute load)
+        let acuteSum = 0;
+        let acuteCount = 0;
+        for (let i = Math.max(0, index - 6); i <= index; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr);
+            if (val !== undefined) {
+                acuteSum += val;
+                acuteCount++;
+            }
+        }
+        const acuteAvg = acuteCount > 0 ? acuteSum / 7 : null;
+        average7d.push(acuteAvg);
+
+        // Calculate 28-day rolling average
+        let chronicSum = 0;
+        let chronicCount = 0;
+        for (let i = Math.max(0, index - 27); i <= index; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr);
+            if (val !== undefined) {
+                chronicSum += val;
+                chronicCount++;
+            }
+        }
+        const chronicAvg = chronicCount > 0 ? chronicSum / 28 : null;
+        average28d.push(chronicAvg);
+
+        // Calculate ACWR (need at least 28 days of data)
+        if (index < 27) {
+            acwr.push(null);
+            return;
+        }
+
+        // For ACWR, use the full 28-day sum (not average)
+        let acwrChronicSum = 0;
+        for (let i = index - 27; i <= index; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr);
+            if (val !== undefined) {
+                acwrChronicSum += val;
+            }
+        }
+        const acwrChronicAvg = acwrChronicSum / 28;
+
+        // Calculate ACWR
+        if (acwrChronicAvg > 0 && acuteAvg !== null) {
+            acwr.push(acuteAvg / acwrChronicAvg);
+        } else {
+            acwr.push(null);
+        }
+    });
+
+    return {
+        dates,
+        values,
+        average7d,
+        average28d,
+        acwr,
+    };
+}

src/utils/tssCalculator.ts

@@ -0,0 +1,51 @@
+/**
+ * Training Stress Score (TSS) Calculator
+ * 
+ * TSS is a concept developed by Andrew Coggan to quantify the physiological
+ * load and fatigue of a given training session, taking into account both
+ * its duration and intensity.
+ * 
+ * Formula for running:
+ * TSS = (t × NP × IF) / (FTP × 3600) × 100
+ * 
+ * Where:
+ * - t: Duration of activity in seconds
+ * - NP (Normalized Power®): Power you could have maintained if effort was perfectly regular
+ * - IF (Intensity Factor): NP / FTP
+ * - FTP (Functional Threshold Power): Maximum power you can maintain for about 1 hour
+ * - 3600: Conversion of one hour to seconds
+ * 
+ * In practice:
+ * - TSS = 100: represents 1 hour at threshold intensity (FTP)
+ * - TSS < 100: easy or moderate training
+ * - TSS > 100: very long or very intense training
+ */
+
+export interface TSSInputs {
+    durationSeconds: number;
+    normalizedPower?: number; // NP in watts
+    ftp?: number; // Functional Threshold Power in watts
+}
+
+/**
+ * Calculate Training Stress Score (TSS)
+ * 
+ * @param inputs - Duration, Normalized Power, and FTP
+ * @returns TSS value or undefined if required data is missing
+ */
+export function calculateTSS(inputs: TSSInputs): number | undefined {
+    const { durationSeconds, normalizedPower, ftp } = inputs;
+
+    // Need all three values to calculate TSS
+    if (!normalizedPower || !ftp || ftp === 0) {
+        return undefined;
+    }
+
+    // IF (Intensity Factor) = NP / FTP
+    const intensityFactor = normalizedPower / ftp;
+
+    // TSS = (t × NP × IF) / (FTP × 3600) × 100
+    const tss = (durationSeconds * normalizedPower * intensityFactor) / (ftp * 3600) * 100;
+
+    return tss;
+}

tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        /* Paths */
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}

vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+    server: {
+        port: 3000,
+        open: true,
+    },
+});