$${commodity.price.toFixed(2)}

`; this.dom.commoditiesGrid.appendChild(card); this.renderSparkline(key); } }, renderSparkline(key) { const commodity = this.commodities[key]; const ctx = document.getElementById(`chart-${key}`).getContext('2d'); const change = commodity.price - commodity.initial; const color = change >= 0 ? '#16a34a' : '#dc2626'; if (this.chartInstances[key]) { this.chartInstances[key].destroy(); } this.chartInstances[key] = new Chart(ctx, { type: 'line', data: { labels: Array(commodity.history.length).fill(''), datasets: [{ data: commodity.history, borderColor: color, borderWidth: 2, pointRadius: 0, tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { enabled: false } }, scales: { x: { display: false }, y: { display: false } } } }); }, generatePdf() { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ unit: 'pt', format: 'a4' }); pdf.setFontSize(18); pdf.text("Commodities Market Report", 40, 60); pdf.setFontSize(10); pdf.text(`As of: ${new Date().toLocaleString('en-US')}`, 40, 75); const tableData = Object.values(this.commodities).map(c => { const change = c.price - c.initial; const changePercent = (change / c.initial) * 100; return [ c.name, `$${c.price.toFixed(2)}`, `${change.toFixed(2)}`, `${changePercent.toFixed(2)}%` ]; }); pdf.autoTable({ startY: 100, head: [['Commodity', 'Current Price', 'Change ($)', 'Change (%)']], body: tableData, headStyles: { fillColor: [15, 23, 42] }, // Slate-900 didParseCell: function (data) { if (data.column.index > 1) { // Change columns const value = parseFloat(data.cell.raw); data.cell.styles.textColor = value >= 0 ? [22, 163, 74] : [220, 38, 38]; } } }); pdf.save('Commodities-Market-Report.pdf'); } }; app.init(); });