TimeframeSelector
Use the TimeframeSelector to let users filter data by time, choosing from
preset timeframes or entering a custom start and end time.
Import
import { TimeframeSelector } from '@dynatrace/strato-components/filters';
Demo
TimeframeSelector takes its information from the user's Dynatrace user
settings. The timezone setting determines the timezone offset in
TimeframeSelector, while the region setting determines its display format.
Both the timezone and the region can be set independently. If either is set to
"use browser default," TimeframeSelector will fall back to the user's browser
settings for that value. The value passed to the onChange is converted back to
an ISO string or passed as an expression. See Usage for best
practices.
Control state
TimeframeSelector can be controlled, meaning that you can handle the selection
state. To do so, use the onChange prop to provide a handler to be called when
the internal state changes. You must assign the value from the state to the
TimeframeSelector by setting the value prop.
Set initial values
When you create the state for controlling TimeframeSelector, you can pass a
Timeframe to pre-fill the from and to inputs. To make a pre-filled value
the default or preset selection, initialize the state with an expression
matching the preset.
Customize presets
Use TimeframeSelector.Presets to customize presets and show any timeframe
inside the overlay. Default presets are exported, so you can either add to the
list of default items or override them entirely.
The preset list can display up to ten items. If an invalid preset item is added, it won't be rendered and a console.warn will be called, with details to help you resolve the issue.
Enable timeframe reset
This component provides a button to 'Reset timeframe', giving users the option
to clear a selected timeframe. To display this button, the clearable prop must
be set to true.
Set display precision
Change the default display precision of minutes by setting the precision prop
to either seconds or milliseconds. This also sets the precision of the inputs
shown in the overlay or the returned ISOStrings from the onChange.
Set min and max values
The default min and max values for TimeframeSelector follow the current
Grail limitations for timeframes. You can define a custom min and max range by
setting the min and max props to valid isoString dates or expressions. Use
FormField and FormFieldMessages to provide users with helpful error
messages.
Validate user input
This example shows how to validate user input in TimeframeSelector using the
react-hook-form package, which handles error messages. To connect the form
with TimeframeSelector, register the field with the custom error message and
use the useForm hook from react-hook-form.
Add custom trigger
TimeframeSelector comes with a default trigger for consistent user experience.
In exceptional cases, if it's necessary, you may override the default trigger.
Make sure to communicate whether a timeframe is selected and, if so, the
timeframe itself.
Props are applied automatically to the TimeframeSelector.CustomTrigger to
ensure correct semantics. Ideally, use a button as the outermost HTML element
inside the custom trigger.
Show custom placeholder
Use the TimeframeSelector.Trigger and the placeholder prop to show a
placeholder for the trigger button. If no option is selected, the placeholder
value is shown by default. Notice that the clearable prop is used here to
enable empty selection.
Render custom trigger
We also provide a render function for the TimeframeSelector.CustomTrigger,
giving you access to the displayValue that the TimeframeSelector would have
applied. This enables you to understand the internal logic of the component
before you customize it. When using a render function here, make sure to spread
the props to the trigger element so the interactions tie back to the
TimeframeSelector.
Enable stepper
When a timeframe is selected, backward and forward arrows are shown next to the
TimeframeSelector trigger. Clicking an arrow shifts the timeframe by its
current duration. Set the stepper prop to false to disable the stepper if
desired.
The onChange callback is debounced by 300 ms, so rapidly clicking the
arrows will only trigger a single onChange call once the user stops clicking.
The trigger value updates immediately for responsive UI feedback.