Overview
The ImpactScoreDisplay component shows an insight's calculated impact score with visual indicators for severity level. It supports an optional collapsible breakdown that shows the individual scoring factors.
Key Features
Color-coded severity levels (critical, high, medium, low, minimal)
Icon indicators matching severity level
Collapsible detailed breakdown with progress bars
Size variants (sm, md, lg)
Tooltip with level name on hover
Shows weighted factor calculations in breakdown
Examples
Score Levels
Different scores display with appropriate colors and icons based on severity.
Critical (80+)
92/100
High (60-79)
72/100
Medium (40-59)
55/100
Low (20-39)
28/100
Minimal (0-19)
12/100
Size Variants
Three size options for different contexts.
Small (table cells)
75/100
Medium (default)
75/100
Large (headers)
75/100
With Score Breakdown
Click the toggle to expand the detailed breakdown showing each scoring factor.
68/100
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
score | number | required | Impact score value (0-100) |
breakdown | ScoreBreakdown | undefined | Optional detailed breakdown data for expanded view |
size | "sm" | "md" | "lg" | "md" | Size variant |
showBreakdown | boolean | false | Show the breakdown toggle (requires breakdown prop) |
Usage
import { ImpactScoreDisplay } from '@/features/insights';
// Simple display
<ImpactScoreDisplay score={75} />
// With size variant
<ImpactScoreDisplay score={92} size="lg" />
// With breakdown
<ImpactScoreDisplay
score={68}
breakdown={insight.scoreBreakdown}
showBreakdown
/>