1. Interactive components
Let's further enhance the interactivity of our Dash apps with more interactive components.
2. Enhancing Interactivity
Dash has a variety of useful interactive components that can enhance dashboard usability. They are all part of the dcc or dash core components module. Here are some useful ones.
dcc-dot-Checklist creates checkboxes.
dcc-dot-RadioItems creates a radio button selection.
dcc-dot-Slider and dcc-dot-RangeSlider create slider selections. We'll look at these closely shortly.
There are also selectors for dates, including dcc-dot-datePickerSingle and dcc-dot-DatePickerRange. They have similarities to the slider selectors, as we'll see.
3. Sliders
A slider is an interactive element where we drag and move a dot along a line to select a value.
A range slider is similar; however, there are two dots, so we are able to select two values that form a range.
Remember, these selectors are primarily used to link to a callback that will update a plot or other Dash component.
4. Sliders in Dash
Let's see how to create and customize a slider in Dash. It begins with the dash core components slider object.
The min and max arguments set the bounds of the slider. Here, the slider will start at 10 and finish at 50.
The value sets what will be selected upon loading the app. This slider will start with 45 selected.
The step sets how much each notch along the slider will increment the value. This slider will increase by five each notch.
Finally, we can set vertical to false if we wish the slider to be horizontal.
5. Date pickers in Dash
It is common to have dates in our data. Here, DatePickerSingle comes in handy as a selector for a single date.
Here is what a date picker looks like.
In Dash, this is created using dcc-dot-DatePickerSingle. Some key arguments are seen here.
The date argument sets what date is first selected. Here it is, the first of July in 2021.
The initial_visible_month is what month is shown first in the popup. This extracts the date from a Python date object so we can use datetime-dot-now, and it will extract the current month.
Optionally, we can limit choices using the min_date_allowed and max_date_allowed arguments. This can ensure users can only select what is available in the data.
6. Date Range Picker
A date picker range is similar to a date picker single. Here is what it looks like visually.
In Dash, the code shares many arguments, as we can see.
However, we now have a start_date and end_date argument available to set what will be initially visible in both date pickers.
7. Updating plots
The utility of interactive components really shines when linked to a callback. Let's walk through an example. The app-dot-layout code has been commented out to focus on the callback. Here, assume there is a DatePickerSingle and a graph to update.
We create the familiar app callback decorator with an input and output. We then link the IDs; however, note that the input property we are taking is the date property from DatePickerSingle, not the value property we took from the dropdown in our example in the last lesson.
The callback should trigger a function with an input from the date picker. Remember to make a copy of the DataFrame to not overwrite the data on each callback trigger.
A conditional checks for an input and filters the DataFrame appropriately using the input date passed into the function from the DatePickerSingle.
Finally, a figure is created on the subset data and returned, triggering the figure update.
8. Let's practice!
Let's practice adding further interactivity into our Dash apps.