# BigNumber

One number, at the size of a headline.

- Group: Data
- Import: `import { BigNumber } from '@misoto22/design/charts'`
- Page: https://ui.misoto22.com/components/big-number/
- Related: sparkline, figure-band

## When to reach for it

There is exactly one figure to report. A plot of a single value is a plot whose shape carries nothing, and the reader has to decode an axis to recover a number that could simply have been printed.

## Accessibility

- The delta’s direction is stated by the call site through intent, never inferred from the sign: “errors down 12%” is good news and “revenue down 12%” is not, and no component can tell which it is holding.
- The arrow and the words carry the direction; the status tint is the third signal, never the only one — so the reading survives greyscale, forced colours and colour blindness.
- value is taken already formatted. The component does not guess a unit, a currency or a locale.

## BigNumber

One number, at the size of a headline. The form most dashboards need most often and most chart libraries do not ship, on the grounds that it is not a chart. It is the right answer whenever there is exactly one figure to report: a plot of a single value is a plot whose shape carries nothing, and the reader has to decode an axis to recover a number that could simply have been printed. The delta is where this earns its place over a `<p>`. Direction is stated by the CALL SITE (`intent`), never inferred: "errors down 12%" is good news and "revenue down 12%" is not, and no component can tell which it is holding. Where the direction is known, the arrow and the word carry it — the status colour is the third signal, never the only one.

### Props

- `label` (required) — `ReactNode`. What the number counts.
- `value` (required) — `ReactNode`. The number, already formatted — this component does not guess a unit.
- `delta` — `BigNumberDelta`.
- `children` — `ReactNode`. A sparkline, a note, a caveat. Sits under the number.
- `className` — `string`.

## Example — default

```tsx
import { BigNumber } from '@misoto22/design/charts'

<div className="grid w-full gap-10 sm:grid-cols-3">
  <BigNumber
    label="Monthly revenue"
    value="$48,210"
    delta={{ value: 0.124, label: 'vs last month', intent: 'up-is-good' }}
  />
  <BigNumber
    label="Error rate"
    value="2.4%"
    delta={{ value: 0.08, label: 'vs last week', intent: 'down-is-good' }}
  />
  <BigNumber
    label="Active projects"
    value="1,204"
    delta={{ value: 0, label: 'vs last month', intent: 'neutral' }}
  />
</div>
```

## Example — with sparkline

```tsx
import { Card, CardBody } from '@misoto22/design'
import { BigNumber, Sparkline } from '@misoto22/design/charts'

<div className="grid w-full gap-6 sm:grid-cols-2">
  <Card>
    <CardBody>
      <BigNumber
        label="Monthly revenue"
        value="$48,210"
        delta={{ value: 0.124, label: 'vs last month', intent: 'up-is-good' }}
      >
        <Sparkline label="Revenue, last eight months" data={trend} variant="area" />
      </BigNumber>
    </CardBody>
  </Card>

  <Card>
    <CardBody>
      <BigNumber
        label="p95 latency"
        value="1.34s"
        delta={{ value: -0.29, label: 'vs last week', intent: 'down-is-good' }}
      >
        <Sparkline
          label="p95 latency, last eight weeks"
          data={[2.1, 2.0, 1.9, 2.2, 1.8, 1.6, 1.5, 1.34]}
          variant="bars"
        />
      </BigNumber>
    </CardBody>
  </Card>
</div>
```