PrecisionNumberTag

PrecisionNumberTag

Formats a number with configurable decimal precision, falling back to a dash placeholder for empty or invalid values.

Rationale

Throughout the application, numeric values such as weights, quantities, and monetary amounts need to be displayed with consistent decimal formatting. Rather than repeating Number.toFixed(precision) calls and null/undefined guards in every component, this tag encapsulates the formatting logic in a single, testable unit. Invalid or empty inputs gracefully degrade to a dash via EmptyValueTag.

Props

Name	Type	Required	Default	Description
value	number | string | null | undefined	Yes	—	The number or numeric string to format. Invalid values render a dash.
precision	number	No	2	Number of decimal places passed to Number.toFixed(). May be negative.

Usage

import PrecisionNumberTag from '@/components/core/Tags/PrecisionNumberTag';

<PrecisionNumberTag value={3.14159} />;
<PrecisionNumberTag value={123.456} precision={4} />;
<PrecisionNumberTag value={null} />;

Behavior

1. If the value is null, undefined, '', or whitespace-only → delegates to <EmptyValueTag />.
2. Otherwise converts the value to Number().
3. If the result is not finite (NaN, Infinity, -Infinity) → delegates to <EmptyValueTag value={null} />.
4. Otherwise renders <span>{parsedNumber.toFixed(precision)}</span>.

Key edge cases:

• 0 is treated as a valid number and rendered as "0.00" (default precision).
• String inputs like "42.5" are parsed to numbers before formatting.
• Non-numeric strings like "abc" produce a dash.
• Negative precision values are passed directly to toFixed (e.g. precision={-1} rounds to the nearest ten).

Examples

Happy Path

<PrecisionNumberTag value={3.14159} precision={2} />
<!-- Renders: <span>3.14</span> -->

Edge Cases

<PrecisionNumberTag value={NaN} />
<!-- Renders: <span data-testid="empty-value">-</span> -->

<PrecisionNumberTag value="abc" />
<!-- Renders: <span data-testid="empty-value">-</span> -->

<PrecisionNumberTag value={0} precision={3} />
<!-- Renders: <span>0.000</span> -->

Notes

• The component imports EmptyValueTag as its fallback renderer.
• precision defaults to 2 — omit for standard decimal display.
• The component does not perform locale-aware formatting (no thousand separators).

Known Constraints

• Number.toFixed() may return unexpected results for very large or very small numbers due to floating-point representation. For financial values requiring exact precision, use a dedicated decimal library at the data layer before passing the value to this component.
• No support for locale-aware formatting (, as thousands separator, custom decimal markers).

Change Impact

No cross-references detected.

See Also

• EmptyValueTag — the dash placeholder component used as the invalid-value fallback.