PieChart y DonutChart

Partes de un todo, con la proporción de cada porción en la leyenda y el total en el centro.

import { PieChart, DonutChart } from '@alea/pro';

Ejemplos

Dona con total

La proporción de cada porción está en la leyenda; el total va en el centro.

Sessions by source

Same data as a pie

Dona pequeña

Una proporción compacta con su propio número en el centro.

Plan mix

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

Space

--alea-space-6…

Type

--alea-font-family-body…
--alea-font-family-display…
--alea-font-size-sm…

Motion

--alea-motion-duration-base…
--alea-motion-duration-fast…
--alea-motion-duration-slow…
--alea-motion-ease-out…
--alea-motion-spring…

Component

--alea-dx…
--alea-dy…

Props

`PieChart` props

Partes de un todo. Limítalo a seis porciones o menos; la leyenda muestra cada proporción.

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`{ label: string; value: number; color?: string \| undefined; }[]`	-	Porciones: label y value (y un color opcional).
`centerCaption`	`ReactNode`	-	Texto pequeño bajo el número central de una dona. Por defecto "Total".
`centerLabel`	`ReactNode`	-	Texto grande en el centro de la dona. Por defecto el total.
`className`	`string`	-	Clases extra para el elemento raíz.
`description`	`ReactNode`	-	Una oración sobre lo que muestra el gráfico; se lee antes.
`innerRadius`	`number`	`0`	Radio interior como proporción del radio: 0 es un pie (por defecto), alrededor de 0.6 es una dona.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showTable`	`boolean`	`true`	Muestra el botón "ver como tabla". Por defecto true.
`size`	`number`	`220`	Tamaño en px. Por defecto 220.
`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 en el eje, el tooltip y la tabla, por ejemplo v => `${v}k`.

`DonutChart` props

Un PieChart con un agujero: las mismas props.

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`{ label: string; value: number; color?: string \| undefined; }[]`	-	Porciones: label y value (y un color opcional).
`centerCaption`	`ReactNode`	-	Texto pequeño bajo el número central de una dona. Por defecto "Total".
`centerLabel`	`ReactNode`	-	Texto grande en el centro de la dona. Por defecto el total.
`className`	`string`	-	Clases extra para el elemento raíz.
`description`	`ReactNode`	-	Una oración sobre lo que muestra el gráfico; se lee antes.
`innerRadius`	`number`	-	Radio interior como proporción del radio: 0 es un pie (por defecto), alrededor de 0.6 es una dona.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showTable`	`boolean`	-	Muestra el botón "ver como tabla". Por defecto true.
`size`	`number`	-	Tamaño en px. Por defecto 220.
`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 en el eje, el tooltip y la tabla, por ejemplo v => `${v}k`.

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 focusPressed (CSS)
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-pie.alea-chart-svg.alea-pie-slice.alea-pie-center.alea-pie-caption.alea-pie-legend.alea-chart-swatch.alea-pie-name
Atributos data: data-dim

Su nombre incluye cada porción y su proporción.

Teclado

Tecla	Acción
`Tab`	Enfoca el gráfico
`Flechas`	Lee cada porción
`Escape`	Oculta el tooltip

Qué hacer y qué evitar

Hacer

Seis porciones o menos; agrupa el resto como Otros.

Evitar

No compares porciones entre dos tortas: usa un gráfico de barras.
No lo uses cuando las partes no suman un todo.