Penataan komponen Dash secara DRY

Dasbor terakhir Anda mendapatkan manfaat dari komponen yang dapat digunakan kembali. Sekarang saatnya melangkah lebih jauh: gunakan fungsi pembantu untuk menyisipkan pemisah baris dan sederhanakan penataan yang berulang dengan fungsi gaya bersama.

Elemen gaya umum yang Anda temukan adalah: 'display':'inline-block','margin':'0 auto','padding':'20px'

Fungsi make_break() telah didefinisikan untuk Anda pada baris 14, yang mengambil argumen yang menentukan berapa banyak tag pemisah baris HTML yang akan dibuat dan mengembalikannya dalam sebuah list.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

Buat fungsi bernama style_c() yang akan mengembalikan dictionary layout_style dengan semua elemen gaya umum ('display':'inline-block','margin':'0 auto','padding':'20px') di bawah baris 21.
Gunakan fungsi make_break() untuk menyisipkan jumlah pemisah baris seperti yang ditandai dalam komentar di bawah baris 28, 31, dan 29.
Gunakan fungsi style_c() untuk menambahkan penataan pada komponen html.H2() di bawah baris 35.
Gunakan fungsi style_c() untuk menambahkan ke penataan khusus yang sudah ada pada komponen DatePickerSingle() di bawah baris 47.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)

Edit dan Jalankan Kode