ÎncepețiÎncepe gratuit

Reutilizarea componentelor Dash

Dashboard-urile tale câștigă tot mai multă popularitate, mai ales aplicația recentă cu selectorul de date. Un manager senior a apreciat-o, dar a solicitat câteva modificări: folosește logo-ul cu stilul corporativ și afișează-l în mai multe locuri.

Pentru a păstra codul curat, este momentul să creezi o funcție Python reutilizabilă pentru logo.

Stilul aprobat pentru logo este: 'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Creează o funcție componentă reutilizabilă numită add_logo() după linia 11, care să returneze componenta corp_logo.
  • În interiorul acestei funcții, creează un element de imagine Dash numit corp_logo folosind componenta HTML corespunzătoare cu stilul furnizat, după linia 13.
  • Apelează funcția add_logo() în fiecare dintre cele 4 locuri marcate, după liniile 20, 27, 30 și 46.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul