local storage, grid line per monday

src/components/charts.ts

@@ -164,6 +164,48 @@ const acwrAxisColorPlugin = {
 // Register the axis color plugin
 Chart.register(acwrAxisColorPlugin);
 
+// Plugin to draw Monday vertical lines
+const mondayGridPlugin = {
+    id: 'mondayGrid',
+    beforeDatasetsDraw(chart: Chart) {
+        const ctx = chart.ctx;
+        const chartArea = chart.chartArea;
+        const xScale = chart.scales['x'];
+        
+        if (!xScale || !chartArea) return;
+        
+        ctx.save();
+        ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
+        ctx.lineWidth = 1;
+        
+        // Draw a line for each Monday in the data
+        const labels = chart.data.labels || [];
+        labels.forEach((label, index) => {
+            if (typeof label === 'string') {
+                const [year, month, day] = label.split('-').map(Number);
+                const date = new Date(year, month - 1, day);
+                const dayOfWeek = date.getDay();
+                
+                // If it's Monday, draw a vertical line
+                if (dayOfWeek === 1) {
+                    const x = xScale.getPixelForValue(index);
+                    if (x >= chartArea.left && x <= chartArea.right) {
+                        ctx.beginPath();
+                        ctx.moveTo(x, chartArea.top);
+                        ctx.lineTo(x, chartArea.bottom);
+                        ctx.stroke();
+                    }
+                }
+            }
+        });
+        
+        ctx.restore();
+    },
+};
+
+// Register the Monday grid plugin
+Chart.register(mondayGridPlugin);
+
 // Function to get activity emoji based on type
 function getActivityEmoji(activityType: string): string {
     const type = activityType.toLowerCase();
@@ -355,9 +397,7 @@ const commonOptions = {
     scales: {
         x: {
             grid: {
-                display: true,
-                color: 'rgba(148, 163, 184, 0.15)',
-                lineWidth: 1,
+                display: false, // Disable default grid, we draw Monday lines with plugin
                 drawBorder: false,
             },
             ticks: {

src/main.ts

@@ -29,10 +29,124 @@ const helpClose = document.getElementById('help-close') as HTMLButtonElement;
 let allActivities: Activity[] = [];
 let selectedActivityTypes: Set<string> = new Set(['Running']);
 
+// Local storage keys
+const STORAGE_KEYS = {
+    CSV_DATA: 'trainingload_csv_data',
+    FTP: 'trainingload_ftp',
+    THRESHOLD_HR: 'trainingload_threshold_hr',
+    RESTING_HR: 'trainingload_resting_hr',
+    TARGET_ACWR: 'trainingload_target_acwr',
+    PREDICT_TODAY: 'trainingload_predict_today',
+    SELECTED_FILTERS: 'trainingload_selected_filters',
+};
+
+// Load saved settings on startup
+function loadSavedSettings(): void {
+    // Load FTP
+    const savedFtp = localStorage.getItem(STORAGE_KEYS.FTP);
+    if (savedFtp && ftpInput) {
+        ftpInput.value = savedFtp;
+    }
+
+    // Load Threshold HR
+    const savedThresholdHr = localStorage.getItem(STORAGE_KEYS.THRESHOLD_HR);
+    if (savedThresholdHr && thresholdHrInput) {
+        thresholdHrInput.value = savedThresholdHr;
+    }
+
+    // Load Resting HR
+    const savedRestingHr = localStorage.getItem(STORAGE_KEYS.RESTING_HR);
+    if (savedRestingHr && restingHrInput) {
+        restingHrInput.value = savedRestingHr;
+    }
+
+    // Load Target ACWR
+    const savedTargetAcwr = localStorage.getItem(STORAGE_KEYS.TARGET_ACWR);
+    if (savedTargetAcwr && targetAcwrInput) {
+        targetAcwrInput.value = savedTargetAcwr;
+    }
+
+    // Load Predict Today
+    const savedPredictToday = localStorage.getItem(STORAGE_KEYS.PREDICT_TODAY);
+    if (savedPredictToday && predictTodayInput) {
+        predictTodayInput.checked = savedPredictToday === 'true';
+    }
+
+    // Load Selected Filters
+    const savedFilters = localStorage.getItem(STORAGE_KEYS.SELECTED_FILTERS);
+    if (savedFilters) {
+        try {
+            const filters = JSON.parse(savedFilters);
+            selectedActivityTypes = new Set(filters);
+        } catch (e) {
+            console.error('Failed to parse saved filters', e);
+        }
+    }
+}
+
+// Save settings to local storage
+function saveSettings(): void {
+    if (ftpInput) localStorage.setItem(STORAGE_KEYS.FTP, ftpInput.value);
+    if (thresholdHrInput) localStorage.setItem(STORAGE_KEYS.THRESHOLD_HR, thresholdHrInput.value);
+    if (restingHrInput) localStorage.setItem(STORAGE_KEYS.RESTING_HR, restingHrInput.value);
+    if (targetAcwrInput) localStorage.setItem(STORAGE_KEYS.TARGET_ACWR, targetAcwrInput.value);
+    if (predictTodayInput) localStorage.setItem(STORAGE_KEYS.PREDICT_TODAY, String(predictTodayInput.checked));
+    localStorage.setItem(STORAGE_KEYS.SELECTED_FILTERS, JSON.stringify(Array.from(selectedActivityTypes)));
+}
+
+// Load CSV from local storage
+async function loadSavedCSV(): Promise<void> {
+    const savedCSV = localStorage.getItem(STORAGE_KEYS.CSV_DATA);
+    if (!savedCSV) return;
+
+    uploadStatus.textContent = 'Loading saved data...';
+    uploadStatus.className = '';
+
+    try {
+        const ftp = parseInt(ftpInput.value) || 343;
+        const thresholdHR = parseInt(thresholdHrInput.value) || 170;
+        const restingHR = parseInt(restingHrInput.value) || 50;
+
+        // Create a Blob from the saved CSV string
+        const blob = new Blob([savedCSV], { type: 'text/csv' });
+        const file = new File([blob], 'saved_activities.csv', { type: 'text/csv' });
+
+        allActivities = await parseCSV(file, ftp, thresholdHR, restingHR);
+
+        if (allActivities.length === 0) {
+            throw new Error('No valid activities found in saved data');
+        }
+
+        createActivityTypeFilters(allActivities);
+
+        const filteredActivities = selectedActivityTypes.size > 0
+            ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
+            : allActivities;
+        const targetAcwr = parseFloat(targetAcwrInput.value) || 1.3;
+        const predictToday = predictTodayInput?.checked || false;
+        renderCharts(filteredActivities, targetAcwr, predictToday);
+
+        filterSection.classList.remove('hidden');
+        chartsSection.classList.remove('hidden');
+
+        uploadStatus.textContent = `Successfully loaded ${allActivities.length} activities from saved data`;
+        uploadStatus.className = 'success';
+    } catch (error) {
+        console.error('Error loading saved data:', error);
+        // Clear corrupted data
+        localStorage.removeItem(STORAGE_KEYS.CSV_DATA);
+        uploadStatus.textContent = '';
+        uploadStatus.className = '';
+    }
+}
+
 // Event listeners
 csvUpload?.addEventListener('change', handleFileUpload);
 targetAcwrInput?.addEventListener('input', handleTargetAcwrChange);
 predictTodayInput?.addEventListener('change', handlePredictTodayChange);
+ftpInput?.addEventListener('input', saveSettings);
+thresholdHrInput?.addEventListener('input', saveSettings);
+restingHrInput?.addEventListener('input', saveSettings);
 helpButton?.addEventListener('click', () => helpPopover?.classList.remove('hidden'));
 helpClose?.addEventListener('click', () => helpPopover?.classList.add('hidden'));
 helpPopover?.addEventListener('click', (e) => {
@@ -45,6 +159,9 @@ function handleTargetAcwrChange(): void {
     // Only refresh if we have activities loaded
     if (allActivities.length === 0) return;
 
+    // Save to local storage
+    saveSettings();
+
     // Filter and render with new target ACWR
     const filteredActivities = selectedActivityTypes.size > 0
         ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
@@ -59,6 +176,9 @@ function handlePredictTodayChange(): void {
     // Only refresh if we have activities loaded
     if (allActivities.length === 0) return;
 
+    // Save to local storage
+    saveSettings();
+
     // Filter and render with new predict today setting
     const filteredActivities = selectedActivityTypes.size > 0
         ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
@@ -140,6 +260,9 @@ function handleFilterChange(): void {
         }
     });
 
+    // Save to local storage
+    saveSettings();
+
     // Filter and render
     const filteredActivities = selectedActivityTypes.size > 0
         ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
@@ -167,6 +290,9 @@ async function handleFileUpload(event: Event): Promise<void> {
         const thresholdHR = parseInt(thresholdHrInput.value) || 170;
         const restingHR = parseInt(restingHrInput.value) || 50;
 
+        // Read file content to save it
+        const csvContent = await file.text();
+
         // Parse CSV with user-provided FTP and HR values
         allActivities = await parseCSV(file, ftp, thresholdHR, restingHR);
 
@@ -174,6 +300,10 @@ async function handleFileUpload(event: Event): Promise<void> {
             throw new Error('No valid activities found in the CSV file');
         }
 
+        // Save CSV content and settings to local storage
+        localStorage.setItem(STORAGE_KEYS.CSV_DATA, csvContent);
+        saveSettings();
+
         // Create dynamic activity type filters
         createActivityTypeFilters(allActivities);
 
@@ -208,14 +338,14 @@ function renderCharts(activities: Activity[], targetAcwr: number, predictToday:
         // Determine end date based on whether we'll include today in predictions
         const today = new Date();
         today.setHours(0, 0, 0, 0);
-        
+
         // Check if today has activities
         const todayHasActivities = activities.some(activity => {
             const activityDate = new Date(activity.date);
             activityDate.setHours(0, 0, 0, 0);
             return activityDate.getTime() === today.getTime();
         });
-        
+
         // If predictToday is checked and today has no activities, end range at yesterday
         // This prevents today from appearing twice (once as null, once as prediction)
         const endDate = new Date();
@@ -273,4 +403,6 @@ function renderCharts(activities: Activity[], targetAcwr: number, predictToday:
 }
 
 // Initialize
+loadSavedSettings();
+loadSavedCSV();
 console.log('Training Load Data Visualization initialized');