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

View Course

Exercise instructions

Create a reusable component function add_logo that will house the logo creation and styling below line 14.
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 line 19.
Insert the logo in the places marked with Insert the logo (X); there are 4 below lines 25, 35, 38, and 59.

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)

Edit and Run Code