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

Callen-GBen-USpt-PTpt-BR
formatCount(1240)1,2401,2401 2401.240
formatCount(2543)2,5432,5432 5432.543
formatRating(4.3)4.34.34,34,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, Intl prints 1240 in pt-PT but 1,240 in English. In a numeric table column that misaligns the thousands, so formatCount forces grouping in every locale.
  • No rating is not zero. formatRating and roundRating return null for 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.45 is shown as 3.5, which is very-good; the raw value would paint good next to a figure that says otherwise.
  • A delta that rounds to zero has no sign. 0.04 shows 0.0 and deltaSign(0.04) is 'flat'. deltaSign reads the rounded value so the arrow and the number always agree. Tone is never colour alone: pair deltaSign with a sign or an accessible name.
  • The locale is required. There is no default, and an invalid tag throws RangeError so 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.