'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
GráficosAlea Pro
Sparkline y Gauge
Una pequeña línea de tendencia para tablas y tarjetas de estadísticas, y un medidor de media circunferencia para una medida.
import { Sparkline, Gauge } from '@alea/pro';
Ejemplos
Sparklines y gauges
Tendencias pequeñas para tarjetas de estadísticas, y un medidor para una puntuación.
Visits
9,612
Errors
23
92Accessibility score
64%Storage used
En una tabla
Sparklines junto a los números que resumen.
Plugin | Users | Last 7 days |
|---|---|---|
| Contrast Checker | 3,410 | |
| Palette Generator | 1,240 | |
| Type Scale | 860 |
Props
Sparkline props
Una pequeña línea de tendencia para tablas y tarjetas de estadísticas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | string | - | Lo que muestra, leído por los lectores de pantalla ("Visitas, últimos 14 días"). |
valuesobligatoria | number[] | - | Los números, del más viejo al más nuevo. |
color | string | 'var(--alea-chart-1)' | Color de la línea o las barras. Por defecto el primer color de gráficos. |
height | number | 32 | Altura en px. Por defecto 32. |
type | "area" | "line" | "bar" | 'line' | line (por defecto), area o bar. |
width | number | 120 | Ancho en px. Por defecto 120. |
Gauge props
Un medidor de media circunferencia para una sola medida: puntuación, carga, cuota.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | string | - | La etiqueta visible bajo el número. |
valueobligatoria | number | - | El valor actual. |
max | number | 100 | El máximo de la escala. Por defecto 100. |
min | number | 0 | El mínimo de la escala. Por defecto 0. |
size | number | 200 | Ancho en px. Por defecto 200. |
thresholds | { upTo: number; tone: "danger" | "accent" | "success" | "warning"; }[] | - | Colores por rango: [{ upTo: 60, tone: 'success' }, ...]. |
valueFormat | ((v: number) => string) | - | Da formato al número del centro, por ejemplo v => `${v}%`. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Sparkline
- Variantes
typearealinebar- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-sparkline
Gauge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-gauge.alea-gauge-arc.alea-gauge-text.alea-gauge-value.alea-gauge-label
Accesibilidad
- Sparkline es una imagen con la tendencia como nombre; Gauge es un meter con su valor.
Qué hacer y qué evitar
Hacer
- Acompaña una sparkline con el número actual (Statistic).
- Usa la misma escala en las sparklines que comparas.
Evitar
- No agregues ejes ni tooltips: usa LineChart para eso.
- No uses un gauge para valores sin un máximo con sentido.