Customer Purchase Frequency Dashboard
Overall Purchase Metrics Summary
Total Customers
0
Total Purchases
0
Avg. Purchases per Customer
0
Repeat Customer Rate
0%
Customers by Purchase Count
Revenue by Customer Type
Revenue by Product/Service
Detailed Purchase Records
| ID | Customer Name | Order Date | Product/Service | Order Value ($) | Customer Purchases | Is Repeat Customer? |
|---|
No data to display.
'; return; } // Sort data by value descending for general charts, custom for specific types let sortedData = Object.entries(data); if (valueType === 'customerType') { const typeOrder = ['Repeat Customers', 'New Customers']; // Specific order for customer types sortedData.sort(([labelA], [labelB]) => typeOrder.indexOf(labelA) - typeOrder.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', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; } else if (valueType === 'customerType') { displayValue = `${value} Customers`; if (label === 'New Customers') barClass = 'customer-new'; else if (label === 'Repeat Customers') barClass = 'customer-repeat'; } else { // 'count' displayValue = `${value} Customers`; } 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 totalCustomers = new Set(purchaseRecords.map(record => record.customerId)).size; // Customers by Purchase Count const customerPurchaseCounts = {}; purchaseRecords.forEach(record => { customerPurchaseCounts[record.customerId] = (customerPurchaseCounts[record.customerId] || 0) + 1; }); const purchaseCountDistribution = { '1 Purchase': 0, '2 Purchases': 0, '3-5 Purchases': 0, '6+ Purchases': 0 }; for (const custId in customerPurchaseCounts) { const count = customerPurchaseCounts[custId]; if (count === 1) { purchaseCountDistribution['1 Purchase']++; } else if (count === 2) { purchaseCountDistribution['2 Purchases']++; } else if (count >= 3 && count <= 5) { purchaseCountDistribution['3-5 Purchases']++; } else if (count >= 6) { purchaseCountDistribution['6+ Purchases']++; } } renderBarChart(customersByPurchaseCountChartElem, purchaseCountDistribution, 'count'); // Revenue by Customer Type (New vs. Repeat) const revenueByCustomerType = { 'New Customers': 0, 'Repeat Customers': 0 }; const customerPurchaseDetails = {}; // To store all purchases for each customer purchaseRecords.forEach(record => { if (!customerPurchaseDetails[record.customerId]) { customerPurchaseDetails[record.customerId] = { count: 0, totalRevenue: 0 }; } customerPurchaseDetails[record.customerId].count++; customerPurchaseDetails[record.customerId].totalRevenue += record.orderValue; }); for (const custId in customerPurchaseDetails) { if (customerPurchaseDetails[custId].count === 1) { revenueByCustomerType['New Customers'] += customerPurchaseDetails[custId].totalRevenue; } else { revenueByCustomerType['Repeat Customers'] += customerPurchaseDetails[custId].totalRevenue; } } renderBarChart(revenueByCustomerTypeChartElem, revenueByCustomerType, 'currency'); // Revenue by Product/Service const revenueByProduct = purchaseRecords.reduce((acc, record) => { acc[record.productService] = (acc[record.productService] || 0) + record.orderValue; return acc; }, {}); renderBarChart(revenueByProductChartElem, revenueByProduct, 'currency'); } /** * 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 Purchase Frequency 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 Customers
${totalCustomersCountElem.textContent}
Total Purchases
${totalPurchasesCountElem.textContent}
Avg. Purchases per Customer
${avgPurchasesPerCustomerElem.textContent}
Repeat Customer Rate
${repeatCustomerRateElem.textContent}
Customers by Purchase Count
Revenue by Customer Type
Revenue by Product/Service
Detailed Purchase Records
| ID | Customer Name | Order Date | Product/Service | Order Value ($) | Customer Purchases | Is Repeat Customer? |
|---|