EmpezarEmpieza gratis

Actualizar el título de un gráfico

La empresa de e-commerce con la que has estado trabajando tiene un nuevo reto para ti.

Quieren ofrecer una forma de personalizar un gráfico para cada usuario final. Es decir, el título del gráfico debe poder configurarse para que el usuario sienta que está personalizado.

¡Esto suena a un caso para un componente de entrada de usuario!

Ayuda a la empresa de e-commerce a mejorar su app de Dash tomando una entrada de texto del usuario para actualizar el título del gráfico.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

~- Añade un componente de entrada de texto llamado dcc.Input con el identificador add_user_name debajo de la línea 33.

  • Configura el parámetro debounce para que el callback se active cuando el usuario pulse "Enter" debajo de la línea 36.
  • Configura el parámetro required para que no sea obligatorio usar esta entrada para que se renderice el gráfico debajo de la línea 38.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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 y ejecutar código