Overview
SurveyHealthCard displays key health metrics for a survey or resource at a glance. Combines completion rate, response counts, timing, and status into a compact, actionable card.
Features
- Progress ring with completion percentage
- Auto-calculated health status (healthy/warning/critical)
- Response count with total
- Average completion time
- Drop-off rate indicator
- Optional trend indicator
- Clickable with link support
Examples
Status States
Health status indicators
Healthy Survey
Healthy
82%
Responses
287 / 350
Completion
82%
Avg. Time
4m 32s
Warning Survey
Needs Attention
48%
Responses
168 / 350
Completion
48%
Avg. Time
6m 15s
Critical Survey
Critical
22%
Responses
77 / 350
Completion
22%
Avg. Time
8m 45s
Full Example
All metrics displayed
Minimal Example
Essential metrics only
Quick Survey
Healthy
92%
Responses
460 / 500
Completion
92%
Feedback Form
Healthy
78%
Responses
156 / 200
Completion
78%
Exit Survey
Critical
34%
Responses
68 / 200
Completion
34%
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Survey/resource title |
completionRate | number | required | Completion percentage (0-100) |
completedCount | number | required | Number of completed responses |
totalCount | number | required | Total expected responses |
averageTime | string | - | Average completion time |
dropOffRate | number | - | Drop-off percentage |
averageScore | number | - | Average score |
status | "healthy" | "warning" | "critical" | auto | Health status (auto from rate) |
trend | "up" | "down" | "stable" | - | Trend indicator |
href | string | - | Link to survey details |
Usage
import { SurveyHealthCard } from '@/ui/components/charts';
// Basic survey health card
<SurveyHealthCard
title="Product Feedback Survey"
completionRate={67}
completedCount={234}
totalCount={350}
/>
// With all metrics
<SurveyHealthCard
title="Beta Testing Survey"
completionRate={82}
completedCount={287}
totalCount={350}
averageTime="4m 32s"
dropOffRate={12}
averageScore={4.2}
status="healthy"
trend="up"
href="/surveys/beta-testing"
/>
// Different status states
<SurveyHealthCard
title="Critical Survey"
completionRate={25}
completedCount={88}
totalCount={350}
status="critical"
/>
// Auto-calculated status (based on completion rate)
<SurveyHealthCard
title="Auto Status"
completionRate={45} // Will show "warning" status
completedCount={158}
totalCount={350}
/>