Overview
SummaryStatsCard displays key statistical measures in a compact card format. Perfect for showing distribution summaries of survey scores, response times, or any numeric data that benefits from statistical context.
Features
- Mean and median with labeled display
- Min/max range indicator
- Standard deviation
- Percentiles (P25, P75, P90)
- Visual distribution bar with markers
- Sample size indicator
- Custom value formatting
Examples
Basic Example
Core statistics
Response Time
n = 256Mean
4.2
Median
3.8
Range
1.5 – 12.4
1.512.4
Full Statistics
All statistical measures
Survey Satisfaction Scores
n = 1,432Mean
7.4
Median
7.8
Range
2.0 – 10.0
Std Dev
±1.8
2.010.0
Percentiles
P25: 6.2
P75: 8.5
P90: 9.2
Multiple Cards
Compare multiple metrics
Completion Time
n = 892Mean
5.2m
Median
4.8m
Range
2.1m – 15.3m
Std Dev
±2.4m
2.1m15.3m
Pages Viewed
n = 892Mean
8
Median
7
Range
1 – 24
Std Dev
±4
124
Compact Mode
Dense display for dashboards
Score A
n = 150Mean
4.2
Median
4
Range
1 – 5
15
Score B
n = 150Mean
3.8
Median
4
Range
1 – 5
15
Score C
n = 150Mean
4.5
Median
5
Range
2 – 5
25
Without Distribution Bar
Numbers only, no visual
Customer Age
n = 5,420Mean
34.5
Median
32
Range
18 – 72
Std Dev
±12.3
Percentiles
P25: 26
P75: 42
In ChartCard
Wrapped in ChartCard
Score Distribution Analysis
Overall Satisfaction
n = 2,100Mean
7.8
Median
8
Range
3 – 10
Std Dev
±1.4
310
Percentiles
P25: 7
P75: 9
P90: 9.5
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Card title |
mean | number | required | Average value |
median | number | required | Median value |
min | number | required | Minimum value |
max | number | required | Maximum value |
stdDev | number | - | Standard deviation |
percentiles | {p25, p75, p90?} | - | Percentile values |
sampleSize | number | - | Sample size (n) |
format | (v) => string | toLocaleString | Value formatter |
showDistribution | boolean | true | Show visual bar |
compact | boolean | false | Compact display mode |
isLoading | boolean | false | Show loading skeleton |
Usage
import { SummaryStatsCard } from '@/ui/components/charts';
// Basic statistics card
<SummaryStatsCard
title="Response Time"
mean={4.2}
median={3.8}
min={1.5}
max={12.4}
/>
// With percentiles and formatting
<SummaryStatsCard
title="Survey Scores"
mean={7.4}
median={7.8}
min={2}
max={10}
stdDev={1.8}
percentiles={{ p25: 6.2, p75: 8.5, p90: 9.2 }}
sampleSize={1432}
format={(v) => v.toFixed(1)}
/>
// Compact mode
<SummaryStatsCard
title="Completion Time"
mean={5.2}
median={4.8}
min={2.1}
max={15.3}
format={(v) => `${v.toFixed(1)}m`}
compact
/>