Saisies utilisateur dans les composants Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Pourquoi des saisies utilisateur ?

Quelques usages utiles des saisies utilisateur :

Filtrer sur une large plage numérique (entrées number)
- Imaginez une liste déroulante avec 2 000 années !
Filtrer par correspondance de texte (entrées search ou text)
Créer une connexion (entrées password et email/text)

Saisie utilisateur dans Dash

Une saisie utilisateur est un Input des dash core components (dcc.Input)

Un id est requis pour l'intégration au callback
type vaut text par défaut
placeholder affiche un texte d'aide estompé

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

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

Utiliser la saisie

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

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

Types de saisie utilisateur

Certaines sont simples : 'text', 'number', 'password', 'email'
D'autres sont plus spécialisées :
- 'range' crée un curseur de plage
- 'tel' et 'url' pour numéros de téléphone et URL de sites
Certaines sont avancées :
- 'search' et 'hidden' impliquent des interactions navigateur avancées

Restreindre la saisie

L'argument type applique automatiquement des limites.

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

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

Un GIF d'un champ de saisie où quelqu'un tape « some-text », puis sort du champ, ce qui provoque un contour rouge indiquant une erreur. La souris revient et ajoute « @gmail.com », ce qui ne génère plus d'erreur en sortant

Restrictions supplémentaires

Un type number n'autorise que des nombres
- En plus : min et max fixent des bornes numériques
- minLength / maxLength pour les entrées text
Un type text propose aussi pattern pour valider via regex

Un GIF d'une petite boîte avec flèches haut/bas à droite. La souris clique pour obtenir 1 puis 0. 249 est tapé sans effet visible, puis 251 est tapé : un contour rouge apparaît, indiquant une erreur.

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

Activer/désactiver une saisie

Désactiver une saisie par code avec disabled

En rendre l'usage obligatoire avec required

Arguments True/False de dcc.Input()

Un GIF d'un champ de saisie rectangulaire dans lequel la souris essaie de cliquer sans y parvenir. Le texte interne est « A disabled input »

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

Un GIF d'un champ de saisie rectangulaire où la souris clique puis sort sans saisir de texte. Un contour rouge apparaît à la sortie, indiquant une erreur. Le texte interne est « A Required input »

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

Quand mettre à jour

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

Filtrage pour R, Re, Red, Redd

Un GIF d'une saisie texte avec l'indication « Filter Product Descriptions ». Le texte est tapé lettre par lettre et le graphique en dessous se réduit à chaque fois : R-E-D-D. À la fin, aucune donnée n'est disponible, signe qu'aucune description ne contient « redd ».

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly