Entradas de usuario en componentes Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

¿Por qué entradas de usuario?

Aplicaciones útiles de entradas de usuario:

Filtrar en un rango grande (number)
- Imagina un desplegable con 2000 años
Filtrar por coincidencia de texto (search o text)
Crear un login (password y email/text)

Entrada de usuario en Dash

Una entrada de usuario es un Input de dash core components (dcc.Input)

Se requiere un id para callbacks
type por defecto es text
placeholder muestra una guía tenue

Una pequeña imagen de un rectángulo con borde negro y texto gris tenue "Enter your text"

dcc.Input(
    id='my_input',
    type='text',
    placeholder="Enter your text")

Usar la entrada

La entrada se convierte en variable de Python
Se usa con el callback

# @callback()
def update_plot(entered_data):
    fig = px.scatter(
    data_frame=sales, 
    y='OrderValue', x='Quantity',
    , title=f'{entered_data}')
    return fig

Tipos de entrada de usuario

Algunas son directas: 'text', 'number', 'password', 'email'
Otras más especializadas:
- 'range' crea un range slider
- 'tel' y 'url' son para teléfonos y URLs
Otras avanzadas:
- 'search' y 'hidden' implican interacción avanzada del navegador

Restringir la entrada

El argumento type aplica limitaciones automáticas.

P. ej., el tipo email requiere formato [email protected]

dcc.Input(
    id='my_input',
    type='email',
    placeholder="Enter your email")

Un gif de una caja de texto donde alguien escribe 'some-text'; al salir con el ratón, el borde se pone rojo indicando error. Luego vuelve y añade '@gmail.com' al final; ya no hay error al salir

Restricciones adicionales

El tipo number solo permite números
- Además: min y max fijan límites numéricos
- minLength / maxLength para entradas text
El tipo text también tiene pattern para validación con regex

Un gif de una caja pequeña con flechas arriba/abajo a la derecha. El ratón hace clic y aparece 1; luego baja a 0. Se teclea 249 sin cambio; al teclear 251, el borde se pone rojo indicando error.

dcc.Input(
    id='my_input',
    type='number',
    max=250)

Activar/desactivar una entrada

Desactiva una entrada por código con disabled

Obliga su uso con required

Argumentos True/False de dcc.Input()

Un gif de una caja de entrada rectangular a la que el ratón intenta entrar pero no puede. El texto dentro dice "A disabled input"

dcc.Input(id='my_input', disabled=True)

Un gif de una caja de entrada rectangular en la que el ratón hace clic y sale sin escribir. Al salir, aparece un borde rojo indicando error. El texto dentro dice "A Required input"

dcc.Input(id='my_input', required=True)

Cuándo actualizar

dcc.Input(id='my_input', type='text',
          debounce=False)

Filtra por R, Re, Red, Redd

Un gif de una entrada de texto con el placeholder 'Filter Product Descriptions'. Se escribe letra a letra y el gráfico debajo muestra menos datos cada vez: R-E-D-D. Al final no hay datos disponibles, indicando que ninguna descripción contiene redd

¡Vamos a practicar!

Creación de paneles con Dash y Plotly