Dashコンポーネントの再利用
あなたのダッシュボードは注目を集めており、特に最近のDate Pickerアプリが好評です。シニアマネージャーも気に入りましたが、企業スタイルのロゴを使い、複数箇所に表示してほしいという依頼がありました。
コードをすっきり保つため、ロゴ用の再利用可能なPython関数を作成しましょう。
承認済みのロゴスタイルは次のとおりです：
'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'
この演習はコースの一部です
Dash と Plotly で作るダッシュボード
演習の手順
11行目の下に、corp_logoコンポーネントを返す再利用可能なコンポーネント関数add_logo()を作成します。- この関数内で、
13行目の下に指定のスタイルを用いて、適切なHTMLコンポーネントでDashの画像要素corp_logoを作成します。 20、27、30、46行目の下にある4つの指定箇所それぞれで、add_logo()関数を呼び出します。
実践的なインタラクティブ演習
このサンプルコードを完成させて、この演習に挑戦してみましょう。
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)