MiniSparkline

Gráfica SVG inline de tendencia, sin dependencias externas. Ideal para dashboards y tarjetas de métricas donde el espacio es limitado. Admite tonos semánticos, área bajo la curva y punto final destacado.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { MiniSparkline } from "@tsukira/ui"; <MiniSparkline  data={[10, 24, 18, 32, 28, 44, 39]}  tone="brand"  area  showLastPoint/>

Ejemplos#

Playground

cambia las props y el código se regenera

tone

strokeWidth

areashowLastPoint

Tonos

brand · ink · success · warning · danger · info

Tendencias: alza · baja · estable

el tono comunica la dirección semántica

alza

baja

estable

Tamaños y área

width/height libres — area en true/false

Fusión: fila de métrica con KeyValue

MiniSparkline como valor de un KeyValue — patrón tabla de métricas

Usuarios activos12,4 M

Ingresos€ 284 K

Latencia p9538 ms

Fusión: mini-dashboard en Card con Badge de variación

Métricas con tendencia y Badge semántico en un mismo Card

Semana actual

Resumen de rendimiento

MAU12,4 M

+8,2 %

Ingresos€ 284 K

−4,1 %

Latencia p9538 ms

estable

API#

MiniSparklinePropsextends Omit<SVGAttributes<SVGSVGElement>, 'children'>

Prop	Tipo	Default	Descripción
`data`*	`number[]`	—	Serie de números a representar.
`tone`	`'brand' \| 'ink' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—	Tono del trazo/relleno.
`area`	`boolean`	—	Pintar área bajo la curva.
`width`	`number \| string`	—	Ancho intrínseco del SVG (responsive si width=100%).
`height`	`number \| string`	—	Alto del SVG.
`strokeWidth`	`number`	—	Grosor del trazo.
`showLastPoint`	`boolean`	—	Mostrar punto final destacado.