`; pdfContentWrapper.appendChild(summarySection); // Add distribution charts const chartsSection = document.createElement('div'); chartsSection.classList.add('grid', 'grid-cols-2', 'gap-6', 'mb-6'); chartsSection.innerHTML = ` `; pdfContentWrapper.appendChild(chartsSection); // Populate PDF charts (re-use logic but target PDF elements) const stepsByActivityType = activityRecords.reduce((acc, record) => { acc[record.activityType] = (acc[record.activityType] || 0) + record.steps; return acc; }, {}); renderBarChart(chartsSection.querySelector('#pdfStepsByActivityTypeChart'), stepsByActivityType, 'steps'); const caloriesByActivityType = activityRecords.reduce((acc, record) => { acc[record.activityType] = (acc[record.activityType] || 0) + record.caloriesBurned; return acc; }, {}); renderBarChart(chartsSection.querySelector('#pdfCaloriesByActivityTypeChart'), caloriesByActivityType, 'calories'); const dailySteps = {}; activityRecords.forEach(record => { dailySteps[record.activityDate] = (dailySteps[record.activityDate] || 0) + record.steps; }); const sortedDailySteps = Object.entries(dailySteps).sort(([dateA], [dateB]) => new Date(dateA) - new Date(dateB)); const dailyStepsChartData = Object.fromEntries(sortedDailySteps); renderBarChart(chartsSection.querySelector('#pdfDailyStepsTrendChart'), dailyStepsChartData, 'steps'); // Add detailed activity list table const activityListSection = document.createElement('div'); activityListSection.innerHTML = `

Detailed Activity Records

${dashboardActivityTableBody.innerHTML}

ID	Date	Activity Type	Steps	Distance (Miles)	Calories Burned	Duration (Mins)

`; pdfContentWrapper.appendChild(activityListSection); // Options for html2pdf const options = { margin: 10, filename: 'Daily_Activity_Dashboard.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }, pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } }; // Generate PDF from the temporary content wrapper html2pdf().from(pdfContentWrapper).set(options).save(); // Clean up the temporary div (optional, as it's not appended to the DOM) pdfContentWrapper.remove(); } /** * Loads initial sample data for the dashboard. * Relevant to USA context. */ function loadSampleData() { activityRecords = [ { id: 'ACT001', activityDate: '2024-07-01', activityType: 'Walking', steps: 10500, distance: 5.2, caloriesBurned: 450, duration: 90 }, { id: 'ACT002', activityDate: '2024-07-01', activityType: 'Running', steps: 5000, distance: 2.5, caloriesBurned: 300, duration: 30 }, { id: 'ACT003', activityDate: '2024-07-02', activityType: 'Walking', steps: 8000, distance: 4.0, caloriesBurned: 350, duration: 75 }, { id: 'ACT004', activityDate: '2024-07-03', activityType: 'Cycling', steps: 0, distance: 10.0, caloriesBurned: 600, duration: 45 }, { id: 'ACT005', activityDate: '2024-07-04', activityType: 'Walking', steps: 12000, distance: 6.0, caloriesBurned: 550, duration: 110 }, { id: 'ACT006', activityDate: '2024-07-05', activityType: 'Running', steps: 7500, distance: 3.8, caloriesBurned: 400, duration: 40 }, { id: 'ACT007', activityDate: '2024-07-05', activityType: 'Walking', steps: 2000, distance: 1.0, caloriesBurned: 100, duration: 20 } ]; }