เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การกำหนด Style แบบ DRY สำหรับ Dash Components

แดชบอร์ดก่อนหน้าได้รับประโยชน์จากการใช้ component ที่นำกลับมาใช้ซ้ำได้ ถึงเวลาพัฒนาต่อไปอีกขั้น โดยใช้ helper function สำหรับแทรกตัวแบ่งบรรทัด และลดความซ้ำซ้อนของ styling ด้วยฟังก์ชัน style ที่ใช้ร่วมกันได้

องค์ประกอบ style ที่พบซ้ำกันคือ: 'display':'inline-block','margin':'0 auto','padding':'20px'

ฟังก์ชัน make_break() ถูกกำหนดไว้แล้วที่บรรทัด 14 โดยรับ argument ที่ระบุจำนวน HTML break tag ที่ต้องการสร้าง แล้ว return ออกมาเป็น list

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • สร้างฟังก์ชันชื่อ style_c() ที่ return dictionary ชื่อ layout_style ซึ่งมีองค์ประกอบ style ทั้งหมดที่ใช้ร่วมกัน ('display':'inline-block','margin':'0 auto','padding':'20px') ใต้บรรทัด 21
  • ใช้ฟังก์ชัน make_break() เพื่อแทรกจำนวนตัวแบ่งบรรทัดตามที่ระบุไว้ในคอมเมนต์ใต้บรรทัด 28, 31 และ 29
  • ใช้ฟังก์ชัน style_c() เพื่อเพิ่ม styling ให้กับ component html.H2() ใต้บรรทัด 35
  • ใช้ฟังก์ชัน style_c() เพื่อเพิ่มเข้ากับ styling ที่มีอยู่แล้วบน component DatePickerSingle() ใต้บรรทัด 47

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด