1. Learn
    2. /
  2. Courses
    3. /
  3. Building Dashboards with Dash and Plotly

Exercise

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'

Instructions

100 XP
  • 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.