# Metric Tile

One headline number with its unit, change and trend.

Source page: https://sproutboat.com/ikada/components/metric-tile

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/metric-tile.json
```
Or from the package: `import { MetricTile } from "@sproutboat/ikada";`
## Usage
```tsx
import { MetricTile } from "@/components/ikada/metric-tile";

<MetricTile
  label="Requests"
  value="1.28M"
  delta={{ value: "12%", direction: "up" }}
  sparkline={<Sparkline aria-label="Requests, last 10 hours" data={requests} formatPoint={hour} />}
/>
```
## Examples
### Delta and trend
The delta is a soft pill; the sparkline sits flush to the tile's bottom edge and marks now.
```tsx
<MetricTile
  label="Requests"
  value="1.28M"
  delta={{ value: "12%", direction: "up" }}
  hint="14.8 req/s average"
  sparkline={<Sparkline aria-label="Requests, last 10 hours" height={28} data={[8, 11, 9, 14, 13, 17, 16, 21, 19, 24]} formatPoint={(i) => `${14 + i}:00`} />}
/>
```
### Sentiment
A rise in requests is neither good nor bad. Say when the direction is news: error rate down is good.
```tsx
<MetricTile
  label="Error rate"
  value="0.21"
  unit="%"
  delta={{ value: "0.3 pt", direction: "down", sentiment: "good" }}
/>
<MetricTile
  label="Latency"
  value="184"
  unit="ms p50"
  delta={{ value: "9%", direction: "up", sentiment: "bad" }}
/>
```
### Count
Pass a raw number as amount and it is formatted compactly for the locale.
```tsx
<MetricTile label="Requests" amount={1284000} />
<MetricTile label="Requests" amount={1284000} locale="de" />
```
### Loading
A skeleton stands in for the value and the tile is marked aria-busy.
```tsx
<MetricTile label="Requests" loading />
```
### No data

```tsx
<MetricTile label="Requests" noData emptyText="No requests since the last deploy" />
```
## Props
### MetricTileProps
Also takes every prop of `Omit<ComponentProps<"div">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| label | `string` | What the number measures, above it. |
| value? | `string` | Already formatted: "0.21". For a plain count prefer `amount`. |
| amount? | `number` | A count, formatted compactly in `locale` ("1.28M", "860K"). Wins over `value`. |
| locale? | `string` | Number-formatting locale; defaults to the `LocaleProvider` value, else `en`. |
| unit? | `string` | "M", "%", "ms p50". |
| delta? | `MetricDelta` | Change against the previous period, shown as an arrow and a value. |
| hint? | `ReactNode` | A line under the value: "14.8 req/s average". |
| sparkline? | `ReactNode` | A `<Sparkline />` from `@sproutboat/ikada/charts`, flush to the tile's bottom edge, its line ending in line with the tile's text. |
| loading? | `boolean` | Draws a skeleton in place of the value. Default `false`. |
| noData? | `boolean` | Nothing to show for this range: an em dash and `emptyText`. Default `false`. |
| emptyText? | `string` | Shown when there is no value. Default "No data for this range". |
Source: https://github.com/baronunread/ikada/blob/main/src/components/metric-tile.tsx