`;
container.insertAdjacentHTML('beforeend', card);
});
}
function renderChart(selectedProducts) {
const ctx = document.getElementById('trend-chart').getContext('2d');
const datasets = selectedProducts.map((p, index) => ({
label: p.name,
data: p.trendData,
borderColor: chartColors[index % chartColors.length],
backgroundColor: chartColors[index % chartColors.length] + '1A',
fill: false,
tension: 0.1
}));
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
if (trendChart) trendChart.destroy();
trendChart = new Chart(ctx, {
type: 'line',
data: { labels, datasets },
options: {
responsive: true,
plugins: { legend: { position: 'bottom' } },
scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Interest Score' } } }
}
});
}
function renderProductSelection() {
const container = document.getElementById('product-selection-container');
container.innerHTML = '';
products.forEach(p => {
container.insertAdjacentHTML('beforeend', `
`);
});
}
function renderProductList() {
const list = document.getElementById('product-list');
list.innerHTML = '';
products.forEach(p => {
list.insertAdjacentHTML('beforeend', `${p.name} ${Math.max(...p.trendData)}/100 ${status} `);
});
document.getElementById('pdf-chart-image').src = trendChart.toBase64Image();
const canvas = await html2canvas(pdfReportElement, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 0.85);
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Product-Trend-Analysis.pdf');
}
// --- INITIALIZATION ---
function init() {
products = [
{id: 1, name: 'Air Fryer', trendData: [60, 65, 70, 75, 80, 85, 90, 88, 92, 95, 100, 98]},
{id: 2, name: 'Fidget Spinner', trendData: [90, 98, 100, 70, 50, 30, 20, 15, 10, 8, 5, 4]},
{id: 3, name: 'Electric Scooter', trendData: [20, 25, 28, 35, 40, 45, 55, 60, 65, 70, 78, 85]},
{id: 4, name: 'Weighted Blanket', trendData: [50, 55, 60, 58, 55, 50, 48, 52, 60, 65, 70, 68]}
];
renderAll();
// Pre-select first two products for demo
document.getElementById('prod-check-1').checked = true;
document.getElementById('prod-check-3').checked = true;
analyzeTrends();
}
init();
});
${p.name}
`);
});
}
// --- FORMS & EVENT HANDLERS ---
document.getElementById('product-selection-container').addEventListener('change', analyzeTrends);
productForm.addEventListener('submit', (e) => {
e.preventDefault();
const trendDataRaw = document.getElementById('product-data').value.split(',').map(n => parseInt(n.trim())).filter(n => !isNaN(n));
if (trendDataRaw.length !== 12) {
alert('Please enter exactly 12 comma-separated numbers for the trend data.');
return;
}
const data = {
name: document.getElementById('product-name').value,
trendData: trendDataRaw
};
if (editingProductId) {
const product = products.find(p => p.id === editingProductId);
Object.assign(product, data);
} else {
data.id = Date.now();
products.push(data);
}
resetProductForm();
renderAll();
});
document.getElementById('cancel-edit-btn').addEventListener('click', resetProductForm);
document.getElementById('product-list').addEventListener('click', (e) => {
if (e.target.classList.contains('product-edit')) setupEditForm(parseInt(e.target.dataset.id));
if (e.target.classList.contains('product-delete')) deleteProduct(parseInt(e.target.dataset.id));
});
function resetProductForm() {
productForm.reset(); editingProductId = null;
document.getElementById('form-title').textContent = 'Add New Product';
document.getElementById('cancel-edit-btn').style.display = 'none';
}
function setupEditForm(id) {
const p = products.find(p => p.id === id); if (!p) return;
document.getElementById('product-id').value = p.id;
document.getElementById('product-name').value = p.name;
document.getElementById('product-data').value = p.trendData.join(', ');
editingProductId = id;
document.getElementById('form-title').textContent = 'Edit Product';
document.getElementById('cancel-edit-btn').style.display = 'inline-block';
}
function deleteProduct(id) {
if (confirm('Delete this product?')) {
products = products.filter(p => p.id !== id);
renderAll();
}
}
downloadPdfBtn.addEventListener('click', generatePdf);
// --- TABS & NAVIGATION ---
window.switchTab = (tabName) => { currentTab = tabName; Object.values(tabBtns).forEach(b=>b.classList.replace('tab-active', 'tab-inactive')); Object.values(tabContents).forEach(c=>c.style.display='none'); tabBtns[tabName].classList.replace('tab-inactive', 'tab-active'); tabContents[tabName].style.display = 'block'; };
window.navigateTabs = (dir) => { if (dir==='next' && currentTab==='analyzer') switchTab('config'); else if (dir==='prev' && currentTab==='config') switchTab('analyzer'); };
// --- PDF GENERATION ---
async function generatePdf() {
const { jsPDF } = window.jspdf;
const pdfReportElement = document.getElementById('pdf-report');
const selectedIds = Array.from(document.querySelectorAll('.product-checkbox:checked')).map(el => parseInt(el.value));
const selectedProducts = products.filter(p => selectedIds.includes(p.id));
document.getElementById('pdf-date').textContent = new Date().toLocaleDateString('en-US');
const pdfTableBody = document.getElementById('pdf-table-body');
pdfTableBody.innerHTML = '';
selectedProducts.forEach(p => {
const first = (p.trendData[0]+p.trendData[1]+p.trendData[2])/3; const last=(p.trendData[9]+p.trendData[10]+p.trendData[11])/3;
let status = 'Stable'; if (last > first*1.2) status = 'Rising'; if (last < first*0.8) status = 'Falling';
pdfTableBody.insertAdjacentHTML('beforeend', `