DRY による Dash コンポーネントのスタイリング
前回のダッシュボードでは再利用可能なコンポーネントが役立ちました。ここから一歩進めて、ヘルパー関数で改行を挿入し、共通のスタイル関数で重複するスタイリングをシンプルにしましょう。
共通のスタイル要素は次のとおりです：'display':'inline-block','margin':'0 auto','padding':'20px'
make_break() 関数は 14 行目で定義済みで、作成する HTML の改行タグの数を引数で受け取り、これらをリストで返します。
この演習はコースの一部です
Dash と Plotly で作るダッシュボード
演習の手順
21行目の下に、style_c()という関数を作成し、共通のスタイル要素（'display':'inline-block','margin':'0 auto','padding':'20px'）を含むlayout_style辞書を返すようにしてください。make_break()関数を使い、28、31、29行の下にあるコメントで指示された数の改行を挿入してください。35行目の下にあるhtml.H2()コンポーネントに、style_c()関数を使ってスタイルを追加してください。47行目の下にあるDatePickerSingle()コンポーネントに、既にある個別スタイルに加えてstyle_c()関数を使ってスタイルを追加してください。
実践的なインタラクティブ演習
このサンプルコードを完成させて、この演習に挑戦してみましょう。
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)