#FormatNumber

Prints a number the way the house number guide says to: abbreviated by default — 12k, 59.6M — with the full figure in a tooltip behind a dashed underline. type chooses the family: decimal, percent, which refuses to round to a flat 0% or 100% it has not earned, and byte, which counts in units of 1000.

Source · Storybook

#Usage

import { FormatNumber } from '@wallarm-org/design-system/FormatNumber';

#Examples

#Standard

notation='standard' prints the grouped figure instead, for the place where the exact number is the point and there is room to show it.

#With unit

unit follows the value — except on an abbreviated number with its tooltip still on, where it moves into the tooltip and the accessible name and leaves the cell.

#Percent

The boundary rules: anything above zero that would round to 0% prints <1%, and anything below a hundred that would round to 100% prints >99%, with decimals moving both thresholds.

#Bytes

byte counts in decimal units — a thousand to the kilobyte, not 1024 — so 12,700,000 reads 12.7 MB, and standard spells the whole figure out.

#No tooltip

tooltip={false} removes the tooltip and the dashed underline with it, for a cell where the abbreviation is enough; the full value stays in the accessible name.

#Negative values

Negatives abbreviate on the same tiers, with the sign kept in front of the number.

#Null value

null and undefined render an em dash with 'No data' on hover, so a figure nobody recorded never reads as a zero.

#Special values

Zero is printed as itself rather than abbreviated, while NaN and Infinity fall back to the em dash — with no tooltip, since there is nothing behind them to show.

#Props