RatioBar
Regulatory compliance ratio bar with threshold marker — visualizes LCR, NSFR, leverage ratios against minimum requirements
import { RatioBar } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
valuereq | number | — | Current ratio value |
thresholdreq | number | — | Minimum requirement threshold |
max | number | — | Maximum scale value (auto-calculated if omitted) |
label | string | — | Ratio label |
formatValue | (v: number) => string | — | Custom value formatter |
valuerequiredType
numberDefault —Current ratio value
thresholdrequiredType
numberDefault —Minimum requirement threshold
maxType
numberDefault —Maximum scale value (auto-calculated if omitted)
labelType
stringDefault —Ratio label
formatValueType
(v: number) => stringDefault —Custom value formatter
MobileWorks As-Is
Ratio bar fills container width. Works at any viewport.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?