FactorHeatmap

stable

Multi-factor exposure heatmap across time periods with threshold-based coloring

import { FactorHeatmap } from "@nodus/design-system/finance"

Factor Exposure Matrix

Factor	Q1	Q2	Q3	Q4
Duration	4.20	4.50	4.10	4.80
Convexity	0.85	0.92	0.78	1.05
Credit Beta	1.12	1.08	1.15	1.22
Volatility	0.18	0.22	0.15	0.28

Loading demo…

Props

Prop	Type	Default	Description
`factors`req	`string[]`	—	Factor names
`periods`req	`string[]`	—	Period labels
`exposures`req	`number[][]`	—	Exposure values matrix
`breakpoints`	`ThresholdBreakpoints`	—	Custom severity breakpoints
`label`	`string`	—	Heatmap title

factorsrequired

Type string[]Default —

Factor names

periodsrequired

Type string[]Default —

Period labels

exposuresrequired

Type number[][]Default —

Exposure values matrix

breakpoints

Type ThresholdBreakpointsDefault —

Custom severity breakpoints

label

Type stringDefault —

Heatmap title

MobileStacks / Scroll

Heatmap requires min 400px for legible cell content. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Two-dimensional risk heatmap grid with severity-colored cells

Portfolio concentration risk breakdown with exposure bars and limit indicators

Was this helpful?