Overview
ResponseVelocity tracks survey response accumulation over time, showing whether collection is on track to meet targets. Combines cumulative progress with daily response rates and automatic projection calculation.
Features
- Cumulative response area chart
- Target line with goal indicator
- Daily response rate overlay
- Automatic projection based on velocity
- On-track / behind schedule status
- Days remaining calculation
Examples
On Track
Progress tracking toward goal
Survey Response Velocity
Target: 500 responses by deadline
360 / 500
72% complete
12/20/2025
On Track
12/18/2025
6 days remaining
Average rate: 24.4 per day
Behind Schedule
Collection pace is too slow
Response Collection
Target: 500 responses
190 / 500
38% complete
12/20/2025
Behind Schedule
1/3/2026
22 days remaining
Average rate: 14.7 per day
Ahead of Schedule
Exceeding expected pace
Response Progress
Projected to complete early
444 / 500
89% complete
12/20/2025
On Track
12/14/2025
2 days remaining
Average rate: 31.3 per day
Daily Responses
Focus on daily collection rate
Daily Response Rate
360
0% complete
Minimal View
Just the cumulative progress
Total Responses
360
0% complete
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | VelocityDataPoint[] | required | Date, total, daily values |
target | number | - | Target response count |
targetDate | Date | - | Deadline for target |
projectedCompletion | Date | auto | Override projected date |
showProjection | boolean | true | Show projection line |
showTarget | boolean | true | Show target reference line |
showDaily | boolean | false | Show daily response bars |
showGrid | boolean | true | Show grid lines |
isLoading | boolean | false | Show loading skeleton |
Usage
import { ResponseVelocity } from '@/ui/components/charts';
// Basic response velocity
<ResponseVelocity
data={[
{ date: '2024-01-01', cumulative: 0, responses: 0 },
{ date: '2024-01-02', cumulative: 45, responses: 45 },
{ date: '2024-01-03', cumulative: 92, responses: 47 },
{ date: '2024-01-04', cumulative: 156, responses: 64 },
// ...
]}
target={500}
/>
// With target date and projection
<ResponseVelocity
data={responseData}
target={500}
targetDate={new Date('2024-02-15')}
projectedCompletion={new Date('2024-02-12')}
showProjection
showTarget
/>
// Daily responses only
<ResponseVelocity
data={responseData}
showDaily
showTarget={false}
/>