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

Piezas de gráficos

Brush

rx.recharts.brush

Documentación oficial

Pedido del taller

Mete en una sola gráfica los pedidos de 30 días, pero que al principio solo se vea en grande la última semana y que el tramo se pueda mover con unos tiradores.

rx.recharts.brush es una barra de selección de rango que va bajo la gráfica. Arrastrando los tiradores de ambos lados eliges el rango de datos que quieres ver, y la gráfica de arriba dibuja en grande solo ese rango. Se usa cuando hay tantos puntos de datos que no caben en una pantalla. Va como hijo de gráficas de líneas, de barras, de áreas o compuestas.

import math

brush_data = [
    {"name": str(i), "uv": round(300 * math.sin(i / 3)), "pv": round(250 + 300 * math.cos(i / 5))}
    for i in range(1, 41)
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=300,
)

El valor de data_key aparece como texto junto a los tiradores. Si arrastras el tramo gris del centro, el rango se desplaza sin cambiar de longitud.

Prueba las propiedades

Desde el ejemplo de abajo se reutiliza tal cual el brush_data creado arriba.

Prueba las propiedades

data_key

stroke

fill

rx.recharts.line_chart(
    rx.recharts.line(data_key="uv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", stroke=rx.color("indigo", 9), fill=rx.color("gray", 3)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=280,
)

stroke es el color del borde y de los tiradores; fill, el del fondo. Si cambias data_key, cambia el texto junto a los tiradores.

Propiedad	Valores	Por defecto	Uso
`data_key`	nombre de columna	-	Valor que se muestra junto a los tiradores
`start_index` · `end_index`	índice en los datos	`0` · el último	Rango elegido al principio
`height`	número	`40`	Altura de la barra
`traveller_width`	número	`5`	Ancho de los tiradores (traveller)
`gap`	número	`1`	Cada cuántas posiciones se vuelve a dibujar la gráfica
`stroke` · `fill`	color	`rx.color("gray", 9)` · `rx.color("gray", 2)`	Color del borde y los tiradores, color del fondo
`x` · `y` · `width`	número	automático	Posición y ancho de la barra. Normalmente los calcula la gráfica
`data`	lista	el data de la gráfica	Datos originales que usa el brush
`on_change`	evento	-	Cuando cambia el rango (en 0.10, sin argumentos)

Rango inicial y tamaño de los tiradores

start_index y end_index son el rango elegido al principio. Son índices de los datos (desde 0), así que abajo se ven los puntos 4.º a 11.º. traveller_width es el ancho de los tiradores: cuanto más anchos, más fáciles de agarrar.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(
        data_key="name",
        traveller_width=15,
        start_index=3,
        end_index=10,
        stroke=rx.color("mauve", 10),
        fill=rx.color("mauve", 3),
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=200,
)

gap es el intervalo con que se vuelve a dibujar la gráfica de arriba. Con gap=5, la gráfica se actualiza una vez cada cinco posiciones que se mueve el tirador, así que con muchísimos puntos se redibuja con menos frecuencia.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", gap=5, height=24, traveller_width=10, end_index=19),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=240,
)

Cuando cambia el rango: on_change

on_change ocurre cada vez que mueves un tirador. En Reflex 0.10 este evento no pasa el rango nuevo (en la tabla de la documentación oficial la descripción también está vacía), así que solo puedes saber que «se ha movido». Para que no llueva una avalancha de eventos mientras arrastras, le hemos puesto debounce al handler.

Brush moved 0 times

brush_days = [{"day": f"D{i}", "orders": 40 + (i * 37) % 60} for i in range(1, 31)]


class BrushMoveState(rx.State):
    moves: int = 0

    @rx.event(debounce=300)
    def moved(self):
        self.moves += 1


rx.vstack(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("accent", 8)),
        rx.recharts.brush(data_key="day", height=26, on_change=BrushMoveState.moved),
        rx.recharts.x_axis(data_key="day"),
        data=brush_days,
        width="100%",
        height=240,
    ),
    rx.text("Brush moved ", BrushMoveState.moves, " times", size="2"),
    width="100%",
)

Completar el pedido

Metemos los 30 días y, con start_index=23 y end_index=29, al principio solo se ve la última semana. Se usa el brush_days de arriba.

rx.recharts.composed_chart(
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 7)),
    rx.recharts.line(data_key="orders", stroke=rx.color("orange", 9), dot=False, legend_type="none"),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.brush(
        data_key="day",
        start_index=23,
        end_index=29,
        height=28,
        traveller_width=10,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 2),
    ),
    data=brush_days,
    width="100%",
    height=300,
)

Notas del taller

Si pones brush como hijo de una gráfica de líneas, barras o áreas, aparece debajo una barra de selección de rango.
data_key es el texto junto a los tiradores; start_index y end_index, el rango inicial (índices).
height y traveller_width para el tamaño, stroke y fill para el color, gap para el intervalo de redibujado.
En 0.10, on_change no pasa el rango: solo sabes que se ha movido.

← Anterior

Piezas de gráficos · Reference

Otras bibliotecas de gráficos · Plotly

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