Dash “Helper” Components

Module Contents

Dash Helper components to improve code readability

Function: link_card

Module: Cards

A frequently occuring use of the dash_bootstrap_components card is to provide a description and a link. This module provides a helper function to automate this case.

Helper function for making a dbc card with a link button

Parameters

  • uid (str) – Card identifier, must be unique across app

  • title (str) – Card title

  • text (str) – Body text for card

  • href (str) – Link for button. Can be relative or absolute

Returns

Contains a title, body text, and a button serving as a hyperlink

Return type

dash.development.base_component.ComponentMeta

Examples

>>> example_card = link_card(uid='exp-card', title='Example Card', text='Have you been to my github?', href='https://github.com/rbpatt2019')

Function: make_dd

Module: Dropdown

This function automates the process of creating dcc.Dropdown with an html.H5 header and a dbc.Tooltip tied to the header.

dash_covid19.helper_components.dropdown.make_dd(uid: str = 'dd', label: str = 'Dropdown Menu', placeholder: str = 'Select a variable', options: Union[None, List[str]] = None, default_index: int = 0) → List[dash.development.base_component.ComponentMeta]

Generate a Dropdown menu with a header tied to a tooltip

Notes

This function returns a list, and is designed to be passed directly to the children argument of a Dash Component

Parameters

  • uid (str) – Component ID. Must be unique across app.

  • label (str) – Label for Dropdown menu

  • placeholder (str) – Default text for Dropdown

  • options (Union[None, List[str]]) – Possible selections

  • default_index (int) – Which selection to default to

Returns

List of the header, helper, and dropdown components

Return type

List[dash.development.base_component.ComponentMeta]

Example

>>> layout = dbc.Col(children=make_dd())

Object: Navbar

Helper Component: Simple Navbar

This module contains a predefined Navbar to be used for navigating the Dash App

dash_covid19.helper_components.navbar.navbar

A dbc.NavbarSimple. The brand_href returns you to home, while the other NavItems navigate various pages, both internal and external, relevant to the app.

Type

dash.development.base_component.ComponentMeta

Function: make_slider

Module: Slider

This module contains a helper function automate the process of creating a dcc.Slider with an html.H5 header tied to a dbc.Tooltip helper

dash_covid19.helper_components.slider.make_slider(df: pandas.core.frame.DataFrame, uid: str = 'slider', header: str = 'Date Slider') → List[dash.development.base_component.ComponentMeta]

Generate a date slider with a header tied to a tooltip helper

Dash sliders still struggle with dates. To get around this, the function creates an integer index from the unique values of the date columns, and assigns the actual dates as labels. As such, any callback using this function needs to convert from the index back to the actual date before filtering.

Notes

This function returns a list, and is designed to be passed directly to the children argument of a Dash Component

Parameters

  • df (pd.DataFrame) – Data containing a ‘date’ column

  • uid (str) – Component ID. Must be unique across app Default text for Dropdown

  • header (str) – Component header

Returns

List of the header, helper, and slider components

Return type

List[dash.development.base_component.ComponentMeta]

Raises

AttributeError – If there is no column ‘data’ in df

Example

>>> layout = dbc.Col(children=make_slider(pd.DataFrame([['2020-06-26', 1], ['2020-06-25', 10]], columns=['date', 'var'])))

Function: make_log_switch

Module: Switch

This module contains a helper function for automating the process of creating a switch to convert an axis scale between linear and log with an html.H5 header tied to a dbc.Tooltip helper

dash_covid19.helper_components.switch.make_log_switch(uid: str = 'switch', axis: str = 'X-axis') → List[dash.development.base_component.ComponentMeta]

Generate a Boolean switch for axis scale tied to a header with a helper

Notes

This function returns a list, and is designed to be passed directly to the children argument of a Dash Component

Parameters

  • id (str) – Component ID. Must be unique across app

  • axis (str) – Axis this switch effects. Used to create help message

Returns

List of the header, helper, and switch components

Return type

List[dash.development.base_component.ComponentMeta]

Example

>>> layout = dbc.Col(children=make_log_switch())

Function: line_plot

Module: Graphs

This module contains a helper function for outputting a plotly line graph for use in a Dash interactive callback

dash_covid19.helper_components.graphs.line_plot(df: pandas.core.frame.DataFrame, variable: str = 'total_cases', title: str = '<b>China</b>', scale: bool = False) → Dict[str, Any]

Helper function for creating line plots in a Dash Callback

Notes

This function returns a dictionary of Plotly settings, and is designed to be returned from a Dash Callback that outputs to a dcc.Graph figure

Parameters

  • df (pd.DataFrame) – Containing the data to be plotted. As the x-axis is time, there must be a ‘date’ column

  • variable (str) – Variable to be plotted on y-axis. Must be in df.columns

  • title (str) – Text to be used for plot title

Returns

A dictionary containing Plotly settings

Return type

Dict[str, Any]

Raises

AttributeError – If ‘data’ or variable not in df.columns

Examples

>>> settings = line_plot(pd.DataFrame([['2020-06-26', 1], ['2020-06-25', 10]], columns=['date', 'total_cases']))

Function: make_led

Module: LED

This module contains a helper function for automating the process of creating an LED to display numeric data with an html.H3 header tied to a dbc.Tooltip helper

dash_covid19.helper_components.led.make_led(uid: str = 'display', variable: str = 'New Cases per Million') → List[dash.development.base_component.ComponentMeta]

Generate an LED display for numeric data tied to a header with a helper

Notes

This function returns a list, and is designed to be passed directly to the children argument of a Dash Component

Parameters

  • id (str) – Component ID. Must be unique across app

  • variable (str) – Axis this switch effects. Used to create help message

Returns

List of the header, helper, and LED components

Return type

List[dash.development.base_component.ComponentMeta]

Example

>>> layout = dbc.Col(children=make_led())