# Metric

> One number and what it means: the label, the value, how it moved and against what. A description list, so a screen reader pairs the label with the value. It has no surface of its own: put it in a Card, or several in a BentoGrid. The value never truncates, since an ellipsis would hide digits: the large size steps down when its container is narrow, and in a very narrow tile pass a compact Amount. With loading it draws its pieces in their final shape.

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

## Install

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

Files: `data/metric.tsx`, `content/diamond.tsx`, `feedback/skeleton.tsx`, `lib/icon.tsx`, `hooks/use-redact.ts`, `data/redact.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `diamond`, `skeleton`, `icon-lib`, `use-redact`, `redact`.

## Usage

```tsx
import { Metric } from "@/components/entrepta/metric"
import { Amount } from "@/components/entrepta/amount"
import { Delta } from "@/components/entrepta/delta"

<Card>
  <Metric
    label="spent this month"
    value={<Amount value={spent} />}
    delta={<Delta current={spent} previous={lastMonth} intent="increase-is-bad" />}
    comparison="vs August"
    hint="2 accounts not synced"
    size="lg"
  />
</Card>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | - | What is measured |
| `value` | `ReactNode` | - | An Amount, a RollingNumber or text |
| `delta` | `ReactNode` | - | A Delta, on the line under the value |
| `comparison` | `ReactNode` | - | Against what: vs August |
| `hint` | `ReactNode` | - | A short note in the muted ink |
| `trend` | `ReactNode` | - | A small chart under the value, 40px tall |
| `icon` | `Icon \| ReactElement` | - | In place of the ◆ |
| `size` | `"md" \| "lg"` | "md" | 24px or 40px value |
| `loading` | `boolean` | false | Skeleton pieces in the final shape |