ParticipantJourney

User touchpoint timeline visualization

Overview

ParticipantJourney displays a chronological timeline of user touchpoints and activities. Perfect for visualizing a participant's engagement history across projects, milestones, submissions, and achievements.

Features

6 event types with distinct icons and colors
Optional connector lines between events
Group by project capability
Clickable events for drill-down
Chronological ordering with date display

Examples

Basic Journey

Simple timeline

Joined Beta Program

11 months ago

Completed Onboarding Survey

11 months ago

Submitted Bug Report #1423

10 months ago

Provided Feature Feedback

10 months ago

Earned "Bug Hunter" Badge

10 months ago

Completed Beta Testing Task

10 months ago

With Connectors

Connected timeline

Joined Beta Program

11 months ago

Completed Onboarding Survey

11 months ago

Submitted Bug Report #1423

10 months ago

Provided Feature Feedback

10 months ago

Earned "Bug Hunter" Badge

10 months ago

Completed Beta Testing Task

10 months ago

Grouped by Project

Events grouped by project

Mobile App Beta

Joined Beta Program

11 months ago

Completed Onboarding

11 months ago

Reported Bug #245

10 months ago

Desktop App Beta

Joined Desktop Beta

11 months ago

Feature Request

10 months ago

Clickable Events

Click to interact

Joined Beta Program

11 months ago

Completed Onboarding Survey

11 months ago

Submitted Bug Report #1423

10 months ago

Provided Feature Feedback

10 months ago

With ChartCard

Wrapped in ChartCard

Participant Journey

Recent activity timeline

Joined Beta Program

11 months ago

Completed Onboarding Survey

11 months ago

Submitted Bug Report #1423

10 months ago

Provided Feature Feedback

10 months ago

Earned "Bug Hunter" Badge

10 months ago

Completed Beta Testing Task

10 months ago

Props Reference

Prop	Type	Default	Description
`events`	`JourneyEvent[]`	`required`	Array of journey events to display
`showConnectors`	`boolean`	`false`	Show connecting lines between events
`groupByProject`	`boolean`	`false`	Group events by project
`onEventClick`	`(eventId: string) => void`	`-`	Click handler for events
`className`	`string`	`-`	Additional CSS classes

JourneyEvent Type

id: string - Unique identifier

title: string - Event title

date: Date - Event date

project?: string - Optional project name

metadata?: Record - Optional metadata

Usage

import { ParticipantJourney, ChartCard } from '@/ui/components/charts';

const events = [
  {
    id: '1',
    type: 'milestone',
    title: 'Joined Beta Program',
    date: new Date('2025-01-15'),
    project: 'Mobile App Beta',
  },
  {
    id: '2',
    type: 'submission',
    title: 'Submitted Bug Report',
    date: new Date('2025-01-18'),
    project: 'Mobile App Beta',
  },
  {
    id: '3',
    type: 'achievement',
    title: 'Earned Badge',
    date: new Date('2025-01-22'),
  },
];

// Basic journey
<ParticipantJourney events={events} />

// With connectors and click handler
<ParticipantJourney
  events={events}
  showConnectors
  onEventClick={(id) => console.log('Clicked:', id)}
/>

// Grouped by project
<ChartCard title="Participant Journey">
  <ParticipantJourney
    events={events}
    showConnectors
    groupByProject
  />
</ChartCard>

Prop

Type

Default

Description

events

JourneyEvent[]

required

Array of journey events to display

showConnectors

boolean

false

Show connecting lines between events

groupByProject

boolean

false

Group events by project

onEventClick

(eventId: string) => void

-

Click handler for events

className

string

-

Additional CSS classes

import { ParticipantJourney, ChartCard } from '@/ui/components/charts'; const events = [ { id: '1', type: 'milestone', title: 'Joined Beta Program', date: new Date('2025-01-15'), project: 'Mobile App Beta', }, { id: '2', type: 'submission', title: 'Submitted Bug Report', date: new Date('2025-01-18'), project: 'Mobile App Beta', }, { id: '3', type: 'achievement', title: 'Earned Badge', date: new Date('2025-01-22'), }, ]; // Basic journey <ParticipantJourney events={events} /> // With connectors and click handler <ParticipantJourney events={events} showConnectors onEventClick={(id) => console.log('Clicked:', id)} /> // Grouped by project <ChartCard title="Participant Journey"> <ParticipantJourney events={events} showConnectors groupByProject /> </ChartCard>