Inizia subitoInizia gratis

Analizzare le località dei clienti top

Grazie all'ottimo lavoro svolto con l'azienda di e-commerce, ti hanno chiesto di aiutarli ad ampliare un report esistente sulle vendite per paese.

Il sales manager vuole capire dove si trovano i loro clienti top. Al momento non ha un'idea chiara di cosa significhi "top". L'ideale sarebbe poter provare facilmente diversi valori di soglia per considerare qualcuno un cliente top e vedere come cambia il grafico con soglie diverse.

Il tuo compito è aiutare il sales manager usando un input di tipo range per alimentare un'app a aggiornamento live che filtra le vendite in base a un valore minimo di OrderValue.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Aggiungi un componente di input range chiamato dcc.Input con identificatore min_order_val sotto la riga 34 che permetta agli utenti di selezionare un valore da 50 a 550.
  • Nella callback sotto la riga 53, verifica input_val e filtra il DataFrame sales con OrderValue maggiore del valore selezionato.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice