Primitives
Format number
Numbers are formatted in the app’s locale, by one set of pure functions. The package ships no words: an invalid value returns null and the app decides what to show.
Import
import {
formatCount,
formatRating,
roundRating,
formatDelta,
deltaSign,
} from '@sportingscouter/ui';The four locales
| Call | en-GB | en-US | pt-PT | pt-BR |
|---|---|---|---|---|
formatCount(1240) | 1,240 | 1,240 | 1 240 | 1.240 |
formatCount(2543) | 2,543 | 2,543 | 2 543 | 2.543 |
formatRating(4.3) | 4.3 | 4.3 | 4,3 | 4,3 |
formatDelta(0.2) | +0.2 | +0.2 | +0,2 | +0,2 |
formatDelta(-0.2) | -0.2 | -0.2 | -0,2 | -0,2 |
The pt-PT separator is a no-break space (U+00A0), so a count never wraps mid-number.
Rules
- The thousands separator is always on. Left to itself,
Intlprints1240in pt-PT but1,240in English. In a numeric table column that misaligns the thousands, soformatCountforces grouping in every locale. - No rating is not zero.
formatRatingandroundRatingreturnnullfor a value<= 0. Render your own dash; the package has no copy. - Tier, colour and bar width come from
roundRating(value), never from the raw value.3.45is shown as3.5, which isvery-good; the raw value would paintgoodnext to a figure that says otherwise. - A delta that rounds to zero has no sign.
0.04shows0.0anddeltaSign(0.04)is'flat'.deltaSignreads the rounded value so the arrow and the number always agree. Tone is never colour alone: pairdeltaSignwith a sign or an accessible name. - The locale is required. There is no default, and an invalid tag throws
RangeErrorso a typo fails in development instead of shipping a wrong format.
Structure snippet
import { formatCount, formatRating, roundRating, formatDelta, deltaSign, ratingOf } from '@sportingscouter/ui';
const locale = 'pt-PT'; // from the app
const verified = formatCount(2543, locale); // "2 543"
const shown = formatRating(avg, locale) ?? '–'; // "4,3", or the app's own dash
const tier = ratingOf(roundRating(avg) ?? 0); // same value the figure shows
const delta = formatDelta(0.2, locale); // "+0,2"
const direction = deltaSign(0.2); // 'up' | 'down' | 'flat'Not in v1
Percentages, compact notation (1.2k) and currency. None of the current surfaces use them; they are added when a screen asks for one.
Sporting Scouter Design System
Every token on this site is generated from
theme.css.