TimeframeSelector
Use the TimeframeSelector to let users filter data by time, choosing from
preset timeframes or entering a custom start and end time.
When to use
- To let users filter data by time using preset timeframes or a custom start and end time.
When not to use
- When users only need to select a single point in time rather than a range. Use a date or time input instead.
Position
Place TimeframeSelector directly above the content it affects so users can see
which data the timeframe controls. If TimeframeSelector is part of a filter
composition such as one with a FilterField, place
it last.
Date precision
When you pick a date using the calendar, the duration of the timeframe will be whole days. If you change the date manually, the timeframe will be based on the exact time difference. The ISO strings don't keep the extra precision when controlled externally, copy-pasted, manually changed, used with presets, or initialized with a default value.
When to apply changes
In a composition
If TimeframeSelector is part of a composition with a dedicated apply button,
apply changes when that button is clicked.
Standalone
If TimeframeSelector is standalone or part of a composition without an apply
button, apply changes when users select a timeframe in the TimeframeSelector
overlay.
When to refresh the timeframe
Manual refresh
If needed, add a button next to TimeframeSelector to let users refresh the
timeframe manually. Each time users click the button, the timeframe updates.
Auto refresh
You can also provide an option for users to set an interval for automatic timeframe updates. If you add auto-refresh, also provide a manual refresh option.
Last updated
If possible, show when the timeframe was last updated and what the active
timeframe is. Use an
InformationOverlay next to
TimeframeSelector to show this.
