Overview
ImpactEffortQuadrant displays items on a 2x2 matrix with impact on the Y-axis and effort on the X-axis. Items are automatically categorized into quadrants: Quick Wins (high impact, low effort), Major Projects (high impact, high effort), Fill-Ins (low impact, low effort), and Time Sinks (low impact, high effort). Built on Recharts ScatterChart.
Features
- Scatter plot visualization
- Automatic quadrant categorization
- Quadrant labels and backgrounds
- Interactive tooltips with item details
- Click handler for item selection
- Customizable axis labels
Examples
Basic ImpactEffortQuadrant
Feature prioritization matrix
Quick Wins
Major Projects
Fill-Ins
Time Sinks
With Quadrant Labels
Showing quadrant category labels
Quick Wins
Major Projects
Fill-Ins
Time Sinks
Custom Labels
Custom axis and quadrant labels
High Priority
Strategic
Easy Fixes
Reconsider
With ChartCard
Wrapped in ChartCard
Feature Prioritization
Mapped by user impact and development effort
Quick Wins
Major Projects
Fill-Ins
Time Sinks
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | QuadrantItem[] | required | Array of items with impact and effort values |
xAxisLabel | string | 'Effort' | Label for the X-axis |
yAxisLabel | string | 'Impact' | Label for the Y-axis |
showQuadrantLabels | boolean | false | Show labels in each quadrant |
quadrantLabels | QuadrantLabels | - | Custom labels for each quadrant |
onItemClick | (item: QuadrantItem) => void | - | Click handler for items |
height | number | 400 | Chart height in pixels |
className | string | - | Additional CSS classes |
Usage
import { ImpactEffortQuadrant, ChartCard } from '@/ui/components/charts';
// Feature prioritization matrix (values 0-100)
<ChartCard title="Feature Prioritization">
<ImpactEffortQuadrant
items={[
{ id: '1', label: 'Dark Mode', impact: 80, effort: 30 },
{ id: '2', label: 'Mobile App', impact: 90, effort: 85 },
{ id: '3', label: 'Export PDF', impact: 40, effort: 20 },
{ id: '4', label: 'AI Summary', impact: 75, effort: 80 },
]}
showQuadrantLabels
onItemClick={(item) => console.log(item)}
/>
</ChartCard>