Overview
ScoreHistogram displays insight/feedback score distributions as a bar chart. Shows mean and median reference lines, with color-coded bars based on score thresholds. Perfect for analyzing score patterns and quality spread.
Features
- Score distribution as bar chart
- Mean and median reference lines
- Highlight threshold for high scores
- Color-coded bars by score level
- Summary statistics (total, mean, median)
Examples
Basic Histogram
Default view with mean
Total: 150
Mean: 6.5
Median: 6.5
With Median
Showing both mean and median
Total: 150
Mean: 6.5
Median: 6.5
With Highlight Threshold
Highlighting high scores
Total: 150
Mean: 6.5
Median: 6.5
High Score Distribution
Skewed toward high scores
Total: 100
Mean: 8.0
Median: 8.0
Low Score Distribution
Skewed toward low scores
Total: 120
Mean: 4.2
Median: 4.0
Bimodal Distribution
Two distinct peaks
Total: 100
Mean: 5.5
Median: 5.5
Custom Score Range (1-5)
1-5 scale instead of 0-10
Total: 20
Mean: 3.2
Median: 3.0
With ChartCard
Wrapped in ChartCard
Insight Score Distribution
Analysis of 150 insight quality scores
Total: 150
Mean: 6.5
Median: 6.5
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
scores | number[] | required | Array of score values |
maxScore | number | 10 | Maximum score value |
minScore | number | 0 | Minimum score value |
showMean | boolean | true | Show mean reference line |
showMedian | boolean | false | Show median reference line |
highlightThreshold | number | - | Highlight scores above this threshold |
height | number | 250 | Chart height in pixels |
className | string | - | Additional CSS classes |
Usage
import { ScoreHistogram, ChartCard } from '@/ui/components/charts';
const scores = [3, 5, 7, 8, 6, 9, 4, 7, 8, 5, 6, 7, 8, 9, 10];
// Basic histogram
<ScoreHistogram scores={scores} />
// With mean and median lines
<ScoreHistogram
scores={scores}
showMean
showMedian
/>
// With highlight threshold
<ScoreHistogram
scores={scores}
showMean
highlightThreshold={7}
/>
// Custom score range
<ScoreHistogram
scores={[1, 2, 3, 2, 3, 4, 3, 2, 5, 4]}
minScore={1}
maxScore={5}
/>
// With ChartCard
<ChartCard title="Insight Score Distribution">
<ScoreHistogram
scores={scores}
showMean
showMedian
highlightThreshold={7}
height={300}
/>
</ChartCard>