ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Gráficos

Treemap

rx.recharts.treemap

Documentación oficial

Pedido del taller

Muestra en una sola imagen, comparando superficies, cuánto ocupan las fotos, los vídeos y las apps del almacenamiento del móvil.

rx.recharts.treemap toma el total como un rectángulo y lo rellena con rectángulos más pequeños, uno por elemento, con un área proporcional a su valor. Se usa cuando hay tantos elementos que en un gráfico circular las porciones quedarían demasiado pequeñas, o para mostrar datos jerárquicos con subcategorías dentro de categorías.

A diferencia de otros gráficos, se dibuja con un único treemap, sin piezas hijas. data_key es el valor que da el área, name_key es el nombre que se escribe en el rectángulo, y el "fill" de los datos es su color.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

Prueba las propiedades

Los mismos datos tienen dos valores de tamaño (size y visits). Si cambias data_key, cambia el criterio del área y se recalcula la disposición de los rectángulos. Cambia también el tipo de animación.

Prueba las propiedades

data_key

animate

easing

rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    is_animation_active=True,
    animation_easing="ease",
    width="100%",
    height=300,
)

Cada vez que cambias data_key se redibuja con una disposición nueva. Si desactivas is_animation_active, el cambio es inmediato.

Propiedad	Valores	Por defecto	Uso
`data`	lista de dicts	ninguno	Los elementos. Subelementos con `"children"`, color con `"fill"`
`data_key`	cadena	`"value"`	Clave del valor que da el área
`name_key`	cadena	`"name"`	Clave del nombre que se escribe en el rectángulo
`aspect_ratio`	número	automático	Proporción ancho:alto a la que tienden los rectángulos
`width`, `height`	número o porcentaje	`"100%"`	Tamaño. La altura, con un número
`is_animation_active`	`True` / `False`	`True`	Activa la animación
`animation_begin`, `animation_duration`	milisegundos	`0` / `1500`	Retraso inicial y duración
`animation_easing`	`"ease"` `"ease-in"` `"ease-out"` `"ease-in-out"` `"linear"`	`"ease"`	Curva de velocidad
`on_animation_start`, `on_animation_end`	eventos		Inicio y fin de la animación
`on_click` `on_mouse_enter` `on_mouse_leave` …	eventos		Eventos de ratón

Proporción ancho:alto (aspect_ratio)

aspect_ratio es la proporción ancho:alto a la que intenta acercarse cada rectángulo. Con 1 se reparte buscando rectángulos lo más cuadrados posible; con 4, rectángulos alargados en horizontal. Cuanto más cuadrados, más fácil es comparar áreas a simple vista y mejor caben los nombres. En 0.10 solo admite enteros.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.flex(
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=1,
        width="100%",
        height=220,
    ),
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=4,
        width="100%",
        height=220,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Datos jerárquicos (children)

Si un elemento lleva una lista "children", se vuelve a dividir por dentro. El área del padre es la suma de los valores de sus hijos, y los hijos de un mismo padre quedan juntos en un mismo bloque. Abajo hay un ejemplo con productos dentro de tres categorías de alimentación. Cada categoría se pinta con tonos de un mismo color para que se vean los bloques.

rx.recharts.treemap(
    data=[
        {
            "name": "Fruit",
            "children": [
                {"name": "Apple", "size": 1200, "fill": rx.color("red", 8)},
                {"name": "Pear", "size": 600, "fill": rx.color("red", 6)},
                {"name": "Plum", "size": 400, "fill": rx.color("red", 5)},
            ],
        },
        {
            "name": "Veg",
            "children": [
                {"name": "Kale", "size": 900, "fill": rx.color("green", 8)},
                {"name": "Leek", "size": 500, "fill": rx.color("green", 6)},
            ],
        },
        {
            "name": "Grain",
            "children": [
                {"name": "Rice", "size": 1100, "fill": rx.color("amber", 8)},
                {"name": "Oat", "size": 300, "fill": rx.color("amber", 6)},
            ],
        },
    ],
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

Eventos de animación

on_animation_start y on_animation_end se llaman cuando la animación de dibujo empieza y termina. El texto de abajo dice "Drawing..." mientras dura la animación y, al terminar a los 2,5 segundos, cambia a "Done" y el contador entre paréntesis sube en uno.

Animation: Waiting (0)

class TreemapEventState(rx.State):
    status: str = "Waiting"
    rounds: int = 0

    @rx.event
    def started(self):
        self.status = "Drawing..."

    @rx.event
    def ended(self):
        self.status = "Done"
        self.rounds += 1


rx.vstack(
    rx.text("Animation: ", TreemapEventState.status, " (", TreemapEventState.rounds, ")", size="2"),
    rx.recharts.treemap(
        data=[
            {"name": "A", "size": 5, "fill": rx.color("accent", 8)},
            {"name": "B", "size": 3, "fill": rx.color("teal", 8)},
            {"name": "C", "size": 2, "fill": rx.color("orange", 8)},
        ],
        data_key="size",
        name_key="name",
        animation_duration=2500,
        on_animation_start=TreemapEventState.started,
        on_animation_end=TreemapEventState.ended,
        width="100%",
        height=240,
    ),
    width="100%",
)

Completar el pedido

Dibujamos por área los cinco elementos del almacenamiento y dejamos en gris el más pequeño, «Other», para restarle protagonismo. Con aspect_ratio=2 obtenemos rectángulos algo alargados que encajan en pantallas anchas, y acortamos la animación.

rx.recharts.treemap(
    data=[
        {"name": "Photos", "size": 48, "fill": rx.color("indigo", 9)},
        {"name": "Videos", "size": 31, "fill": rx.color("teal", 9)},
        {"name": "Apps", "size": 12, "fill": rx.color("orange", 9)},
        {"name": "Music", "size": 6, "fill": rx.color("plum", 9)},
        {"name": "Other", "size": 3, "fill": rx.color("gray", 8)},
    ],
    data_key="size",
    name_key="name",
    aspect_ratio=2,
    animation_duration=800,
    width="100%",
    height=280,
)

Notas del taller

Se dibuja con un solo treemap(data=…, data_key=…, name_key=…). No necesita piezas hijas.
El color de los rectángulos es el "fill" de los datos; las subcategorías, una lista "children".
aspect_ratio (entero) fija la forma de los rectángulos. Cuanto más cerca de 1, más fácil comparar.
Animación con is_animation_active, animation_duration y animation_easing; al terminar, on_animation_end.
Si hay pocos elementos, un gráfico circular o de barras se lee mejor.

← Anterior

Gráficos · Funnel Chart

Gráficos · Sankey Chart

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex