Customer Advocacy Dashboard
Overall Advocacy Summary
Total Advocates
0
Average NPS
0
Total Referrals ($)
$0
Total Testimonials
0
NPS Distribution
Advocacy Type Breakdown
Testimonial Sentiment
Detailed Advocacy Records
| ID | Customer Name | NPS Score | Advocacy Type | Date | Referral Value ($) | Sentiment | Notes |
|---|
No data to display.
'; return; } // Sort data by value descending for general charts, custom for NPS let sortedData = Object.entries(data); if (valueType === 'nps') { const npsOrder = ['Promoter', 'Passive', 'Detractor']; sortedData.sort(([labelA], [labelB]) => npsOrder.indexOf(labelA) - npsOrder.indexOf(labelB)); } else { sortedData.sort(([, valA], [, valB]) => valB - valA); } // Determine the maximum value for scaling bars const maxValue = Math.max(...Object.values(data), 1); // Avoid division by zero if all values are 0 sortedData.forEach(([label, value]) => { const barWidth = (value / maxValue) * 100; // Scale based on max value for visual representation const percentageOfTotal = totalValue > 0 ? ((value / totalValue) * 100).toFixed(1) : 0; let displayValue; let barClass = 'bg-blue-300'; // Default bar color if (valueType === 'currency') { displayValue = `$${value.toLocaleString('en-US')}`; } else if (valueType === 'nps') { displayValue = `${value} Customers`; if (label === 'Promoter') barClass = 'nps-promoter'; else if (label === 'Passive') barClass = 'nps-passive'; else if (label === 'Detractor') barClass = 'nps-detractor'; } else { // 'count' displayValue = `${value} Records`; } const barWrapper = document.createElement('div'); barWrapper.classList.add('chart-bar-wrapper'); barWrapper.innerHTML = ` ${label}: `; targetElement.appendChild(barWrapper); }); } /** * Calculates and renders all distribution charts. */ function renderDistributionCharts() { const totalRecords = customerAdvocacyRecords.length; // NPS Distribution const npsCategoryCounts = { 'Promoter': 0, 'Passive': 0, 'Detractor': 0 }; customerAdvocacyRecords.forEach(record => { const category = getNPSCategory(record.npsScore); npsCategoryCounts[category]++; }); renderBarChart(npsDistributionChartElem, npsCategoryCounts, 'nps'); // Advocacy Type Breakdown const advocacyTypeCounts = customerAdvocacyRecords.reduce((acc, record) => { acc[record.advocacyType] = (acc[record.advocacyType] || 0) + 1; return acc; }, {}); renderBarChart(advocacyTypeChartElem, advocacyTypeCounts, 'count'); // Testimonial Sentiment const testimonialSentimentCounts = customerAdvocacyRecords .filter(record => ['Testimonial', 'Review', 'Social Mention'].includes(record.advocacyType) && record.sentiment !== 'N/A') .reduce((acc, record) => { acc[record.sentiment] = (acc[record.sentiment] || 0) + 1; return acc; }, {}); renderBarChart(testimonialSentimentChartElem, testimonialSentimentCounts, 'count'); } /** * Generates a PDF of the dashboard content. * Excludes non-essential UI elements like buttons and input forms. */ function generatePdf() { // Create a temporary div to hold only the content for PDF const pdfContentWrapper = document.createElement('div'); pdfContentWrapper.classList.add('pdf-content-wrapper'); // Apply PDF-specific styles // Add title const title = document.createElement('h2'); title.textContent = 'Customer Advocacy Dashboard Report'; title.classList.add('text-2xl', 'font-bold', 'mb-4'); pdfContentWrapper.appendChild(title); // Add summary cards const summarySection = document.createElement('div'); summarySection.classList.add('grid', 'grid-cols-4', 'gap-4', 'mb-6'); summarySection.innerHTML = `Total Advocates
${totalAdvocatesCountElem.textContent}
Average NPS
${averageNPSElem.textContent}
Total Referrals ($)
${totalReferralValueElem.textContent}
Total Testimonials
${totalTestimonialsCountElem.textContent}
NPS Distribution
Advocacy Type Breakdown
Testimonial Sentiment
Detailed Advocacy Records
| ID | Customer Name | NPS Score | Advocacy Type | Date | Referral Value ($) | Sentiment | Notes |
|---|