Re-using Dash components
Your dashboards are starting to get quite lengthy in terms of the number of lines of code. The good news is, they are getting more attention around the organization. One of the senior managers saw your recent date picker sales dashboard and loved it! However, they had a few notes.
They want the logo to comply with corporate styling and align with the external website. The CSS for this is given below. They also want to include this logo in a few more places; on either side of the control panel and down at the bottom.
To ensure your code doesn't get unmanageable, you think this would be a great opportunity to take advantage of a Python function to create a reusable component.
The corporate logo style is: 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'
This exercise is part of the course
Building Dashboards with Dash and Plotly
Exercise instructions
- Create a reusable component function
add_logo
that will house the logo creation and styling below line14
. - Inside this function, create an image Dash component below line
16
. - Style the logo using the corporate style guide (
'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'
) below line19
. - Insert the logo in the places marked with
Insert the logo (X)
; there are 4 below lines25
,35
,38
, and59
.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output
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.Dash(__name__)
# Create a reusable component function called add_logo
____ ____:
# Add a component that will render an image
corp_logo = ____(
src=logo_link,
# Add the corporate styling
style={____})
return corp_logo
app.layout = html.Div([
# Insert the logo (1)
____,
html.Br(),
html.H1('Sales breakdowns'),
html.Br(),
html.Br(),
html.Div(
children=[
html.Div(
children=[
# 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':'550px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
html.Div(children=[
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)
____,
],
style={'text-align':'center', 'display':'inline-block', 'width':'100%'}
)
@app.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_server(debug=True)