Skip to main content

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.

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.

Examples of a TimeframeSelector next to a SegmentSelector and FilterField. Examples of a TimeframeSelector next to a SegmentSelector and FilterField.

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.

Examples of a refresh TimeframeSelector pattern. Examples of a refresh TimeframeSelector pattern.

Still have questions?
Find answers in the Dynatrace Community