Overview
LifecycleStage displays a pipeline or funnel visualization showing progression through stages. Supports both horizontal and vertical orientations with optional counts and percentages. Perfect for participant journeys, project pipelines, or any staged workflow.
Features
- Horizontal and vertical orientations
- Stage counts and percentages
- Current stage highlighting
- Customizable stage colors
- Click handler for stage selection
- Connecting arrows between stages
Examples
Basic LifecycleStage
Participant journey stages
With Counts
Showing stage counts
With Counts and Percentages
Showing both counts and percentages
Current Stage Highlight
Highlighting the current stage
Vertical Orientation
Vertical layout option
Project Lifecycle
Project status distribution
With ChartCard
Wrapped in ChartCard
Participant Journey
Current distribution across stages
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
stages | LifecycleStageData[] | required | Array of stage objects |
currentStage | string | - | ID of the current/active stage |
showCounts | boolean | false | Show count numbers on stages |
showPercentages | boolean | false | Show percentage of first stage |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout orientation |
onStageClick | (stageId: string) => void | - | Click handler for stages |
className | string | - | Additional CSS classes |
Usage
import { LifecycleStage, ChartCard } from '@/ui/components/charts';
// Participant lifecycle stages
<ChartCard title="Participant Journey">
<LifecycleStage
stages={[
{ id: 'invited', label: 'Invited', count: 500, color: 'slate' },
{ id: 'registered', label: 'Registered', count: 380, color: 'blue' },
{ id: 'active', label: 'Active', count: 290, color: 'green' },
{ id: 'completed', label: 'Completed', count: 185, color: 'emerald' },
]}
currentStage="active"
showCounts
showPercentages
onStageClick={(stageId) => console.log(stageId)}
/>
</ChartCard>