Bắt đầu ngayBắt đầu miễn phí

Tái sử dụng các thành phần Dash

Các bảng điều khiển của bạn đang thu hút nhiều người dùng, đặc biệt là ứng dụng date picker gần đây. Một quản lý cấp cao rất thích nhưng yêu cầu một số cập nhật: dùng logo theo phong cách của công ty và hiển thị ở nhiều vị trí.

Để giữ cho mã gọn gàng, đã đến lúc tạo một hàm Python có thể tái sử dụng cho logo.

Kiểu logo đã được phê duyệt là: 'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'

Bài tập này là một phần của khóa học

Xây dựng Dashboard với Dash và Plotly

Xem khóa học

Hướng dẫn bài tập

  • Tạo một hàm thành phần có thể tái sử dụng tên là add_logo() bên dưới dòng 11 để trả về thành phần corp_logo.
  • Bên trong hàm này, tạo một phần tử ảnh Dash tên corp_logo bằng HTML component phù hợp với style đã cho bên dưới dòng 13.
  • Gọi hàm add_logo() tại mỗi trong 4 vị trí được đánh dấu bên dưới các dòng 20, 27, 30, và 46.

Bài tập tương tác thực hành trực tiếp

Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.

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)
Chỉnh sửa và Chạy Mã