Filters & Requesters¶
Let the user choose what data to display by adding filters or requesters to your stories.
There are various UX components to do it: buttons, dropdowns, checkboxes or sliders.
I’d like to have a button from which I can choose a country, so the chart will only display data for the selected country.
In the above example we want to slice data on the
country column :
In Toucan there are two ways to do that.
Slice data with a filter¶
In this case, the browser retrieves the full dataset and the filtering is done client-side. Consequently :
- The transition at click is smooth ✅
- The initial query of data might be heavy if you have a large number of rows and many filters options 👎
With the following configuration you slice the domain on the on the
📖 Learn More about adding filters with this tutorial.
Slice data with a requester¶
In this case you are using templating to create a dynamic data query.
In this case, the browser retrieves only the dataset that will be displayed. Consequently:
- The initial query of data is lighter and the first rendering is quickier ✅
- The transition when changing the input can be less fluid as the browser has to wait for the data from the server 👎
With the following dynamic query you slice domain on the
query: domain:"my_domain" country:"<%= requestersManager.variable %>"
Position and types of filters/requesters¶
Filters or requesters can be positionned at 3 places:
- upper-right: above the legend
- upper-middle: above the chart
- bottom-right: under the chart
Filters or requesters can be:
- checkboxes (only for filters)
Toucan’s Design Touch 🎨
- The upper-right filter/requester is consider as a secondary filter, so its design is sighlty lighter.
- The dropdown type is recommended for the upper-right filter/requester. The upwards display is not optimal when positioned at the bottom. This is why it’s called dropDOWN 😉
- On the contrary, sliders are recommended for bottom-right position!
- Report and date requesters have different colors to help the user differenciate them.