Componentes interactivos

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

Mejorar la interactividad

Componentes interactivos útiles:
- dcc.Checklist() = Casillas
- dcc.RadioItems() = Botones de opción
- dcc.Slider() / dcc.RangeSlider() = Deslizadores
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Como deslizadores pero para fechas

Deslizadores

Slider: arrastra para un único valor

Range Slider: arrastra para dos valores

Recuerda: puede enlazarse a un callback
- Para actualizar gráficos o componentes

Un deslizador:

Un gif de un deslizador azul sobre fondo negro con texto debajo que muestra el valor seleccionado. El ratón mueve la perilla y el valor aumenta.

Un deslizador de rango:

Un gif de un deslizador de rango azul sobre fondo negro con texto debajo que muestra los dos valores seleccionados. El ratón mueve cada extremo y los valores cambian.

Deslizadores en Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Argumentos clave:

min/max : Límites del deslizador
value : Selección inicial
step : Incremento por muesca
vertical : Orientación horizontal o vertical

Selectores de fecha en Dash

DatePickerSingle: Selecciona una fecha

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = selección inicial
initial_visible_month = mes mostrado en el popup
Puedes limitar min_date_allowed y max_date_allowed

Un gif de un selector de fecha típico. Hay un campo con el 1 de julio de 2025. Al hacer clic, aparece un calendario. Se selecciona el 2 de julio de 2025; el calendario se cierra y la fecha del selector cambia.

Selector de rango de fechas

Similar a DatePickerSingle

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Define start_date y end_date iniciales

Un gif de un selector de fechas típico. Hay dos campos de fecha con días de julio de 2025 seleccionados. El ratón hace clic en el segundo campo; aparece un calendario ya resaltado en verde para todos los días del rango y luego se elige un nuevo rango, cambiando las fechas

Actualización de gráficos

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Create fig
    return fig

¡Vamos a practicar!

Creación de paneles con Dash y Plotly