ImpactFeasibilityMatrix

@spartanfx/react v1.2.2

---

@spartanfx/react / index / ImpactFeasibilityMatrix

Variable: ImpactFeasibilityMatrix

const ImpactFeasibilityMatrix: typeof ImpactFeasibilityMatrixInner;

ImpactFeasibilityMatrix — a 2×2 impact / feasibility prioritisation matrix.

Plots arbitrary items (mapped through a IImpactFeasibilityMatrixProps.schema) into four fixed quadrants — Quick Wins, Major Projects, Fill-ins, Resource Drains — with configurable score ranges, token-based theming, a mobile-first responsive layout, full keyboard accessibility, and per-quadrant maximize / minimize.

Props

Required

Property	Type	Description
items	TItem[]	The items to plot. Shape is opaque to the component; mapped via schema.
schema	IImpactFeasibilityMatrixSchema<TItem>	Maps the item shape onto { id, title, impact, feasibility }.

Options

Property	Type	Description
ariaLabel?	string	Accessible label for the whole matrix.
avoidOverlap?	boolean	Nudge overlapping items apart so plots at the same position don't overlap (a deterministic relaxation). Default true.
defaultMaximizedQuadrant?	TQuadrantKey	Initial maximized quadrant for uncontrolled usage. Default null.
emptyState?	ReactNode	Custom content for the empty state (no plottable items).
feasibilityAxisLabel?	string	Label for the Feasibility (X) axis. Default 'Feasibility'.
feasibilityRange?	IScoreRange	Feasibility (X) score range. Default { min: 1, max: 100 }.
height?	string | number	Root height. A number is treated as pixels. Omit to use the intrinsic aspect ratio.
impactAxisLabel?	string	Label for the Impact (Y) axis. Default 'Impact'.
impactRange?	IScoreRange	Impact (Y) score range. Default { min: 1, max: 100 }.
maximizedQuadrant?	TQuadrantKey	Controlled maximized quadrant. null = standard 2×2 view.
quadrantLabels?	Partial<Record<TQuadrantKey, string>>	Overrides for the default quadrant labels.
showAxisLabels?	boolean	Show the Impact / Feasibility axis labels. Default true.
showGrid?	boolean	Show the quadrant divider grid lines. Default true.
showItemCount?	boolean	Show the item count, in parentheses, beside each quadrant label. Default true.
showItemTitles?	boolean	Render each item's title beside its marker. When false, items render as bare markers and the title moves into the hover / focus tooltip. Default true.
showQuadrantActions?	boolean	Show the maximize / minimize quadrant action buttons. Default true.
showQuadrantLabels?	boolean	Show the quadrant labels. Default true.
width?	string | number	Root width. A number is treated as pixels. Default '100%'.

Events & callbacks

Property	Type	Description
onItemClick?	(item) => void	Called with the normalized item when a plotted item is activated (click / Enter / Space).
onItemFocus?	(context) => void	Called when a plotted item receives keyboard / pointer focus.
onMaximizedQuadrantChange?	(quadrantKey) => void	Called whenever the maximized quadrant changes (controlled or uncontrolled).
renderItem?	(context) => ReactNode	Custom renderer for a plotted item.

Appearance & theming

Property	Type	Description
appearance?	AppearanceMode	Light / dark appearance. Default AppearanceMode.light.
className?	string	Extra class name on the root element.
style?	CSSProperties	Inline style on the root element (merged after token CSS variables).
tokens?	PartialDeep<IImpactFeasibilityMatrixTokens>	Deep-partial token overrides, merged over the active theme base.

Full type reference: IImpactFeasibilityMatrixProps

Example

<ImpactFeasibilityMatrix
  items={ideas}
  schema={{ id: 'id', title: 'name', impact: 'value', feasibility: 'ease' }}
  onItemClick={(item) => console.log(item.quadrantKey)}
/>