# Delta

> How a value moved against the one before it: an arrow, a sign and the change, with the direction in words for screen readers. Color only says whether that is good news, so spending going up can be red. A percentage needs a positive base: from zero or below it shows the difference in value. A first value reads new, and a missing one is a dash with the reason in a Tooltip.

Section: Data. Docs: https://entrepta.vercel.app/docs/components/delta

## Install

```bash
npx @entrepta/cli@latest add delta
```

Files: `data/delta.tsx`, `primitives/kbd.tsx`, `lib/overlay.ts`, `primitives/tooltip.tsx`, `lib/format.ts`, `hooks/use-format.ts`.
npm packages: `@radix-ui/react-tooltip`, `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `kbd`, `overlay-lib`, `tooltip`, `format-lib`, `use-format`.

## Usage

```tsx
import { Delta } from "@/components/entrepta/delta"

<Delta current={124000} previous={110000} intent="increase-is-bad" />  // ↗ +12.7%, red
<Delta current={5000} previous={0} currency="USD" />                      // ↗ +$50.00
<Delta current={null} previous={100} reason="August has not synced" />   // —
<Delta current={958990} previous={812000} variant="pill" />             // in a tinted pill
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `current, previous` | `number \| null` | - | Minor units for money |
| `format` | `"percent" \| "amount" \| "number"` | "percent" | The change as a share, in money, or as a plain number |
| `intent` | `"increase-is-good" \| "increase-is-bad" \| "neutral"` | "increase-is-good" | Which way is good news |
| `currency, locale` | `string` | - | Fall back to the FormatProvider's |
| `reason` | `string` | - | Why there is nothing to compare |
| `size` | `"sm" \| "md"` | "md" | 10px or 12px |
| `variant` | `"text" \| "pill"` | "text" | A pill sits on a soft tint of its tone, for a Metric or a tile |
| `labels` | `{ up?, down?, flat?, new?, none? }` | - | Every word |
| `compareValues(current, previous)` | `{ state, difference, ratio }` | - | The same comparison as data |