Overview
InsightVelocityChart displays insight submission rate over time with optional quality scoring overlay. Uses a composed chart with bars for counts and a line for average quality scores. Perfect for tracking feedback collection velocity.
Features
- Bar chart for insight counts
- Quality score line overlay (0-10 scale)
- Optional trend line calculation
- Target reference line
- Dual Y-axis support
Examples
Basic Velocity Chart
Simple velocity view
Without Quality Overlay
Count only view
With Trend Line
Shows linear trend
With Target
With target reference line
Complete Example
All features enabled
With ChartCard
Wrapped in ChartCard
Insight Collection Rate
Monthly insight submissions with quality trend
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | VelocityDataPoint[] | required | Array of velocity data points |
showQuality | boolean | true | Show quality overlay line |
showTrendLine | boolean | false | Show linear trend line |
target | number | - | Target count reference line |
height | number | 300 | Chart height in pixels |
className | string | - | Additional CSS classes |
VelocityDataPoint Type
date: string - Date label
count: number - Number of insights
averageScore?: number - Average quality score (0-10)
Usage
import { InsightVelocityChart, ChartCard } from '@/ui/components/charts';
const data = [
{ date: '2025-01', count: 45, averageScore: 6.2 },
{ date: '2025-02', count: 52, averageScore: 6.5 },
{ date: '2025-03', count: 48, averageScore: 6.8 },
{ date: '2025-04', count: 61, averageScore: 7.1 },
];
// Basic velocity chart
<InsightVelocityChart data={data} />
// With quality overlay and trend
<InsightVelocityChart
data={data}
showQuality
showTrendLine
target={50}
/>
// With ChartCard
<ChartCard title="Insight Collection Rate">
<InsightVelocityChart
data={data}
showQuality
target={50}
height={350}
/>
</ChartCard>