Kom igångKom igång gratis

Uppdatera en plottitel

E-handelsföretaget du har arbetat med har en ny utmaning till dig.

De vill erbjuda ett sätt att anpassa en graf efter slutanvändaren. Det vill säga att grafens titel ska kunna konfigureras så att slutanvändaren upplever den som personlig.

Det låter som ett jobb för en användarinmatningskomponent!

Hjälp e-handelsföretaget att förbättra sin Dash-app genom att ta emot textinmatning från användaren och uppdatera grafens titel.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

~- Lägg till en textinmatningskomponent med namnet dcc.Input och identifieraren add_user_name under rad 33.

  • Ange parametern debounce så att callback-funktionen triggas när användaren trycker på Enter, under rad 36.
  • Ange parametern required så att användare inte är tvungna att använda det här fältet för att grafen ska visas, under rad 38.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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('Customize plot title'),
    *make_break(2),
    # Add a text input
    dcc.____(id='add_user_name', type='____', 
      placeholder='Enter your name',
      # Ensure input is triggered with 'Enter'
      ____=____,
      # Ensure the plot can load without a selection
      ____=____,
      style={'width':'200px', '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_plot'),
    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_plot', component_property='figure'),
    Input(component_id='add_user_name', component_property='value')
)
def update_plot(entered_name):
    title_value = 'No Name Entered'
    sales = ecom_sales.copy(deep=True)
    if entered_name:
      title_value = entered_name
    fig = px.scatter(data_frame=sales, 
                    y='OrderValue', x='Quantity', color='Country',title=f'Plot generated for: {title_value}')
    return fig

if __name__ == '__main__':
    app.run(debug=True)
Redigera och kör kod