${key}: ${value}

`; } widget.innerHTML = `

${data.topic}

${metricsHTML} `; dashboardGrid.appendChild(widget); // Render chart const ctx = document.getElementById(`chart-${data.id}`).getContext('2d'); chartInstances[data.id] = new Chart(ctx, { type: 'line', data: { labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'], datasets: [{ label: 'Weekly Progress Metric', data: data.chartData, backgroundColor: 'rgba(52, 152, 219, 0.2)', borderColor: 'rgba(52, 152, 219, 1)', borderWidth: 2, tension: 0.4 }] }, options: { scales: { y: { beginAtZero: true } } } }); }); }; const renderResources = (filter = '') => { const resourceList = $('#rh-resource-list'); if(!resourceList) return; const filteredResources = resources.filter(r => filter === '' || r.tags.some(tag => tag.toLowerCase().includes(filter.toLowerCase())) ); resourceList.innerHTML = ''; filteredResources.forEach(res => { const card = document.createElement('div'); card.className = 'rh-resource-card'; const tagsHTML = res.tags.map(tag => `${tag}`).join(' '); card.innerHTML = `

${res.title}

${tagsHTML}

`; resourceList.appendChild(card); }); }; const populateDataConfigForm = () => { if (!topicSelect) return; topicSelect.innerHTML = ''; researchData.forEach(data => { const option = document.createElement('option'); option.value = data.id; option.textContent = data.topic; topicSelect.appendChild(option); }); loadDynamicFieldsForTopic(topicSelect.value); }; const loadDynamicFieldsForTopic = (topicId) => { if (!dynamicFieldsContainer) return; const data = researchData.find(d => d.id == topicId); if (!data) return; dynamicFieldsContainer.innerHTML = ''; for (const [key, value] of Object.entries(data.metrics)) { const formGroup = document.createElement('div'); formGroup.className = 'dc-form-group'; formGroup.innerHTML = ` ${key} `; dynamicFieldsContainer.appendChild(formGroup); } const notesGroup = document.createElement('div'); notesGroup.className = 'dc-form-group'; notesGroup.innerHTML = ` Notes ${data.notes} `; dynamicFieldsContainer.appendChild(notesGroup); }; // --- EVENT HANDLERS --- // const switchTab = (tabId) => { activeTab = tabId; tabContents.forEach(content => content.classList.toggle('active', content.id === tabId)); tabButtons.forEach(button => button.classList.toggle('active', button.dataset.tab === tabId)); if (tabId === 'dashboard') renderDashboard(); if (tabId === 'research-hub') renderResources(); if (tabId === 'data-config') populateDataConfigForm(); }; tabButtons.forEach(button => { button.addEventListener('click', () => switchTab(button.dataset.tab)); }); // Data Config Form Logic topicSelect.addEventListener('change', (e) => loadDynamicFieldsForTopic(e.target.value)); $('#dc-edit-form').addEventListener('submit', (e) => { e.preventDefault(); const topicId = topicSelect.value; const data = researchData.find(d => d.id == topicId); if (data) { dynamicFieldsContainer.querySelectorAll('input[type="number"]').forEach(input => { const key = input.dataset.metricKey; data.metrics[key] = parseInt(input.value, 10); }); data.notes = $('#dc-notes').value; alert('Data saved successfully!'); } }); // Research Hub Form Logic $('#rh-add-resource-form').addEventListener('submit', (e) => { e.preventDefault(); const title = $('#rh-title').value; const url = $('#rh-url').value; const tags = $('#rh-tags').value.split(',').map(t => t.trim()).filter(Boolean); resources.push({ id: nextResourceId++, title, url, tags }); renderResources(); e.target.reset(); }); $('#rh-filter').addEventListener('input', (e) => renderResources(e.target.value)); // PDF Download $('#download-pdf-btn').addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(22); doc.text("Research Dashboard Summary", 105, 20, null, null, "center"); const tableData = []; researchData.forEach(data => { tableData.push([data.topic]); for(const [key, value] of Object.entries(data.metrics)) { tableData.push([` - ${key}`, value]); } tableData.push([` - Notes`, data.notes]); }); doc.autoTable({ startY: 30, head: [['Topic / Metric', 'Value']], body: tableData, theme: 'grid', headStyles: { fillColor: [44, 62, 80] }, // --primary-color didParseCell: function (data) { if (data.row.index % 4 === 0) { data.cell.styles.fontStyle = 'bold'; data.cell.styles.fillColor = '#ecf0f1'; } } }); doc.save('dashboard-summary.pdf'); }); // Navigation Buttons const tabOrder = ['dashboard', 'research-hub', 'data-config']; $('#next-btn').addEventListener('click', () => { const currentIndex = tabOrder.indexOf(activeTab); const nextIndex = (currentIndex + 1) % tabOrder.length; switchTab(tabOrder[nextIndex]); }); $('#prev-btn').addEventListener('click', () => { const currentIndex = tabOrder.indexOf(activeTab); const prevIndex = (currentIndex - 1 + tabOrder.length) % tabOrder.length; switchTab(tabOrder[prevIndex]); }); // --- INITIALIZATION --- // switchTab('dashboard'); });