`; } const renderChart = (id, type, data, options) => { const ctx = document.getElementById(id)?.getContext('2d'); if(!ctx) return; if(charts[id]) charts[id].destroy(); charts[id] = new Chart(ctx, { type, data, options }); }; function renderCharts(resolved) { // Trend Chart const dailyData = resolved.reduce((acc, t) => { const dateStr = t.reported_date.toISOString().split('T')[0]; if(!acc[dateStr]) acc[dateStr] = { total: 0, fdr: 0 }; acc[dateStr].total++; if(t.isFDR) acc[dateStr].fdr++; return acc; }, {}); const sortedDates = Object.keys(dailyData).sort(); renderChart('fdr-trend-chart', 'line', { labels: sortedDates, datasets: [{ label: 'FDR Rate (%)', data: sortedDates.map(d => (dailyData[d].fdr/dailyData[d].total)*100), borderColor: '#16a34a', tension: 0.1 }] }, { responsive: true, maintainAspectRatio: false, scales: { x:{type:'time', time:{unit:'day'}}, y:{min:0, max:100} } }); // By Type Chart const types = [...new Set(resolved.map(t => t.ticket_type))]; const byTypeData = types.map(type => { const typeTickets = resolved.filter(t => t.ticket_type === type); const fdrCount = typeTickets.filter(t => t.isFDR).length; return (fdrCount / typeTickets.length) * 100; }); renderChart('fdr-type-chart', 'bar', { labels: types, datasets: [{ label: 'FDR Rate (%)', data: byTypeData, backgroundColor: 'rgba(59, 130, 246, 0.7)' }] }, { responsive: true, maintainAspectRatio: false, indexAxis: 'y', plugins: { legend: { display: false } }, scales: {x: {min: 0, max: 100}} }); } function renderAgentTable(resolved) { const agents = [...new Set(resolved.map(t => t.agent_name))]; const tableData = agents.map(agent => { const agentTickets = resolved.filter(t => t.agent_name === agent); const fdrCount = agentTickets.filter(t => t.isFDR).length; return { name: agent, resolvedCount: agentTickets.length, fdrRate: (fdrCount / agentTickets.length) * 100, avgResTime: agentTickets.reduce((s,t) => s+t.resolutionHours, 0) / agentTickets.length }; }).sort((a,b) => b.fdrRate - a.fdrRate); elements.agentTbody.innerHTML = tableData.map(row => ` ${row.name} ${row.resolvedCount} ${row.fdrRate.toFixed(1)}% ${row.avgResTime.toFixed(1)} `).join(''); } window.fdrDownloadPDF = () => { html2canvas(document.getElementById('fdr-pdf-content'), { scale: 2 }).then(canvas => { const pdf = new jspdf.jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' }); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 40, 40, pdf.internal.pageSize.getWidth() - 80, 0); pdf.save('FDR_Performance_Dashboard.pdf'); }); }; loadSampleData(); });