Treemap

Partes de un todo cuando son muchas: cada mosaico tiene el tamaño de su proporción, acomodado para seguir cuadrado.

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

Ejemplos

Almacenamiento por carpeta

El área de cada mosaico es su proporción. Los mosaicos se mantienen lo más cuadrados posible.

Storage used

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-accent-on…
--alea-focus…

Type

--alea-font-family-body…

Motion

--alea-motion-duration-fast…
--alea-motion-duration-slow…
--alea-motion-spring…

Props

`Treemap` props

Partes de un todo cuando son muchas: el área de cada mosaico es su proporción (almacenamiento por carpeta, ingresos por producto).

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`{ label: string; value: number; color?: string \| undefined; }[]`	-	Elementos con un valor; cada uno recibe un área proporcional a él.
`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.
`height`	`number`	`300`	Altura en px. Por defecto 300.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showTable`	`boolean`	`true`	Muestra el botón de tabla. Por defecto true.
`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 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-chart-svgwrap.alea-chart-svg.alea-treemap.alea-treemap-tile.alea-treemap-label.alea-treemap-value
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 muchas partes de un todo, como el gasto por equipo.
Rotula los bloques más grandes y deja el resto en el tooltip y la tabla.

Evitar

No lo uses para comparar valores exactos: usa un gráfico de barras.
No lo uses para valores negativos.