Daily Activity & Step Count Dashboard
Overall Activity Summary
Total Steps
0
Total Distance (Miles)
0
Total Calories Burned
0
Average Steps per Day
0
Steps by Activity Type
Calories Burned by Activity Type
Daily Steps Trend
Detailed Activity Records
| ID | Date | Activity Type | Steps | Distance (Miles) | Calories Burned | Duration (Mins) |
|---|
No data to display.
'; return; } // Sort data by value descending for general charts const sortedData = Object.entries(data).sort(([, valA], [, valB]) => valB - valA); // Determine the maximum value for scaling bars const maxValue = Math.max(...Object.values(data), 1); // Avoid division by zero if all values are 0 sortedData.forEach(([label, value]) => { const barWidth = (value / maxValue) * 100; // Scale based on max value for visual representation const percentageOfTotal = totalValue > 0 ? ((value / totalValue) * 100).toFixed(1) : 0; let displayValue; if (valueType === 'steps') { displayValue = `${value.toLocaleString('en-US')} Steps`; } else if (valueType === 'calories') { displayValue = `${value.toLocaleString('en-US')} Cals`; } else if (valueType === 'distance') { displayValue = `${value.toFixed(1)} Miles`; } else { // 'count' displayValue = `${value}`; } const barWrapper = document.createElement('div'); barWrapper.classList.add('chart-bar-wrapper'); barWrapper.innerHTML = ` ${label}: `; targetElement.appendChild(barWrapper); }); } /** * Calculates and renders all distribution charts. */ function renderDistributionCharts() { // Steps by Activity Type const stepsByActivityType = activityRecords.reduce((acc, record) => { acc[record.activityType] = (acc[record.activityType] || 0) + record.steps; return acc; }, {}); renderBarChart(stepsByActivityTypeChartElem, stepsByActivityType, 'steps'); // Calories Burned by Activity Type const caloriesByActivityType = activityRecords.reduce((acc, record) => { acc[record.activityType] = (acc[record.activityType] || 0) + record.caloriesBurned; return acc; }, {}); renderBarChart(caloriesByActivityTypeChartElem, caloriesByActivityType, 'calories'); // Daily Steps Trend (using dates as labels) const dailySteps = {}; activityRecords.forEach(record => { dailySteps[record.activityDate] = (dailySteps[record.activityDate] || 0) + record.steps; }); // Sort by date for trend const sortedDailySteps = Object.entries(dailySteps).sort(([dateA], [dateB]) => new Date(dateA) - new Date(dateB)); const dailyStepsChartData = Object.fromEntries(sortedDailySteps); // Convert back to object for renderBarChart renderBarChart(dailyStepsTrendChartElem, dailyStepsChartData, 'steps'); } /** * Generates a PDF of the dashboard content. * Excludes non-essential UI elements like buttons and input forms. */ function generatePdf() { // Create a temporary div to hold only the content for PDF const pdfContentWrapper = document.createElement('div'); pdfContentWrapper.classList.add('pdf-content-wrapper'); // Apply PDF-specific styles // Add title const title = document.createElement('h2'); title.textContent = 'Daily Activity & Step Count Report'; title.classList.add('text-2xl', 'font-bold', 'mb-4'); pdfContentWrapper.appendChild(title); // Add summary cards const summarySection = document.createElement('div'); summarySection.classList.add('grid', 'grid-cols-4', 'gap-4', 'mb-6'); summarySection.innerHTML = `Total Steps
${totalStepsElem.textContent}
Total Distance (Miles)
${totalDistanceElem.textContent}
Total Calories Burned
${totalCaloriesBurnedElem.textContent}
Average Steps per Day
${averageStepsPerDayElem.textContent}
Steps by Activity Type
Calories Burned by Activity Type
Daily Steps Trend
Detailed Activity Records
| ID | Date | Activity Type | Steps | Distance (Miles) | Calories Burned | Duration (Mins) |
|---|