Todos los componentes (204)

Dato resumen

Superficies · Stat · .amset-stat

Qué es y cuándo usarlo

El número grande de un cuadro de mando, con su variación. La variación lleva flecha, signo y la palabra («sube», «baja») además del color: el verde y el rojo se los pierde mucha gente, y en una impresión no existen.

Cuándo usarlo

Las cifras de cabecera de un panel: ventas del mes, pedidos, ticket medio, devoluciones.
trend.value va en tanto por uno (0.124 es un 12,4 %) y trend.period dice con qué se compara («vs. mes pasado»). trend.goodDirection dice hacia dónde es bueno: en ventas, top (por defecto); en gastos o devoluciones, bottom. Sin él, el verde y el rojo mienten la mitad de las veces.
detail para una segunda línea pequeña; icon y tone para el icono (el tono no cambia el color de la cifra).
href convierte la etiqueta en un enlace al detalle.
loading mientras llega el dato: guarda el sitio del número y de la variación (con el brillo del Skeleton) en vez de enseñar un cero falso, así que la tarjeta no pega un salto al llegar.
size: la cifra en 20, 28 (por defecto) o 36 px.

Cuándo no

Cómo ha ido la cifra día a día: Trend (la línea) o BarChart.
Un nivel sobre un máximo (cuota, stock): Gauge.
Varios pares de etiqueta y valor (la ficha de un cliente): DataList.

Teclado: no es enfocable, salvo con href: entonces la etiqueta es un enlace con su parada de Tab, e Intro lo sigue.

Accesibilidad: la variación se escribe con signo y en el formato del idioma («+12,4 %»), seguida de la palabra y del periodo; la flecha y el icono son decorativos. Con loading el bloque lleva aria-busy y en lugar del valor y de la variación van sus huecos, que son decorativos. El value llega ya escrito: el componente no lo formatea.

Aspecto fino: variables CSS --amset-stat-*: -figure (el cuerpo del número), -font (el de la etiqueta y la variación), -icon, -icon-drawing, -icon-background y -icon-ink (el tono solo colorea el icono). La cabecera mide siempre lo que el icono, lleve icono o no: en una fila de cifras, los números quedan a la misma altura.

Contexto: la variación se escribe con el idioma de LocaleProvider (o de AmsetProvider).

Cómo se ve

12.480 €

+8,4 %sube

De 128 del mes

<Stat label="Facturado este mes" value="12.480 EUR" trend={{ value: 0.084, goodDirection: 'top' }} />
<Stat label="Pedidos sin pagar" value="4" tone="warning" detail="De 128 del mes" />

Props

Se importa con import { Stat } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que se esta midiendo: "Ventas del mes".
`value`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`detail`	`ReactNode`	Segunda linea pequeña: un total, una nota.
`href`	`string`	Convierte el titulo en enlace al detalle.
`icon`	`ReactNode`	—
`loading`	`boolean`	Mientras llega el dato: se marca ocupado en vez de enseñar un cero falso, y guarda el sitio de la cifra y de la variacion para no pegar un salto.
`size`	`"sm" \| "md" \| "lg"`	El cuerpo de la cifra: 20, 28 o 36 px.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	El color del icono. No cambia el de la cifra. Por defecto, `neutral`.
`trend`	`StatChange`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-stat-figure`	`1.75rem`
`--amset-stat-font`	`var(--amset-text-sm)`
`--amset-stat-icon`	`1.75rem`
`--amset-stat-icon-drawing`	`1rem`
`--amset-stat-icon-background`	`var(--amset-divider)`
`--amset-stat-icon-ink`	`var(--amset-ink-2)`

Cómo se cambia

.amset-stat {
  --amset-stat-figure: ...;
  --amset-stat-font: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: