Overview
EngagementScoreGauge displays a composite engagement score as a ring gauge with optional contributing factors breakdown. Perfect for participant engagement dashboards where multiple metrics combine into an overall score.
Features
- Ring gauge with color-coded score levels
- Contributing factors with weighted breakdown
- Trend indicator vs previous period
- Custom thresholds for color transitions
- Three size options: sm, md, lg
Examples
Basic Gauge
Simple score display
72Good
With Factors
Showing contributing factors
85Excellent
Contributing Factors
Activity
92
Completion
78
Feedback
85
Referrals
82
With Trend
With trend indicator
Positive trend
85Excellent
+7vs last period
Negative trend
65Fair
+7vs last period
Size Variants
Different size options
Small
72Good
Medium (default)
72Good
Large
72Good
Score Levels
Color-coded score levels
Critical
25Low
Warning
45Fair
Good
65Fair
Excellent
90Excellent
With ChartCard
Wrapped in ChartCard
Overall Engagement
Based on 4 key factors
78Good
+4vs last period
Contributing Factors
Activity
85
Completion
72
Feedback
80
Referrals
75
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
score | number | required | Current engagement score (0-100) |
factors | EngagementFactor[] | - | Contributing factors with label, value, and weight |
showFactors | boolean | false | Show factor breakdown |
showTrend | boolean | false | Show trend indicator |
previousScore | number | - | Previous period score for trend calculation |
thresholds | { low: number; medium: number; high: number } | { low: 40, medium: 60, high: 80 } | Score thresholds for color levels |
size | 'sm' | 'md' | 'lg' | 'md' | Gauge size |
className | string | - | Additional CSS classes |
Usage
import { EngagementScoreGauge, ChartCard } from '@/ui/components/charts';
// Basic engagement gauge
<EngagementScoreGauge score={72} />
// With factors and trend
<EngagementScoreGauge
score={85}
factors={[
{ label: 'Activity', value: 92, weight: 0.3 },
{ label: 'Completion', value: 78, weight: 0.25 },
{ label: 'Feedback', value: 85, weight: 0.25 },
{ label: 'Referrals', value: 82, weight: 0.2 },
]}
showFactors
showTrend
previousScore={80}
/>
// With ChartCard wrapper
<ChartCard title="Overall Engagement">
<EngagementScoreGauge
score={72}
showFactors
size="lg"
/>
</ChartCard>