Zacznij terazZacznij za darmo

Wielokrotne używanie komponentów Dash

Twoje dashboardy zdobywają coraz większą popularność – szczególnie ostatnia aplikacja z selektorem dat. Pewien menedżer wyższego szczebla był nią zachwycony, ale poprosił o kilka zmian: chce, żeby w wielu miejscach pojawiało się logo w firmowym stylu.

Aby kod pozostał przejrzysty, pora stworzyć wielokrotnie używalną funkcję Pythona do obsługi logo.

Zatwierdzone style logo są następujące: 'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Utwórz wielokrotnie używalną funkcję komponentu o nazwie add_logo() poniżej linii 11, tak aby zwracała komponent corp_logo.
  • Wewnątrz tej funkcji utwórz element obrazu Dash o nazwie corp_logo, używając odpowiedniego komponentu HTML z podanym stylem poniżej linii 13.
  • Wywołaj funkcję add_logo() w każdym z 4 oznaczonych miejsc poniżej linii 20, 27, 30 i 46.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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'
ecom_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])

app = Dash()

# Create a reusable component function called add_logo
____ ____():
    # Create a Dash image element
    corp_logo = ____(
        src=logo_link, 
        style={'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'})
    return corp_logo

app.layout = [
  # Insert the logo (1)
  ____,
  html.Br(),
  html.H1('Sales breakdowns'),
  html.Br(),
  html.Br(),
  html.Div([
        # Insert the logo (2)
        ____,
        html.H2('Controls', style={'margin':'0 10px','display':'inline-block'}),
        # Insert the logo (3)
        ____,
        html.H3('Sale Date Select'),
        html.Br(),
        dcc.DatePickerSingle(
            id='sale_date',
            min_date_allowed=ecom_sales.InvoiceDate.min(),
            max_date_allowed=ecom_sales.InvoiceDate.max(),
            initial_visible_month=date(2011, 4, 1),
            date=date(2011, 4, 11),
            style={'width':'200px', 'margin':'0 auto'})],   
        style={'width':'350px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
            dcc.Graph(id='sales_cat'),
            html.H2('Daily Sales by Major Category', style={'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
            style={'width':'700px','display':'inline-block'}),
  # Insert the logo (4)
  ____
]
@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='sale_date', component_property='date')
)
def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)
    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales on: {input_date}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales ($)', y='Major Category')
    return bar_fig_major_cat

if __name__ == '__main__':
    app.run(debug=True)
Edytuj i uruchom kod