TimeframeSelector
Use the TimeframeSelector to let users select a timeframe by choosing a from
and to value or one of the presets for common timeframes.
How to use
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.
Where to position
Position the TimeframeSelector right above the content it affects. If the TimeframeSelector is part of a larger filter composition (for example, combined with a FilterField), place it as the last element of this composition.
When to apply changes
In a composition
If the TimeframeSelector is part of a composition with a dedicated apply button (for example, a filter composition), apply the changes when this button gets clicked.
Standalone
If the TimeframeSelector is used as a standalone component or part of a composition without an apply button, apply the changes when the user selects a timeframe in the TimeframeSelector overlay.
When to refresh the timeframe
Manual refresh
If needed, add a button next to the TimeframeSelector that allows users to refresh the timeframe manually. Each time the user clicks the refresh button, the timeframe should be updated accordingly.
Auto refresh
Additionally, you can provide an option for users to set an interval for automatic timeframe updates. If you implement this auto-refresh functionality, ensure a manual refresh option is also available.
Last updated
If possible, provide information about when the timeframe was last updated and the active timeframe. This can be achieved with an InformationOverlay next to the TimeframeSelector.
