Todos los componentes (204)
Tendencia
Superficies · Trend
Qué es y cuándo usarlo
La línea pequeña de un cuadro de mando: cómo ha ido algo estos siete días. Lo importante no es el dibujo, es que no es un dibujo mudo: lleva un resumen escrito y, debajo, una tabla de datos de verdad.
Cuándo usarlo
- Junto a una cifra (
Stat) para enseñar la forma: si sube, si baja, si se queda igual. pointsnombra cada valor (días, meses) en la tabla; sin él, se numeran.formatescribe los valores a tu manera (euros, unidades); por defecto, el número con el idioma activo.tableVisibleenseña también la tabla, para quien prefiere leer los números.paddingsombrea por debajo de la línea;markLast(activo por defecto) marca el último valor con un punto.
Cuándo no
- Comparar categorías o leer valores exactos:
BarChart. - El reparto de un total:
DonutChart. - La actividad día a día de todo un año:
ActivityMap.
Teclado: no es enfocable.
Accesibilidad: el dibujo es role="img" y se llama con la label y un resumen escrito («De 120 a 180: sube un 50 %. Mínimo 96, máximo 180.»). Debajo hay una tabla con caption y cabeceras de fila y de columna, siempre disponible para el lector de pantalla y oculta a la vista salvo con tableVisible. La etiqueta a la vista, si hace falta, la pone quien lo coloca. Con todos los valores iguales la línea sale por el medio: una racha sin cambios no es un máximo.
Aspecto fino: sin variables propias: se ajusta con las clases amset-trend y amset-trend--<tone>. La línea, el relleno y el punto usan currentColor. El ancho lo pone el contenedor; el alto, height (40 px por defecto).
Contexto: sin format, los números se escriben con el idioma de LocaleProvider (o de AmsetProvider).
Cómo se ve
| Punto | Valor |
|---|---|
| lun 5 | 18 |
| mar 6 | 22 |
| mié 7 | 19 |
| jue 8 | 27 |
| vie 9 | 31 |
| sáb 10 | 42 |
| dom 11 | 36 |
| Punto | Valor |
|---|---|
| lun 5 | 1240 € |
| mar 6 | 1180 € |
| mié 7 | 1390 € |
| jue 8 | 1310 € |
| vie 9 | 1520 € |
| sáb 10 | 1740 € |
| dom 11 | 1860 € |
| Punto | Valor |
|---|---|
| lun 5 | 3 |
| mar 6 | 2 |
| mié 7 | 4 |
| jue 8 | 3 |
| vie 9 | 5 |
| sáb 10 | 7 |
| dom 11 | 8 |
<Trend label="Pedidos de la semana" values={[18, 22, 19, 27, 31, 42, 36]} points={dias} markLast />
<Trend label="Ventas de la semana" values={ventas} format={enEuros} padding tone="success" />
<Trend label="Devoluciones de la semana" values={[3, 2, 4, 3, 5, 7, 8]} tone="error" />Props
Se importa con import { Trend } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
labelobligatoria | string | Que se esta midiendo. Obligatoria: una linea sin nombre no dice nada. |
valuesobligatoria | readonly number[] | — |
className | string | Se une a las clases de la biblioteca, no las sustituye. |
format | (value: number) => string | Como se escriben los valores. Por defecto, el numero con el idioma activo. |
height | number | — |
markLast | boolean | Un punto gordo en el ultimo valor. |
padding | boolean | Sombrea por debajo de la linea. |
points | readonly string[] | Como se llama cada punto (fechas, meses). Sale en la tabla de datos. |
tableVisible | boolean | Enseña tambien la tabla. Para el lector de pantalla esta siempre. |
tone | "neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | El color de la linea. `neutral` es el gris de la tinta secundaria. Por defecto, `accent`. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: