componente · @solu30/ui-kit/display
Sparkline
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
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. |