Entradas do usuário em componentes do Dash

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

Por que entrada do usuário?

Algumas aplicações úteis de entradas do usuário:

Filtrar em um grande intervalo numérico (entradas number)
- Imagine um dropdown com 2000 valores de ano!
Filtrar por correspondência de texto (entradas search ou text)
Criar um login (entradas password e email/text)

Entrada do usuário no Dash

Uma entrada é um Input dos dash core components (dcc.Input)

Um id é obrigatório para integração em callbacks
O type tem padrão text
O placeholder mostra um texto-guia apagado

Uma pequena imagem de um retângulo com borda preta e, dentro, um texto cinza apagado "Enter your text"

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

Usando a entrada

A entrada vira uma variável em Python
Usada com o 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 do usuário

Algumas são diretas: 'text', 'number', 'password', 'email'
Outras são mais especializadas:
- 'range' produz um controle deslizante de intervalo
- 'tel' e 'url' são para telefones e URLs de sites
Algumas são avançadas:
- 'search' e 'hidden' envolvem interação avançada do navegador

Restringindo a entrada

O argumento type define limitações automaticamente.

Ex.: o tipo email exige formato [email protected]

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

Um gif de uma caixa de entrada onde alguém digita 'some-text'; ao sair da caixa, a borda fica vermelha indicando erro. O mouse volta e adiciona '@gmail.com' ao final, e não ocorre erro ao sair

Restrições adicionais

O tipo number só permite números
- Além disso: min e max definem limites numéricos
- minLength / maxLength para entradas text
O tipo text também tem pattern para validação com regex

Um gif de uma pequena caixa com setas para cima/baixo à direita. O mouse clica e aparece 1; ao clicar para baixo vira zero. Digita-se 249 e nada acontece; depois 251, e a caixa fica vermelha indicando erro.

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

Alternando uma entrada

Desative uma entrada programaticamente com disabled

Torne-a obrigatória com required

Argumentos True/False de dcc.Input()

Um gif de uma caixa de entrada que o mouse tenta clicar mas não consegue. O texto dentro é "A disabled input"

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

Um gif de uma caixa de entrada que o mouse clica e sai sem digitar. Uma borda vermelha aparece indicando erro. O texto dentro é "A Required input"

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

Quando atualizar

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

Filtrando por R, Re, Red, Redd

Um gif de uma entrada de texto com o placeholder 'Filter Product Descriptions'. O texto é digitado letra a letra e o gráfico abaixo reduz os dados a cada letra: R-E-D-D. Ao final, não há dados, indicando que nenhuma descrição contém "redd".

Vamos praticar!

Construindo Dashboards com Dash e Plotly