ui

index.html

@@ -20,16 +20,19 @@
                 </div>
                 <div class="ftp-input-container">
                     <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" />
+                    <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" />
+                    <input type="number" id="threshold-hr-input" value="190" 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" />
+                    <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" />

src/components/charts.ts

@@ -115,110 +115,110 @@ function showActivityDetails(dateStr: string, activities: Activity[]): void {
     const popover = document.getElementById('activity-popover');
     const dateTitle = document.getElementById('activity-date-title');
     const activityList = document.getElementById('activity-list');
-    
+
     if (!popover || !dateTitle || !activityList) return;
-    
+
     // Format date
     const date = new Date(dateStr);
-    const formattedDate = date.toLocaleDateString('en-US', { 
-        weekday: 'long', 
-        year: 'numeric', 
-        month: 'long', 
-        day: 'numeric' 
+    const formattedDate = date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
     });
-    
+
     dateTitle.textContent = formattedDate;
-    
+
     // Clear previous activities
     activityList.innerHTML = '';
-    
+
     // Add each activity
     activities.forEach(activity => {
         const activityItem = document.createElement('div');
         activityItem.className = 'activity-item';
-        
+
         const displayName = activity.title || activity.activityType || 'Activity';
         const emoji = getActivityEmoji(activity.activityType || 'Activity');
-        
+
         const header = document.createElement('div');
         header.className = 'activity-item-header';
         header.innerHTML = `<span>${emoji}</span><span>${displayName}</span>`;
-        
+
         const details = document.createElement('div');
         details.className = 'activity-item-details';
-        
+
         // Distance
         if (activity.distance !== undefined && activity.distance > 0) {
             const distanceDetail = document.createElement('div');
             distanceDetail.className = 'activity-detail';
             distanceDetail.innerHTML = `
-                <span class="activity-detail-label">Distance</span>
+                <span class="activity-detail-label">🗺️ Distance</span>
                 <span class="activity-detail-value">${activity.distance.toFixed(2)} km</span>
             `;
             details.appendChild(distanceDetail);
         }
-        
+
         // Duration
         if (activity.duration !== undefined && activity.duration > 0) {
             const durationDetail = document.createElement('div');
             durationDetail.className = 'activity-detail';
             const durationMin = Math.round(activity.duration);
             durationDetail.innerHTML = `
-                <span class="activity-detail-label">Duration</span>
+                <span class="activity-detail-label">⏱️ Duration</span>
                 <span class="activity-detail-value">${durationMin} min</span>
             `;
             details.appendChild(durationDetail);
         }
-        
+
         // TSS
         if (activity.trainingStressScore !== undefined && activity.trainingStressScore > 0) {
             const tssDetail = document.createElement('div');
             tssDetail.className = 'activity-detail';
             tssDetail.innerHTML = `
-                <span class="activity-detail-label">TSS</span>
+                <span class="activity-detail-label">🥵 TSS</span>
                 <span class="activity-detail-value">${activity.trainingStressScore.toFixed(0)}</span>
             `;
             details.appendChild(tssDetail);
         }
-        
+
         // Calories
         if (activity.calories !== undefined && activity.calories > 0) {
             const caloriesDetail = document.createElement('div');
             caloriesDetail.className = 'activity-detail';
             caloriesDetail.innerHTML = `
-                <span class="activity-detail-label">Calories</span>
+                <span class="activity-detail-label">🔋 Calories</span>
                 <span class="activity-detail-value">${activity.calories.toFixed(0)} kcal</span>
             `;
             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-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-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);
     });
-    
+
     // Show popover
     popover.classList.remove('hidden');
 }
@@ -227,21 +227,21 @@ function showActivityDetails(dateStr: string, activities: Activity[]): void {
 function setupActivityPopoverHandlers(): void {
     const popover = document.getElementById('activity-popover');
     const closeButton = document.getElementById('activity-close');
-    
+
     if (!popover || !closeButton) return;
-    
+
     // Close button click
     closeButton.addEventListener('click', () => {
         popover.classList.add('hidden');
     });
-    
+
     // Click outside to close
     popover.addEventListener('click', (e) => {
         if (e.target === popover) {
             popover.classList.add('hidden');
         }
     });
-    
+
     // Escape key to close
     document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape' && !popover.classList.contains('hidden')) {
@@ -383,12 +383,12 @@ function createDualAxisChart(
                 if (elements.length > 0) {
                     const element = elements[0];
                     const datasetIndex = element.datasetIndex;
-                    
+
                     // Only handle clicks on the scatter (daily values) dataset
                     if (datasetIndex === 0) {
                         const index = element.index;
                         const dateStr = data.dates[index];
-                        
+
                         // Get activities for this date
                         if (data.activitiesByDate) {
                             const activities = data.activitiesByDate.get(dateStr);
@@ -527,7 +527,7 @@ function updateTargetInfo(elementId: string, targetValue: number | null | undefi
 
     if (targetACWR !== undefined) {
         let html: string;
-        
+
         if (targetValue === null || targetValue === undefined) {
             html = `<strong>💡 Target for tomorrow:</strong> <span style="color: var(--secondary-color);">Target ACWR of ${targetACWR} cannot be reached in one day</span>`;
         } else if (targetValue === 0) {
@@ -536,13 +536,13 @@ function updateTargetInfo(elementId: string, targetValue: number | null | undefi
             const formattedValue = targetValue.toFixed(1);
             html = `<strong>💡 Target for tomorrow:</strong> <span class="target-value">${formattedValue} ${unit}</span> <span style="color: var(--secondary-color);">to reach ACWR of ${targetACWR}</span>`;
         }
-        
+
         // Add rest tomorrow information
         if (restTomorrowACWR !== null && restTomorrowACWR !== undefined) {
             const color = getACWRColor(restTomorrowACWR);
             html += `<br><strong>😴 Rest tomorrow:</strong> <span style="color: ${color};">ACWR ${restTomorrowACWR.toFixed(2)}</span>`;
         }
-        
+
         element.innerHTML = html;
         element.classList.add('visible');
     } else {

src/main.ts

@@ -113,7 +113,7 @@ function handleFilterChange(): void {
     const filteredActivities = selectedActivityTypes.size > 0
         ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
         : allActivities;
-    
+
     const targetAcwr = parseFloat(targetAcwrInput.value) || 1.3;
     renderCharts(filteredActivities, targetAcwr);
 }

src/style.css

@@ -197,7 +197,8 @@ header h1 {
     background-color: var(--card-bg);
     border-radius: 12px;
     padding: 2rem;
-    max-width: 800px;
+    width: 90%;
+    max-width: 1200px;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
@@ -219,7 +220,7 @@ header h1 {
 .activity-item {
     background-color: var(--bg-color);
     border-radius: 8px;
-    padding: 1rem;
+    padding: 1.25rem;
     border-left: 4px solid var(--primary-color);
 }
 
@@ -235,14 +236,15 @@ header h1 {
 
 .activity-item-details {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 0.5rem;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
     font-size: 0.875rem;
 }
 
 .activity-detail {
     display: flex;
     flex-direction: column;
+    gap: 0.25rem;
 }
 
 .activity-detail-label {
@@ -255,7 +257,7 @@ header h1 {
 .activity-detail-value {
     color: var(--text-color);
     font-weight: 600;
-    font-size: 1rem;
+    font-size: 1.125rem;
 }
 
 main {

src/utils/metricAcwr.ts

@@ -43,14 +43,14 @@ export function calculateMetricACWR(
     const dailyValues = new Map<string, number>();
     // Create a map of date -> activities
     const activitiesByDate = new Map<string, Activity[]>();
-    
+
     sortedActivities.forEach(activity => {
         const dateStr = formatDateLocal(activity.date);
         const value = metricExtractor(activity);
         if (value !== undefined) {
             dailyValues.set(dateStr, (dailyValues.get(dateStr) || 0) + value);
         }
-        
+
         // Group activities by date
         if (!activitiesByDate.has(dateStr)) {
             activitiesByDate.set(dateStr, []);