dev with hot reload , TSS fallback computation from HR , UI

Dockerfile.dev

@@ -0,0 +1,17 @@
+# Development Dockerfile with hot reload
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Expose Vite dev server port
+EXPOSE 5173
+
+# Start Vite dev server
+# Source files will be mounted via docker-compose volumes
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

README.md

@@ -62,6 +62,8 @@ 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
@@ -75,9 +77,20 @@ 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
+# Rebuild after code changes (production)
 docker compose up -d --build
 
 # Stop and remove containers

docker-compose.dev.yml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  training-load-app:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./src:/app/src
+      - ./index.html:/app/index.html
+      - ./vite.config.ts:/app/vite.config.ts
+      - ./tsconfig.json:/app/tsconfig.json
+    environment:
+      - NODE_ENV=development
+    command: npm run dev -- --host 0.0.0.0

index.html

@@ -22,6 +22,16 @@
                     <label for="target-acwr-input">Target ACWR</label>
                     <input type="number" id="target-acwr-input" value="1.3" min="0.5" max="3" step="0.1" placeholder="1.3" />
                 </div>
+                <div class="ftp-input-container">
+                    <label for="threshold-hr-input">Threshold HR</label>
+                    <input type="number" id="threshold-hr-input" value="170" min="100" max="220" step="1" placeholder="170" />
+                    <span class="ftp-unit">bpm</span>
+                </div>
+                <div class="ftp-input-container">
+                    <label for="resting-hr-input">Resting HR</label>
+                    <input type="number" id="resting-hr-input" value="50" min="30" max="100" step="1" placeholder="50" />
+                    <span class="ftp-unit">bpm</span>
+                </div>
                 <input type="file" id="csv-upload" accept=".csv" />
                 <label for="csv-upload" class="upload-label">
                     📁 Upload CSV

src/components/charts.ts

@@ -192,6 +192,28 @@ function showActivityDetails(dateStr: string, activities: Activity[]): void {
             details.appendChild(caloriesDetail);
         }
         
+        // Average HR
+        if (activity.averageHR !== undefined && activity.averageHR > 0) {
+            const avgHRDetail = document.createElement('div');
+            avgHRDetail.className = 'activity-detail';
+            avgHRDetail.innerHTML = `
+                <span class="activity-detail-label">Avg HR</span>
+                <span class="activity-detail-value">${activity.averageHR.toFixed(0)} bpm</span>
+            `;
+            details.appendChild(avgHRDetail);
+        }
+        
+        // Max HR
+        if (activity.maxHR !== undefined && activity.maxHR > 0) {
+            const maxHRDetail = document.createElement('div');
+            maxHRDetail.className = 'activity-detail';
+            maxHRDetail.innerHTML = `
+                <span class="activity-detail-label">Max HR</span>
+                <span class="activity-detail-value">${activity.maxHR.toFixed(0)} bpm</span>
+            `;
+            details.appendChild(maxHRDetail);
+        }
+        
         activityItem.appendChild(header);
         activityItem.appendChild(details);
         activityList.appendChild(activityItem);

src/main.ts

@@ -14,6 +14,8 @@ import {
 const csvUpload = document.getElementById('csv-upload') as HTMLInputElement;
 const ftpInput = document.getElementById('ftp-input') as HTMLInputElement;
 const targetAcwrInput = document.getElementById('target-acwr-input') as HTMLInputElement;
+const thresholdHrInput = document.getElementById('threshold-hr-input') as HTMLInputElement;
+const restingHrInput = document.getElementById('resting-hr-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;
@@ -128,11 +130,13 @@ async function handleFileUpload(event: Event): Promise<void> {
     uploadStatus.className = '';
 
     try {
-        // Get FTP value from input
+        // Get FTP and HR values from inputs
         const ftp = parseInt(ftpInput.value) || 343;
+        const thresholdHR = parseInt(thresholdHrInput.value) || 170;
+        const restingHR = parseInt(restingHrInput.value) || 50;
 
-        // Parse CSV with user-provided FTP
-        allActivities = await parseCSV(file, ftp);
+        // Parse CSV with user-provided FTP and HR values
+        allActivities = await parseCSV(file, ftp, thresholdHR, restingHR);
 
         if (allActivities.length === 0) {
             throw new Error('No valid activities found in the CSV file');

src/style.css

@@ -197,7 +197,7 @@ header h1 {
     background-color: var(--card-bg);
     border-radius: 12px;
     padding: 2rem;
-    max-width: 600px;
+    max-width: 800px;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;

src/types/index.ts

@@ -6,6 +6,9 @@ export interface Activity {
     duration?: number; // in minutes
     trainingStressScore?: number;
     calories?: number;
+    averageHR?: number;
+    maxHR?: number;
+    totalAscent?: number; // in meters
 }
 
 export interface ProcessedData {

src/utils/csvParser.ts

@@ -3,7 +3,7 @@ import type { Activity } from '@/types';
 import { calculateTSS } from './tssCalculator';
 import { validateCSV } from './csvValidator';
 
-export function parseCSV(file: File, userFTP: number = 343): Promise<Activity[]> {
+export function parseCSV(file: File, userFTP: number = 343, thresholdHR: number = 170, restingHR: number = 50): Promise<Activity[]> {
     return new Promise((resolve, reject) => {
         Papa.parse(file, {
             header: true,
@@ -120,6 +120,46 @@ export function parseCSV(file: File, userFTP: number = 343): Promise<Activity[]>
                         // Get activity title
                         const title = row['Title'] || row['Activity Name'] || row['Name'];
 
+                        // Parse heart rate data
+                        let averageHR: number | undefined;
+                        const avgHRStr = row['Avg HR'] || row['Average HR'] || row['Average Heart Rate'];
+                        if (avgHRStr && avgHRStr !== '--') {
+                            const parsed = parseFloat(avgHRStr);
+                            if (!isNaN(parsed) && parsed > 0) {
+                                averageHR = parsed;
+                            }
+                        }
+
+                        let maxHR: number | undefined;
+                        const maxHRStr = row['Max HR'] || row['Maximum HR'] || row['Max Heart Rate'];
+                        if (maxHRStr && maxHRStr !== '--') {
+                            const parsed = parseFloat(maxHRStr);
+                            if (!isNaN(parsed) && parsed > 0) {
+                                maxHR = parsed;
+                            }
+                        }
+
+                        // Parse total ascent
+                        let totalAscent: number | undefined;
+                        const ascentStr = row['Total Ascent'] || row['Ascent'] || row['Elevation Gain'];
+                        if (ascentStr && ascentStr !== '--') {
+                            const parsed = parseFloat(ascentStr.replace(/,/g, ''));
+                            if (!isNaN(parsed) && parsed > 0) {
+                                totalAscent = parsed;
+                            }
+                        }
+
+                        // If no TSS calculated from power, try hrTSS from heart rate
+                        if (!trainingStressScore && durationSeconds && averageHR) {
+                            // hrTSS = duration_hours × HR_ratio² × 100
+                            // HR_ratio = (avg_HR - resting_HR) / (threshold_HR - resting_HR)
+                            if (thresholdHR > restingHR && averageHR > restingHR && averageHR < 220) {
+                                const hrRatio = (averageHR - restingHR) / (thresholdHR - restingHR);
+                                const durationHours = durationSeconds / 3600;
+                                trainingStressScore = durationHours * Math.pow(hrRatio, 2) * 100;
+                            }
+                        }
+
                         // Parse calories
                         const caloriesStr = row['Calories'];
                         let calories: number | undefined;
@@ -138,6 +178,9 @@ export function parseCSV(file: File, userFTP: number = 343): Promise<Activity[]>
                             duration,
                             trainingStressScore,
                             calories,
+                            averageHR,
+                            maxHR,
+                            totalAscent,
                         };
 
                         return activity;

vite.config.ts

@@ -9,6 +9,6 @@ export default defineConfig({
     },
     server: {
         port: 3000,
-        open: true,
+        open: false,
     },
 });