Customer Segmentation Dashboard

Customer Segmentation Dashboard

Key Segmentation Indicators

Customer Segments Overview

Segmentation Insights

No insights generated yet. Please configure your data.

Customer Segmentation Dashboard Report

Key Segmentation Indicators

Customer Segments Overview

Segmentation Insights

Total Customers: ${totalCustomers.toLocaleString()}

Number of Segments: ${numberOfSegments}

Overall Average Customer Value: ${formatValue(overallAvgValue, '$')}

High-Value Customers (%): ${percentHighValue.toFixed(2)}%

`; // Segments Overview for PDF pdfSegmentsOverview.innerHTML = `

Customer Segments Overview

`; if (customerSegments.length === 0) { pdfSegmentsOverview.innerHTML += '

No segments defined for the overview.

'; } else { customerSegments.forEach(segment => { pdfSegmentsOverview.innerHTML += `

${segment.name || 'Unnamed Segment'}

Customers Average Value Characteristics
${(segment.customers || 0).toLocaleString()} ${formatValue(segment.avgValue, '$')} ${segment.characteristics || 'N/A'}
`; }); } // Segmentation Insights for PDF pdfSegmentationInsights.innerHTML = `

Segmentation Insights

`; let insightsForPdf = ''; if (customerSegments.length === 0) { insightsForPdf = '

No insights generated. Please configure your data.

'; } else { const sortedByValue = [...customerSegments].sort((a, b) => (b.avgValue || 0) - (a.avgValue || 0)); const sortedByCustomers = [...customerSegments].sort((a, b) => (b.customers || 0) - (a.customers || 0)); const highestValueSegment = sortedByValue[0]; const largestSegment = sortedByCustomers[0]; insightsForPdf += `
`; if (highestValueSegment) { insightsForPdf += `

The ${highestValueSegment.name} segment has the highest average customer value of ${formatValue(highestValueSegment.avgValue, '$')}.

`; } if (largestSegment && (highestValueSegment ? largestSegment.id !== highestValueSegment.id : true)) { insightsForPdf += `

The ${largestSegment.name} segment is currently the largest with ${largestSegment.customers.toLocaleString()} customers.

`; } const lowValueSegments = customerSegments.filter(seg => seg.avgValue < 200); if (lowValueSegments.length > 0) { insightsForPdf += `

Opportunity for Growth: Segments with lower average values (e.g., ${lowValueSegments.map(s => s.name).join(', ')}) could benefit from upselling or engagement strategies.

`; } const smallHighValueSegments = customerSegments.filter(seg => seg.avgValue >= 500 && seg.customers < 10000); if (smallHighValueSegments.length > 0) { insightsForPdf += `

Targeted Expansion: Segments like ${smallHighValueSegments.map(s => s.name).join(', ')} show high value but are relatively small. Focused acquisition campaigns could yield significant returns.

`; } insightsForPdf += `
`; } pdfSegmentationInsights.innerHTML += insightsForPdf; // Show the hidden content temporarily for html2canvas to render it pdfContent.style.display = 'block'; showMessage('Generating PDF...', 'info'); try { const canvas = await html2canvas(pdfContent, { scale: 2, // Increase scale for better quality useCORS: true, // If you have external images, enable CORS logging: false // Disable console logging from html2canvas }); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' for portrait, 'mm' for millimeters, 'a4' size const imgWidth = 210; // A4 width in mm const pageHeight = 297; // A4 height in mm const imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; let position = 0; pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } pdf.save('Customer_Segmentation_Dashboard.pdf'); showMessage('PDF downloaded successfully!', 'success'); } catch (error) { console.error("Error generating PDF:", error); showMessage('Error generating PDF. Please try again.', 'error'); } finally { // Hide the content again after PDF generation pdfContent.style.display = 'none'; } }; } // --- Initial Load --- switchTab('dashboard'); // Start on the dashboard tab renderAllSegmentInputRows(); // Render initial data in config tab renderKpiMetrics(); // Render initial data in dashboard tab renderSegmentsOverview(); // Render initial segments overview generateSegmentationInsights(); // Generate initial insights });
Scroll to Top