Skip to main content

    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:

    FunctionDescription
    addSegmentAdds one segment to the selection. If the segment is unavailable, it won't be added to the selection.
    removeSegmentRemoves one segment from the selection.
    removeAllSegmentsRemoves all segments from the selection.
    setSegmentsOverrides 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

    Patterns​

    Documentation​

    Still have questions?
    Find answers in the Dynatrace Community