Todos los componentes (204)

Gráfico de anillo

Datos · DonutChart · .amset-donut

Qué es y cuándo usarlo

El reparto de un total en un anillo: de qué se componen las ventas, el espacio usado o los pedidos por estado. Con el total en el centro y una leyenda con nombre, valor y porcentaje al lado de cada color.

Cuándo usarlo

Para enseñar cómo se reparte un total entre pocas partes (de 2 a 6); más partes no se distinguen.
center para cambiar la cifra grande (por defecto, el total) y footerCenter para lo pequeño de debajo («este mes»).
tone en una porción para darle su color, del vocabulario común; sin él, van rotando los seis: accent, success, warning, error, info y neutral.
format para escribir los valores; sin él, números en el idioma del LocaleProvider. Los porcentajes van siempre en ese idioma («66,67 %»).
legend={false} quita la leyenda y tableVisible enseña la tabla de datos también a la vista.

Cuándo no

Para comparar cantidades entre sí, sin que sean partes de un todo: BarChart.
Para la evolución en el tiempo: Trend.
Para cuánto se ha llenado algo con un máximo (cuota, espacio): Gauge.

Teclado: no tiene: no hay nada que pulsar.

Accesibilidad: el anillo es un SVG con role="img" y un title con el resumen escrito («4 partes, total 8830 €. La mayor, Tienda en línea, …»). La leyenda es decorativa porque repite la tabla de datos, que está siempre para el lector de pantalla con valor y porcentaje de cada parte. El centro va fuera del SVG, así que el texto no se escala con el dibujo.

Aspecto fino: variables CSS --amset-donut-*: -dot, -figure, -footer, -gap, -legend, -legend-width, -size. El tamaño mueve el lado del dibujo (7.5, 10 o 13.75 rem), la cifra del centro y la leyenda; diameter sigue mandando si se pasa.

Cómo se ve

Reparto de pagos
Parte	Valor	Porcentaje
Tarjeta	64	64 %
Transferencia	24	24 %
Contra reembolso	12	12 %

<DonutChart
  label="Reparto de pagos"
  slices={[
    { key: 'tarjeta', label: 'Tarjeta', value: 64 },
    { key: 'transfer', label: 'Transferencia', value: 24, tone: 'info' },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que se reparte. Obligatoria: un anillo sin titulo no dice nada.
`slices`obligatoria	`readonly DonutSlice[]`	—
`center`	`string`	Texto grande del centro. Por defecto, el total.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`diameter`	`number`	Diametro del anillo en pixeles (160 por defecto). No se llama `size` porque no es el `sm`/`md`/`lg` del vocabulario comun: es una medida.
`footerCenter`	`string`	Lo pequeño de debajo del centro.
`format`	`(value: number) => string`	—
`legend`	`boolean`	Enseña la leyenda al lado. La tabla esta siempre para el lector.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	—

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-donut-size`	`10rem`
`--amset-donut-gap`	`var(--amset-space-5)`
`--amset-donut-figure`	`var(--amset-text-xl)`
`--amset-donut-footer`	`var(--amset-text-xs)`
`--amset-donut-legend`	`var(--amset-text-sm)`
`--amset-donut-legend-width`	`10rem`
`--amset-donut-dot`	`0.625rem`

Cómo se cambia

.amset-donut {
  --amset-donut-size: ...;
  --amset-donut-gap: ...;
}

En el banco de pruebas

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