Interactivité avancée

  • updatemenus()

    L'option updatemenus permet de créer des menus interactifs tels que des boutons ou des sélecteurs dans un graphique Plotly pour modifier dynamiquement certains éléments du graphique, comme le type de graphique, les axes ou les couleurs. Ces menus peuvent être utilisés sans nécessiter de Dash ou d'autres frameworks externes.

    Importation :
    import plotly.graph_objects as go
    Attributs :
    Paramètre Type Description Valeur par défaut
    buttons list Liste de boutons définissant l’action de mise à jour. []
    direction str La direction dans laquelle les boutons seront disposés. Peut être ‘left’, ‘right’, ‘down’, ou ‘up’. 'down'
    showactive bool Indique si le bouton actif doit être mis en surbrillance. True
    x float Position horizontale du menu sur le graphique. 0.5
    y float Position verticale du menu sur le graphique. 1.05
    active int Index du bouton actif au départ. 0
    Exemple de code :
    import plotly.graph_objects as go
import pandas as pd

# Création d'un DataFrame simple
df = pd.DataFrame({
    'X': [1, 2, 3, 4, 5],
    'Y': [10, 11, 12, 13, 14]
})

# Créer un graphique de base
fig = go.Figure()

# Ajouter une courbe linéaire initiale
fig.add_trace(go.Scatter(x=df['X'], y=df['Y'], mode='lines', name='Ligne'))

# Ajouter un bouton pour changer le type de graphique
fig.update_layout(
    updatemenus=[
        {
            'buttons': [
                {
                    'label': 'Ligne',
                    'method': 'relayout',
                    'args': [{'xaxis.title': 'X', 'yaxis.title': 'Y'}]
                },
                {
                    'label': 'Barres',
                    'method': 'relayout',
                    'args': [{'type': 'bar'}]
                }
            ],
            'direction': 'down',  # Menu déroulant
            'showactive': True,  # Mettre en surbrillance l'élément actif
            'active': 0,  # État initial du bouton actif
            'x': 0.17,  # Positionnement du menu horizontalement
            'xanchor': 'left',  # Alignement du menu
            'y': 1.15,  # Positionnement vertical
            'yanchor': 'top',  # Alignement du menu
        }
    ]
)

# Afficher le graphique
fig.show()
    Explication du code :

    1. Création d’un graphique de base :

      • Un graphique est créé avec une courbe linéaire (mode 'lines'), où les données X et Y sont extraites d’un DataFrame simple.

    2. Utilisation de updatemenus :

      • La clé updatemenus est utilisée pour ajouter un menu interactif avec des boutons pour changer le type de graphique entre une courbe linéaire et un graphique en barres.

      • Les boutons définissent l’action à effectuer :

        • Le bouton « Ligne » réinitialise l’affichage des axes.

        • Le bouton « Barres » modifie le type de graphique en barres.

    3. Positionnement et affichage du menu :

      • Le menu est affiché sous forme de liste déroulante (direction: 'down') et est positionné sur le graphique grâce aux paramètres x et y.

    Remarques :

    • updatemenus est particulièrement utile pour ajouter des contrôles interactifs directement dans le graphique Plotly, ce qui améliore l’interactivité sans avoir besoin de frameworks externes comme Dash.

    • Les boutons peuvent être configurés pour effectuer une variété d’actions, allant de la modification des données affichées à des ajustements visuels comme les axes, les couleurs, et même la disposition du graphique.

  • Filtrage dynamique avec Dash (curseur ou dropdown)

    Le filtrage dynamique dans Dash permet aux utilisateurs de filtrer et d'explorer les données en temps réel en fonction de leurs besoins, sans avoir à recharger la page. Cela se fait généralement en combinant des composants interactifs, tels que des curseurs, des listes déroulantes, des cases à cocher, et des graphiques. Le résultat du filtrage est souvent affiché dans des graphiques ou des tableaux mis à jour en temps réel.

    Importation :
    Attributs :
    Exemple de code :
    Explication du code :

  • dcc.Slider (curseur numérique)

    dcc.Slider est un composant Dash qui permet de créer un curseur numérique, permettant à l'utilisateur de sélectionner une seule valeur dans une plage définie. Il est idéal pour des cas où l'utilisateur doit choisir une valeur numérique, comme dans des graphiques, des paramètres ou des contrôles de seuil.

    Importation :
    import dash_core_components as dcc
    Attributs :
    Paramètre Type Description Valeur par défaut
    min int ou float La valeur minimale possible du curseur. 0
    max int ou float La valeur maximale possible du curseur. 100
    step int ou float La valeur par laquelle le curseur est ajusté (ex : 1, 0.1, etc.). 1
    marks dict Dictionnaire où chaque clé est une valeur et la valeur correspondante est l’étiquette à afficher pour cette valeur sur le curseur. {}
    value int ou float La valeur initiale du curseur. 0
    id str Identifiant unique pour le composant, nécessaire pour l’interaction avec les callbacks. None
    disabled bool Permet de désactiver l’interaction avec le composant (le curseur devient non interactif). False
    Exemple de code :
    import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Initialisation de l'application Dash
app = dash.Dash(__name__)

# Mise en place du layout avec un dcc.Slider pour une valeur numérique
app.layout = html.Div([
    dcc.Slider(
        id='slider',
        min=0,
        max=100,
        step=1,
        marks={i: str(i) for i in range(0, 101, 10)},  # Marque les multiples de 10
        value=50  # Valeur initiale du curseur
    ),
    html.Div(id='output-slider')
])

# Callback pour mettre à jour l'affichage en fonction de la valeur sélectionnée
@app.callback(
    Output('output-slider', 'children'),
    [Input('slider', 'value')]
)
def update_output(value):
    return f'Valeur sélectionnée : {value}'

# Lancer l'application
if __name__ == '__main__':
    app.run_server(debug=True)
    Explication du code :

    1. Création du composant Slider : Le dcc.Slider crée un curseur numérique avec une plage de valeurs allant de 0 à 100, avec des étapes de 1. Des marques sont affichées tous les 10 unités sur le curseur. La valeur initiale du curseur est définie à 50.

    2. Callback Dash : Un callback est utilisé pour afficher la valeur sélectionnée par l’utilisateur dans un html.Div. La valeur du curseur est récupérée via Input('slider', 'value').

    3. Affichage dynamique : La valeur du curseur est mise à jour en temps réel dans l’interface, et l’utilisateur voit la valeur sélectionnée dans le Div.

    Remarque importante :

    • Plage et étape : Vous pouvez ajuster les valeurs de min, max et step en fonction de vos besoins. Par exemple, si vous utilisez un slider pour choisir un pourcentage, vous pouvez définir min=0, max=100 et step=1.

    • Marques personnalisées : L’attribut marks est utilisé pour personnaliser l’apparence des valeurs sur le curseur. Vous pouvez l’utiliser pour afficher des valeurs significatives, comme des intervalles de temps, des pourcentages, ou des catégories spécifiques.

    • Interaction avec les callbacks : dcc.Slider fonctionne très bien avec les callbacks pour interagir avec d’autres éléments de l’application, comme des graphiques ou des filtres.

  • dcc.RangeSlider (intervalle de dates ou valeurs)

    dcc.RangeSlider est un composant Dash qui permet de créer un curseur (slider) pour sélectionner un intervalle de valeurs numériques ou de dates. Il est idéal pour les cas où l'utilisateur doit spécifier une plage, comme une période temporelle ou une plage de valeurs dans un graphique ou un tableau.

    Importation :
    import dash_core_components as dcc
    Attributs :
    Paramètre Type Description Valeur par défaut
    min int ou float La valeur minimale possible du curseur. 0
    max int ou float La valeur maximale possible du curseur. 100
    step int ou float La valeur par laquelle l’intervalle est divisé (ex : 1, 0.5, etc.). 1
    marks dict Dictionnaire où chaque clé est une valeur et la valeur correspondante est l’étiquette à afficher pour cette valeur sur le curseur. {}
    value list Liste de deux valeurs représentant l’intervalle sélectionné (min et max). [min, max]
    id str Identifiant unique pour le composant, nécessaire pour l’interaction avec les callbacks. None
    disabled bool Permet de désactiver l’interaction avec le composant (le curseur devient non interactif). False
    marks_position str Détermine la position des marques : soit « bottom », « top », « both ». 'bottom'
    Exemple de code :
    import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Initialisation de l'application Dash
app = dash.Dash(__name__)

# Mise en place du layout avec un dcc.RangeSlider pour une plage de valeurs
app.layout = html.Div([
    dcc.RangeSlider(
        id='range-slider',
        min=0,
        max=100,
        step=1,
        marks={i: str(i) for i in range(0, 101, 10)},  # Marque les multiples de 10
        value=[20, 80],  # Plage de valeurs par défaut
    ),
    html.Div(id='output-range')
])

# Callback pour mettre à jour l'affichage en fonction de l'intervalle sélectionné
@app.callback(
    Output('output-range', 'children'),
    [Input('range-slider', 'value')]
)
def update_output(value):
    return f'Plage sélectionnée : {value[0]} à {value[1]}'

# Lancer l'application
if __name__ == '__main__':
    app.run_server(debug=True)
    Explication du code :

    1. Création du composant RangeSlider : Le dcc.RangeSlider crée un curseur avec une plage de valeurs allant de 0 à 100, avec des étapes de 1. Des marques sont affichées tous les 10 unités sur le curseur. La plage initiale est définie à [20, 80].

    2. Callback Dash : Un callback est utilisé pour afficher la plage sélectionnée par l’utilisateur dans un html.Div. L’intervalle sélectionné est récupéré via Input('range-slider', 'value').

    3. Affichage dynamique : La valeur du curseur est mise à jour en temps réel dans l’interface et l’utilisateur voit l’intervalle sélectionné dans le Div.

    Remarque importante :

    • Intervalle de dates : Si vous souhaitez utiliser le RangeSlider pour des intervalles de dates, vous pouvez convertir les dates en entiers (par exemple, le nombre de jours depuis une date de référence) et utiliser ces valeurs comme minimum, maximum et étapes pour le curseur.

    • Interaction avec les callbacks : Le RangeSlider est conçu pour être utilisé avec des callbacks, permettant d’interagir dynamiquement avec d’autres éléments du tableau de bord, comme des graphiques ou des filtres.

    • Affichage des marques : L’attribut marks est utilisé pour personnaliser l’apparence des valeurs sur le curseur. Vous pouvez personnaliser les marques pour améliorer l’expérience utilisateur, par exemple, en affichant des dates ou des étiquettes compréhensibles.

  • dcc.Checklist (cases à cocher)

    dcc.Checklist est un composant Dash qui permet de créer une liste de cases à cocher (checkboxes). Ce composant peut être utilisé pour permettre aux utilisateurs de sélectionner une ou plusieurs options parmi une liste d'éléments. Il est souvent utilisé pour des filtres ou des options de configuration.

    Importation :
    import dash_core_components as dcc
    Attributs :
    Paramètre Type Description Valeur par défaut
    options list Liste de dictionnaires contenant les options à afficher sous forme de cases à cocher. Chaque option doit avoir une clé label pour l’étiquette et une clé value pour la valeur associée. []
    value list Liste des valeurs des options actuellement sélectionnées. []
    id str Identifiant unique pour le composant, nécessaire pour l’interaction avec les callbacks. None
    inline bool Détermine si les cases à cocher seront affichées horizontalement (en ligne) ou verticalement. False
    disabled bool Permet de désactiver l’interaction avec le composant (les cases à cocher ne peuvent pas être modifiées). False
    Exemple de code :
    import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Initialisation de l'application Dash
app = dash.Dash(__name__)

# Mise en place du layout avec un dcc.Checklist
app.layout = html.Div([
    dcc.Checklist(
        id='checklist-example',
        options=[
            {'label': 'Option 1', 'value': '1'},
            {'label': 'Option 2', 'value': '2'},
            {'label': 'Option 3', 'value': '3'}
        ],
        value=['1'],  # Valeur par défaut (Option 1 sélectionnée)
        inline=True    # Affichage en ligne
    ),
    html.Div(id='output-container')
])

# Callback pour mettre à jour l'affichage en fonction des cases cochées
@app.callback(
    Output('output-container', 'children'),
    [Input('checklist-example', 'value')]
)
def update_output(selected_values):
    return f'Vous avez sélectionné : {", ".join(selected_values)}'

# Lancer l'application
if __name__ == '__main__':
    app.run_server(debug=True)
    Explication du code :

    1. Création du composant Checklist : Le dcc.Checklist crée une liste de cases à cocher avec trois options : ‘Option 1’, ‘Option 2’ et ‘Option 3’. Par défaut, la case ‘Option 1’ est sélectionnée.

    2. Callback Dash : Un callback est défini pour mettre à jour un html.Div en fonction des cases sélectionnées. La fonction update_output prend les valeurs des cases cochées et les affiche sous forme de texte dans le Div.

    3. Affichage en ligne : Grâce à l’attribut inline=True, les cases à cocher sont affichées côte à côte (horizontalement).

    Remarque importante :

    • Interaction avec les callbacks : dcc.Checklist est particulièrement utile pour interagir avec d’autres éléments de l’interface utilisateur. Le tableau de bord se met à jour dynamiquement selon les sélections faites par l’utilisateur.

    • Accessibilité : dcc.Checklist permet aussi d’implémenter une interface facile d’utilisation où l’utilisateur peut facilement sélectionner plusieurs options.

    • Usage des options : Les options sont définies sous forme de dictionnaires, chaque élément ayant une étiquette (label) et une valeur (value). La valeur peut être utilisée dans un callback pour manipuler les résultats ou actions en fonction des sélections de l’utilisateur.