componente · @solu30/ui-kit/display
Sparkline
Gráfico mínimo de una serie, como línea o como barras, para meter adentro de una tarjeta.
7 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- cmp-packages
- dietaly
- gestorsalon
- luigi
El componente, montado
Cargando el espécimen…
export function SparklineSpecimen() {
return (
<Stage label="Sparkline · con alternativa textual" tall>
<div className="flex w-full flex-col items-center gap-4">
<Sparkline data={SPARK_DATA} color="primary" fillArea width={220} height={52} />
<Sparkline data={[...SPARK_DATA].reverse()} color="red" width={220} height={52} />
</div>
</Stage>
)
}De specimens/display.tsx · SparklineSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Cómo se usa
import { Sparkline } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| data | sí | number[] | — |
| variant | opcional | "line" | "bars" | ADR-324: forma del trazo. Default `"line"`. `"bars"` dibuja una barra por punto — lo que pide una serie de conteos discretos (invocaciones por día, ventas por semana): una línea entre dos días sugiere una transición continua que no existe. Cambia la línea base, y por eso es una variante y no una prop de estilo: la línea se normaliza entre el mínimo y el máximo (interesa la *forma*), las barras siempre desde cero (interesa la *magnitud*, y una barra que no arranca en cero miente sobre la proporción). `fillArea` y `showDots` no aplican en `"bars"` y se ignoran. |
| width | opcional | number | — |
| height | opcional | number | — |
| strokeWidth | opcional | number | — |
| showDots | opcional | boolean | — |
| fillArea | opcional | boolean | — |
| color | opcional | "primary" | "green" | "red" | "yellow" | "purple" | "content" | — |
| disableAnimation | opcional | boolean | — |
| className | opcional | string | — |
| ariaLabel | opcional | string | When provided, renders the SVG with role="img" and aria-label={ariaLabel}. When omitted, the SVG remains aria-hidden:true (decorative — default behavior). |
| valueFormatter | opcional | (value: number) => string | Generic value formatter. When provided, a <title> element is rendered inside the SVG with the formatted series (e.g. data.map(valueFormatter).join(', ')). Prefixed by tooltipLabel when present. NEVER hardcode currency/locale here — the consumer injects formatting. |
| tooltipLabel | opcional | string | Prefix/label for the tooltip <title> and accessible name. e.g. "Últimas 8 semanas:" — the ui-kit stays language-agnostic. |
| colorByTrend | opcional | boolean | When true, the effective color is derived from data direction: last > first*(1+trendThreshold) → 'green' last < first*(1-trendThreshold) → 'red' otherwise → 'content' Overrides the static `color` prop only when active. Default: false. |
| trendThreshold | opcional | number | Relative threshold used by colorByTrend. Default: 0.1 (10%). Inert unless colorByTrend=true. |
| emptyContent | opcional | ReactNode | Placeholder rendered when data.length===0 or data.every(v=>v===0). When provided, renders this node instead of the SVG. When omitted, renders a muted dotted baseline (aria-hidden) to signal "no data" — replacing the flat centered line that looked like real data. |
Ejemplo del paquete
// `line` normaliza entre mínimo y máximo (interesa la forma).
<Sparkline data={[4, 9, 6, 12, 8]} color="primary" fillArea ariaLabel="Reservas por día" />
// `bars` arranca siempre en cero (interesa la magnitud) — es lo que pide una serie de conteos.
<Sparkline data={[4, 9, 6, 12, 8]} variant="bars" />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.