# Sparkline

> Una curva de un vistazo en SVG a mano, sin librería de gráficos: decorativa, para la fila de una lista o una card.

```tsx
import { Sparkline } from "sebs7n-ui/sparkline"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Junto a la cifra

Decorativa: da la forma de la serie y el número va escrito al lado.

```tsx
import { Card, CardContent } from "sebs7n-ui/card"
import { Sparkline } from "sebs7n-ui/sparkline"

function Basic() {
  return (
    <Card className="w-full max-w-xs">
      <CardContent className="flex flex-col gap-2">
        <div className="flex items-baseline justify-between">
          <span className="text-callout text-label-secondary">Cobros por semana</span>
          <span className="text-title-3 text-label tabular-nums">41</span>
        </div>
        <Sparkline className="h-10 w-full" values={WEEKS} />
      </CardContent>
    </Card>
  )
}
```

### Sin relleno, con otro color

`area={false}` deja solo la línea; el color es el del texto de la caja.

```tsx
import { Sparkline } from "sebs7n-ui/sparkline"

function LineOnly() {
  return <Sparkline area={false} className="h-8 w-48 text-red-ink" values={[30, 28, 31, 24, 20, 22, 15, 12]} />
}
```

## Props

### Sparkline

Hereda las props de `<svg>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `values` * | `readonly number[]` | — | La serie, de izquierda a derecha. Los valores no finitos se ignoran. |
| `area` | `boolean` | `true` | Pinta el área bajo la curva, a baja opacidad. Por defecto, `true`. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo. |

## Accesibilidad

- Es decorativa (`aria-hidden`): da la forma, no el dato. El valor actual va escrito al lado; si el dato importa, un `chart` con ejes y lectura.
- Con menos de dos valores no dibuja nada.
- Sin estado ni `"use client"`: sirve en un Server Component.

## Reglas de uso

- Para ver la tendencia de una serie en una fila o una card (CPU, cobros por semana), junto a la cifra actual.
- Toma el color de `currentColor` (`text-brand-900` por defecto) y se estira al ancho de su caja con el trazo siempre de 1,5 px. `area={false}` saca el relleno.
- No paga el peso de Recharts: para una lista de cien filas, esto; para un gráfico real, `chart`.

## Relacionados

[chart](/docs/components/chart.md) · [stat](/docs/components/stat.md) · [card](/docs/components/card.md)