Curseur pour les données de ventes

L’analyse des tendances et des motifs dans les données de l’entreprise d’e-commerce mondiale a été grandement améliorée grâce à vos sélecteurs de date. On vous demande désormais d’identifier quelles catégories tirent les commandes à « forte valeur ».

L’entreprise souhaite un outil permettant de choisir une valeur (n’importe laquelle !) et d’afficher un graphique indiquant combien de ventes ont un montant de commande supérieur à cette valeur, ventilé par grande catégorie.

Vous savez qu’un composant d’entrée de type plage conviendrait parfaitement.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>

Voir le cours

Instructions de l’exercice

Ajoutez un composant curseur dcc.Slider avec l’identifiant value_slider sous la ligne 16 pour sélectionner une valeur minimale de commande.
Définissez le paramètre value du curseur à 0 sous la ligne 20.
Définissez le paramètre step du curseur à 50 sous la ligne 22.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales breakdowns'),
  html.Div([
        html.H2('Controls'),
        html.Br(),
        html.H3('Minimum OrderValue Select'),
        # Add a slider input
        ____(id='value_slider',
            min=ecom_sales['OrderValue'].min(),
            max=ecom_sales['OrderValue'].max(),
            # Set the starting value of the slider
            ____=____,
            # Set the step increment of the slider
            ____=____,
            vertical=False)],
        style={'width':'350px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
		dcc.Graph(id='sales_cat'),
		html.H2('Sales by Major Category', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
		style={'width':'700px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='value_slider', component_property='value')
)
def update_plot(min_val):
    sales = ecom_sales.copy(deep=True)
    if min_val:
        sales = sales[sales['OrderValue'] >= min_val]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].size().reset_index(name='Total Sales Volume')
    bar_fig_major_cat = px.bar(
        title=f'Sales with order value: {min_val}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales Volume', y='Major Category')
    return bar_fig_major_cat
  
if __name__ == '__main__':
    app.run(debug=True)

Modifier et exécuter le code