Analyser les principales localisations de clients

Grâce à votre excellent travail avec l’entreprise d’e-commerce, on vous a demandé d’aider à enrichir un rapport existant sur les ventes par pays.

La responsable des ventes souhaite comprendre où se trouvent leurs meilleurs clients. Pour l’instant, la notion de « meilleur » n’est pas clairement définie. L’idéal serait de pouvoir tester facilement différentes valeurs seuils pour considérer qu’un client est « top » et observer comment le graphique évolue selon ces seuils.

Votre mission est d’aider la responsable des ventes en utilisant une entrée de type plage pour créer une application à mise à jour en direct qui filtre les ventes selon un OrderValue minimal.

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 d’entrée de type plage dcc.Input avec l’identifiant min_order_val sous la ligne 34, permettant aux utilisateurs de choisir une valeur entre 50 et 550.
Dans le callback sous la ligne 53, vérifiez la présence de input_val et filtrez le DataFrame sales avec OrderValue supérieur à la valeur sélectionnée.

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
from datetime import datetime, date
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'

def make_break(num_breaks):
    br_list = [html.Br()] * num_breaks
    return br_list

def add_logo():
    corp_logo = html.Img(
        src=logo_link, 
        style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})
    return corp_logo

def style_c():
    layout_style={'display':'inline-block','margin':'0 auto','padding':'20px'}
    return layout_style
  
app = Dash()

app.layout = [
  add_logo(),
  *make_break(2),
  html.H1('Sales Dashboard'),
  *make_break(3),
  html.Div([
    html.H2('Controls', style=style_c()),
    html.H3('Set minimum OrderValue'),
    *make_break(2),
    dcc.Input(
      # Add a range input
      id='min_order_val', type='____', 
      ____=____, ____=____, value=50,
      debounce=False,
      style={'width':'300px', 'height':'30px'})],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 80px'}),
    html.Div([
      dcc.Graph(id='sales_country'),
      html.H2('Sales Quantity by Country', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
      style={'width':'500px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_country', component_property='figure'), 
    Input(component_id='min_order_val', component_property='value'))

def update_plot(input_val):
    sales = ecom_sales.copy(deep=True)
    # Check for input and filter sales
    if ____:
        input_val = round(float(input_val), 2)
        sales = sales[sales['OrderValue'] > ____] 
    fig = px.scatter(data_frame=sales, y='OrderValue', height=400,
                     x='Quantity', color='Country',
                     title=f'Orders of Min Value ${input_val}')
    return fig
      
if __name__ == '__main__':
    app.run(debug=True)

Modifier et exécuter le code