SegmentSelector

SegmentSelector is a top-level filter component that filters data by Segments, setting the scope for additional filters.

OverviewPropertiesUsage

Import

import { SegmentSelector } from '@dynatrace/strato-components-preview/filters';

Demo

SegmentSelector lets users filter data from specific datasets called Segments. The useSegments hook provides access to the selected values. See Usage for best practices.

CodeSandbox

Set the scope

Use the SegmentsProvider to restrict the scope of one or more SegmentSelector components. This will apply only those segments within a given scope and ignore any globally-set segments.

The SegmentsProvider accepts default segments as well and filters out any faulty segments. If the default selection should apply to all SegmentsSelector components, place the SegmentsProvider at a high level. For example, right after the AppRoot.

CodeSandbox

Configure segments programmatically

The useSegments hook provides the following helper functions to programmatically configure selected segments:

Function	Description
addSegment	Adds one segment to the selection. If the segment is unavailable, it won't be added to the selection.
removeSegment	Removes one segment from the selection.
removeAllSegments	Removes all segments from the selection.
setSegments	Overrides all currently applied segments. Similarly to addSegment, setSegments checks the availability of each segment.

CodeSandbox

Show private and outdated segments

Users can share private segments with other users, for example, through a link. If the recipient removes a private segment from their view, it will not be visible to them any longer. However, they can access the private segment once more by re-opening the link.

Outdated segments remain visible in the segments array but are marked as unavailable.

CodeSandbox

Customize trigger

SegmentSelector comes with a default trigger to ensure a consistent user experience. In exceptional cases, if necessary, it's possible to override the default trigger.

Props are automatically applied with the custom trigger we provide to ensure correct semantics. The SegmentSelector.CustomTrigger accepts a render function with two objects as arguments:

• The first object provides access to the default displayValue and the isLoading state.
• The second object provides all the trigger props necessary for the trigger button to function.

If you override the default trigger, make sure to spread the props to the trigger element to tie interactions back to the SegmentSelector. This enables you to customize the trigger component, while leveraging the internal logic of the SegmentSelector component.

CodeSandbox