Ir al contenido
sebs7n-ui2.10.0
Contenido y datosServer Component

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.

Ver como .mdVer el código
import { Sparkline } from "sebs7n-ui/sparkline"

Ejemplos

Junto a la cifra

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

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.

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

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Sparkline

Hereda las props de <svg>.

PropTipoPor defectoDescripción
values*readonly number[]—La serie, de izquierda a derecha. Los valores no finitos se ignoran.
areabooleantruePinta el área bajo la curva, a baja opacidad. Por defecto, true.
classNamestring—Se fusiona con las clases del componente vía cn() (tailwind-merge): lo que pongas gana.

Teclado

—
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

ChartStatCard