Customer Journey Flow Visualizer

Stage Configuration (JSON Input)

Edit the JSON above to customize your customer journey stages and counts. The `stages` array defines the names, and the `counts` array defines the number of customers at each stage. Ensure both arrays have the same number of elements.

Summary Metrics

Total Customers Entering Funnel:1,200

Overall Conversion Rate:12.5%

Largest Bottleneck Stage:Awareness → Interest

Stage-wise Performance:

Stage	Conversion Rate	Drop-off Count	Drop-off Rate
Awareness	N/A	N/A	N/A
Awareness → Interest	66.67%	400	33.33%
Interest → Consideration	62.50%	300	37.50%
Consideration → Purchase	40.00%	300	60.00%
Purchase → Retention	75.00%	50	25.00%

Customer Flow Visualization (Funnel Chart)

Hover over the segments to see exact customer counts.

Note on Optional Enhancements:

**CSV Upload:** For a full CSV upload feature, you would integrate a file input and a CSV parsing library (e.g., `papaparse`) to convert CSV data into the `stages` and `counts` format.
**Highlight Bottleneck:** The "Largest Bottleneck Stage" is already calculated and displayed in the metrics panel. Visually highlighting it directly on the funnel chart would require custom rendering logic within Recharts or a custom chart component.
**Export Diagram:** Exporting as PNG/PDF would typically involve using a library like `html2canvas` or `dom-to-image` to capture the chart as an image, and then `jspdf` for PDF generation.
**Chart Type Toggle:** To switch between Funnel and Sankey, you would conditionally render either the `FunnelChart` component or a `Sankey` component (which would likely require `D3.js` or a specialized Recharts extension, as Recharts doesn't have a built-in Sankey).