ComeçarComece de graça

Atualizando o título de um gráfico

A empresa de e-commerce com a qual você vem trabalhando tem um novo desafio para você.

Eles querem oferecer uma forma de personalizar um gráfico para o usuário final. Ou seja, o título do gráfico deve ser configurável para que o usuário sinta que está personalizado para ele.

Isso parece um trabalho para um componente de entrada do usuário!

Ajude a empresa de e-commerce a aprimorar o app Dash recebendo um texto do usuário para atualizar o título do gráfico.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

~- Adicione um componente de entrada de texto chamado dcc.Input com o identificador add_user_name abaixo da linha 33.

  • Defina o parâmetro debounce para que o callback seja acionado quando o usuário pressionar 'Enter' abaixo da linha 36.
  • Defina o parâmetro required para que os usuários não sejam obrigados a usar essa entrada para o gráfico ser renderizado abaixo da linha 38.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código