`; todaysDistractionsListUL.appendChild(li); }); todaysDistractionsListUL.querySelectorAll('.edit-log-btn').forEach(btn => btn.addEventListener('click', (e) => openLogModal(e.target.dataset.id))); todaysDistractionsListUL.querySelectorAll('.delete-log-btn').forEach(btn => { btn.addEventListener('click', (e) => { if (confirm('Delete this log entry?')) { distractionLog = distractionLog.filter(log => log.id !== e.target.dataset.id); saveLog(); renderTodaysDistractions(); } }); }); } // --- Analysis & Report Logic --- reportDateRangeSelect.addEventListener('change', function() { customReportRangeGroup.style.display = this.value === 'custom' ? 'flex' : 'none'; if (this.value !== 'custom') generateAnalysisReportBtn.click(); // Auto-generate for predefined ranges }); function setDefaultReportDates() { const today = new Date(); const todayISO = new Date(today.getTime() - today.getTimezoneOffset() * 60000).toISOString().slice(0,10); reportEndDateInput.value = todayISO; const sevenDaysAgo = new Date(today); sevenDaysAgo.setDate(today.getDate() - 6); reportStartDateInput.value = new Date(sevenDaysAgo.getTime() - sevenDaysAgo.getTimezoneOffset() * 60000).toISOString().slice(0,10); } generateAnalysisReportBtn.addEventListener('click', () => { let startDate, endDate; const period = reportDateRangeSelect.value; const todayObj = new Date(todayStr + "T00:00:00"); switch(period) { case 'today': startDate = new Date(todayObj); endDate = new Date(todayObj); break; case 'yesterday': startDate = new Date(todayObj); startDate.setDate(todayObj.getDate() - 1); endDate = new Date(startDate); break; case 'last7days': endDate = new Date(todayObj); startDate = new Date(todayObj); startDate.setDate(todayObj.getDate() - 6); break; case 'last30days': endDate = new Date(todayObj); startDate = new Date(todayObj); startDate.setDate(todayObj.getDate() - 29); break; case 'custom': if (!reportStartDateInput.value || !reportEndDateInput.value) { alert('Select custom date range.'); return; } startDate = new Date(reportStartDateInput.value + "T00:00:00"); endDate = new Date(reportEndDateInput.value + "T00:00:00"); if (startDate > endDate) { alert('Start date cannot be after end date.'); return; } break; default: return; } endDate.setHours(23,59,59,999); // Inclusive end date reportPeriodDisplaySpan.textContent = `${formatDate(startDate.toISOString().slice(0,10))} - ${formatDate(endDate.toISOString().slice(0,10))}`; const filteredLogs = distractionLog.filter(log => { const logDate = new Date(log.timestamp); return logDate >= startDate && logDate <= endDate; }); reportTotalDistractionsSpan.textContent = filteredLogs.length; // By Category Chart const categoryCounts = {}; filteredLogs.forEach(log => { categoryCounts[log.categoryName] = (categoryCounts[log.categoryName] || 0) + 1; }); renderAnalysisChart(categoryDistractionChartDiv, categoryCounts, "Category"); // By Hour of Day Chart const hourCounts = Array(24).fill(0); // 0-23 hours filteredLogs.forEach(log => { const hour = new Date(log.timestamp).getHours(); hourCounts[hour]++; }); const hourDataForChart = {}; hourCounts.forEach((count, hr) => { if(count > 0) hourDataForChart[`${String(hr).padStart(2,'0')}:00`] = count; }); renderAnalysisChart(timeOfDayDistractionChartDiv, hourDataForChart, "Hour of Day"); // Detailed Log (last 100 for UI, all for PDF) reportDetailedLogUL.innerHTML = ''; const recentLogs = filteredLogs.sort((a,b) => new Date(b.timestamp) - new Date(a.timestamp)).slice(0,100); if(recentLogs.length === 0){ reportDetailedLogUL.innerHTML = '

No distractions logged in this period.

';} recentLogs.forEach(log => { const li = document.createElement('li'); li.className = 'list-item'; li.innerHTML = ` `; reportDetailedLogUL.appendChild(li); }); reportOutputDiv.style.display = 'block'; }); function renderAnalysisChart(chartElement, data, labelPrefix = "") { chartElement.innerHTML = ''; let maxValue = 0; Object.values(data).forEach(val => { if (val > maxValue) maxValue = val; }); if (maxValue === 0) { chartElement.innerHTML = `

No data for this period.

`; return;} const sortedKeys = Object.keys(data).sort((a,b) => { // Sort for consistent chart display if (labelPrefix === "Hour of Day") return parseInt(a.split(':')[0]) - parseInt(b.split(':')[0]); // Sort hours numerically return data[b] - data[a]; // Sort categories by count descending }); sortedKeys.forEach(key => { const value = data[key]; const barGroup = document.createElement('div'); barGroup.className = 'chart-bar-group'; const bar = document.createElement('div'); bar.className = 'chart-bar'; bar.style.height = `${(value / maxValue) * 100}%`; bar.style.backgroundColor = `hsl(${(Object.keys(data).indexOf(key) * 40) % 360}, 70%, 60%)`; // Cycle colors bar.textContent = value; bar.title = `${key}: ${value}`; const label = document.createElement('div'); label.className = 'chart-label'; label.textContent = key; barGroup.appendChild(bar); barGroup.appendChild(label); chartElement.appendChild(barGroup); }); } // --- PDF Download --- downloadDistractionReportPdfBtn.addEventListener('click', async () => { if (reportOutputDiv.style.display === 'none') { alert('Please generate a report first.'); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'pt', 'a4'); const margin = 40; let yPos = margin; const pageWidth = doc.internal.pageSize.getWidth(); doc.setFontSize(18); doc.setTextColor(varToRGB('--primary-color').r, varToRGB('--primary-color').g, varToRGB('--primary-color').b); doc.text('Distraction Analysis Report', pageWidth / 2, yPos, { align: 'center' }); yPos += 20; doc.setFontSize(11); doc.setTextColor(100); doc.text(`Period: ${reportPeriodDisplaySpan.textContent}`, pageWidth / 2, yPos, { align: 'center' }); yPos += 15; doc.text(`Generated: ${new Date().toLocaleString()}`, pageWidth / 2, yPos, { align: 'center' }); yPos += 25; doc.setFontSize(10); doc.text(`Total Distractions: ${reportTotalDistractionsSpan.textContent}`, margin, yPos); yPos += 20; async function addChartToPdf(chartContainerId, titleText, currentY) { const chartContainer = document.getElementById(chartContainerId); if (html2canvas && chartContainer && chartContainer.offsetHeight > 0) { if (currentY > doc.internal.pageSize.getHeight() - 180) { doc.addPage(); currentY = margin; } doc.setFontSize(12); doc.setTextColor(varToRGB('--primary-color').r, varToRGB('--primary-color').g, varToRGB('--primary-color').b); doc.text(titleText, margin, currentY); currentY += 15; try { const canvas = await html2canvas(chartContainer.querySelector('.chart'), { scale: 1.5, backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--light-bg').trim() }); const imgData = canvas.toDataURL('image/png'); const imgProps = doc.getImageProperties(imgData); const pdfImgWidth = pageWidth - 2 * margin; const pdfImgHeight = Math.min(150, (imgProps.height * pdfImgWidth) / imgProps.width); // Max height for chart doc.addImage(imgData, 'PNG', margin, currentY, pdfImgWidth, pdfImgHeight); currentY += pdfImgHeight + 10; } catch (e) { console.error("Chart to PDF error:", e); doc.setTextColor(255,0,0).text("Chart could not be rendered.", margin, currentY); currentY+=15; } } return currentY; } yPos = await addChartToPdf('categoryChartContainer', 'Distractions by Category', yPos); yPos = await addChartToPdf('timeOfDayChartContainer', 'Distractions by Hour of Day', yPos); if (yPos > doc.internal.pageSize.getHeight() - 80) { doc.addPage(); yPos = margin; } doc.setFontSize(12); doc.setTextColor(varToRGB('--primary-color').r, varToRGB('--primary-color').g, varToRGB('--primary-color').b); doc.text('Detailed Distraction Log (Filtered Period)', margin, yPos); yPos += 18; const detailedBody = []; // Re-filter for PDF to ensure it matches current view, not just UI slice let startDatePdf, endDatePdf; const periodPdf = reportDateRangeSelect.value; const todayObjPdf = new Date(todayStr + "T00:00:00"); switch(periodPdf) { /* Same logic as generateAnalysisReportBtn */ case 'today': startDatePdf = new Date(todayObjPdf); endDatePdf = new Date(todayObjPdf); break; case 'yesterday': startDatePdf = new Date(todayObjPdf); startDatePdf.setDate(todayObjPdf.getDate() - 1); endDatePdf = new Date(startDatePdf); break; case 'last7days': endDatePdf = new Date(todayObjPdf); startDatePdf = new Date(todayObjPdf); startDatePdf.setDate(todayObjPdf.getDate() - 6); break; case 'last30days': endDatePdf = new Date(todayObjPdf); startDatePdf = new Date(todayObjPdf); startDatePdf.setDate(todayObjPdf.getDate() - 29); break; case 'custom': startDatePdf = new Date(reportStartDateInput.value + "T00:00:00"); endDatePdf = new Date(reportEndDateInput.value + "T00:00:00"); break; } if(endDatePdf) endDatePdf.setHours(23,59,59,999); const logsForPdf = distractionLog.filter(log => { const logDate = new Date(log.timestamp); return logDate >= startDatePdf && logDate <= endDatePdf; }).sort((a,b) => new Date(a.timestamp) - new Date(b.timestamp)); // Chronological for PDF table logsForPdf.forEach(log => { detailedBody.push([ formatDate(log.timestamp.slice(0,10)) + " " + formatTime(log.timestamp), log.categoryName, log.taskBeingWorkedOn || '', log.notes || '' ]); }); if (detailedBody.length > 0) { doc.autoTable({ startY: yPos, head: [['Timestamp', 'Category', 'Task Worked On', 'Notes']], body: detailedBody, theme: 'grid', headStyles: { fillColor: varToRGB('--primary-color', true), textColor: varToRGB('--light-text', true) }, styles:{fontSize:8, cellPadding:3}, columnStyles: { 0:{cellWidth:80}, 1:{cellWidth:80}, 2:{cellWidth:100}, 3:{cellWidth:'auto'} } }); } else { doc.text("No detailed logs for this period.", margin, yPos); } doc.save(`Distraction_Analysis_${reportPeriodDisplaySpan.textContent.replace(/\s-\s/g,'_to_')}.pdf`); }); function varToRGB(varName, asArray = false) { const colorHex = getComputedStyle(document.documentElement).getPropertyValue(varName).trim(); if (!colorHex.startsWith('#')) { return asArray ? [0,0,0] : {r:0,g:0,b:0}; } const r = parseInt(colorHex.slice(1, 3), 16); const g = parseInt(colorHex.slice(3, 5), 16); const b = parseInt(colorHex.slice(5, 7), 16); return asArray ? [r,g,b] : {r,g,b}; } // --- Initializations --- if (distractionCategories.length === 0) { // First time use distractionCategories = [...DEFAULT_CATEGORIES]; saveCategories(); } renderCategoriesList(); renderTodaysDistractions(); setDefaultReportDates(); // generateAnalysisReportBtn.click(); // Optionally generate report on load for default period })();