'/%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}
Datos
UptimeBar
La historia reciente de un servicio en barras finas, una por día: verde cuando funcionó, ámbar cuando fue lento, rojo cuando estuvo caído.
import { UptimeBar } from '@alea/ui';
Ejemplos
Una página de estado
Una barra por día. La barra entera se lee como una frase con la disponibilidad y los días malos.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-surface-raised…
Props
UptimeBar props
La historia reciente de un servicio en barras finas, una por día: verde, ámbar cuando fue lento, rojo cuando estuvo caído. Se lee como una frase.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
daysobligatoria | "ok" | "degraded" | "down" | "none"[] | - | Un estado por día (u hora), del más antiguo al más reciente. |
labelobligatoria | string | - | Lo que mide: "API gateway". |
className | string | - | Clases extra para el elemento raíz. |
unit | string | 'day' | Lo que es cada barra: "day" (por defecto) o "hour". |
uptime | number | - | La disponibilidad a decir, p. ej. 99.98 (por ciento). Sin ella la barra se describe por sus incidentes. |
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.
- Variantes
daysokdegradeddownnone"[]- 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-uptime- Atributos data
data-state=degradeddata-state=downdata-state=none
Accesibilidad
- Una imagen que se lee como una frase: el servicio, su disponibilidad y cuántos días fue lento o estuvo caído.
- Los estados difieren en color y se resumen en texto, nunca solo con color.
Qué hacer y qué evitar
Hacer
- Muestra de 30 a 90 días.
- Pon el estado actual como texto al lado.
Evitar
- No lo uses para valores que no sean un estado por periodo: usa Sparkline.
En Figma
Uptime bar con Days (30, 45, 90).