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

DRY-hoá việc tạo style cho các thành phần Dash

Bảng điều khiển trước của bạn đã hưởng lợi từ các thành phần tái sử dụng. Giờ hãy đi xa hơn: dùng một hàm trợ giúp để chèn xuống dòng và đơn giản hoá phần style lặp lại bằng một hàm style dùng chung.

Các phần style dùng chung bạn đã nhận thấy là: 'display':'inline-block','margin':'0 auto','padding':'20px'

Hàm make_break() đã được định nghĩa sẵn ở dòng 14, nhận một tham số chỉ định số thẻ xuống dòng HTML cần tạo và trả về chúng dưới dạng một danh sách.

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 tên style_c() sẽ trả về một dictionary layout_style chứa tất cả các phần style dùng chung ('display':'inline-block','margin':'0 auto','padding':'20px') bên dưới dòng 21.
  • Dùng hàm make_break() để chèn số lần xuống dòng như đã ghi chú trong các comment bên dưới các dòng 28, 31, và 29.
  • Dùng hàm style_c() để thêm style cho thành phần html.H2() bên dưới dòng 35.
  • Dùng hàm style_c() để bổ sung vào phần style cụ thể đã có trên thành phần DatePickerSingle() bên dưới dòng 47.

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()

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

# Create a function to add corporate styling
def style_c():
    layout_style = {____}
    return layout_style

app.layout = [
  add_logo(),
  # Insert two HTML breaks
  ____,
  html.H1('Sales breakdowns'),
  # Insert three HTML breaks
  ____,
  html.Div([
    add_logo(),
    # Style using the styling function
    html.H2('Controls', style=____),
    add_logo(),
    html.H3('Sale Date Select'),
    # Insert two HTML breaks
    ____,
    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),
      # Add styling using the styling function
      style={'width':'200px'}.____(____))],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 40px'}),
  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'}),
  add_logo()
]

@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ã