Entrées utilisateur dans les composants Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Pourquoi des entrées utilisateur ?

Quelques usages utiles des entrées utilisateur :

Filtrer sur de grands intervalles numériques (entrées number)
- Imaginez une liste déroulante avec 2 000 valeurs d'année !
Filtrer par correspondance de texte (entrées search ou text)
Créer une connexion (entrées password et email/text)

Entrée utilisateur dans Dash

Une entrée utilisateur est un Input des dash core components (dcc.Input)

Un id est requis pour l'intégration au rappel (callback)
Le type est text par défaut
Le placeholder affiche un texte indicatif estompé

Une petite image d'un rectangle à bordure noire contenant un texte gris estompé « Enter your text »

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

Utiliser l'entrée

L'entrée devient une variable Python
Utilisée avec le rappel (callback)

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

Types d'entrées utilisateur

Certaines sont simples : 'text', 'number', 'password', 'email'
D'autres sont plus spécialisées :
- 'range' produit un curseur d'intervalle
- 'tel' et 'url' servent aux numéros de téléphone et aux adresses de sites Web
Certaines sont avancées :
- 'search' et 'hidden' impliquent des interactions navigateur avancées

Restreindre les entrées

L'argument type impose automatiquement certaines limites.

P. ex., un type email exige le format [email protected]

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

Un gif d'une zone de saisie où quelqu'un entre « some-text », puis la souris quitte la zone, ce qui fait rougir la bordure pour signaler une erreur. La souris revient et ajoute « @gmail.com » à la fin, ce qui ne cause plus d'erreur en sortant

Restrictions supplémentaires

Un type number n'autorise que des nombres
- De plus : min et max fixent des bornes numériques
- minLength / maxLength pour les entrées text
Un type text offre aussi pattern pour la validation par regex

Un gif d'une petite boîte avec des flèches haut/bas à droite. La souris clique pour obtenir 1, puis 0 en cliquant vers le bas. Le nombre 249 est tapé, sans effet visible, puis 251 est tapé, ce qui fait apparaître une bordure rouge indiquant une erreur.

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

Activer/désactiver une entrée

Désactiver une entrée par programmation avec disabled

Rendre son utilisation obligatoire avec required

Arguments True/False de dcc.Input()

Un gif d'une zone de saisie rectangulaire dans laquelle la souris tente de cliquer sans succès. Le texte à l'intérieur est « A disabled input »

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

Un gif d'une zone de saisie rectangulaire où la souris clique dedans puis en sort sans saisir de texte. Une bordure rouge apparaît à la sortie, indiquant une erreur. Le texte à l'intérieur est « A Required input »

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

Quand mettre à jour

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

Filtrer pour R, Re, Red, Redd

Un gif d'une zone de texte avec l'espace réservé « Filter Product Descriptions ». Le texte est saisi une lettre à la fois et le graphique en dessous se met à jour, affichant de moins en moins de données : R-E-D-D. À la fin, aucune donnée disponible : aucune description ne contient « redd ».

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly