RadialBarChart

Algunas medidas como anillos concéntricos, cada una sobre su propio máximo: metas, cuotas, avance.

import { RadialBarChart } from '@alea/pro';

Ejemplos

Metas como anillos

Algunas medidas lado a lado; pasa el mouse o usa las flechas para leer cada una.

Sprint goals

Design
Frontend
Docs
Tests

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-focus…
--alea-text…
--alea-text-muted…

Type

--alea-font-family-body…
--alea-font-family-display…

Motion

--alea-motion-duration-fast…
--alea-motion-duration-slower…
--alea-motion-ease-out…

Props

`RadialBarChart` props

Avance de algunas cosas lado a lado, como anillos (metas, cuotas, avance por equipo).

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`{ label: string; value: number; max?: number \| undefined; color?: string \| undefined; }[]`	-	Un anillo por elemento: su valor sobre max.
`className`	`string`	-	Clases extra para el elemento raíz.
`description`	`ReactNode`	-	Una oración sobre lo que muestran los datos; se lee antes del gráfico.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showTable`	`boolean`	`true`	Muestra el botón de tabla. Por defecto true.
`size`	`number`	`240`	Tamaño en px. Por defecto 240.
`title`	`ReactNode`	-	El título que se muestra arriba y que leen los lectores de pantalla.
`valueFormat`	`((v: number) => string)`	-	Da formato a los valores (eje, tooltip, tabla).

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.

Estados: Keyboard focus
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-radial.alea-chart-svg.alea-radial-ring.alea-radial-arc.alea-pie-center.alea-pie-caption
Atributos data: data-dim

El gráfico es una figura con su título como nombre y su descripción; la imagen tiene un resumen en texto.
Tab hasta el gráfico, luego las flechas recorren los datos y se anuncia cada valor; Escape sale.
El botón de tabla muestra los mismos datos como tabla real para quien no puede usar la imagen.

Teclado

Tecla	Acción
`Tab`	Enfoca el gráfico
`Izquierda` o `Flecha derecha`	Valor anterior o siguiente
`Inicio` o `Fin`	Primer o último valor
`Escape`	Borra la selección

Qué hacer y qué evitar

Hacer

Úsalo para unas pocas metas, cada una sobre su propio máximo.
Mantenlo en cuatro anillos o menos.

Evitar

No compares anillos por su largo: los interiores se ven más cortos con el mismo valor.