/// Charts

PeriodSelector

A 1D/1W/1M/1Y time-range toggle for chart headers, built on SegmentedControl with radiogroup semantics.

import { PeriodSelector } from "@protocore/pds";

View as Markdown

Import path

Unlike the recharts wrappers, PeriodSelector ships from the main `@protocore/pds` entry — it carries no recharts dependency, it is a thin SegmentedControl for chart headers.

import { PeriodSelector, ChartContainer } from "@protocore/pds";

Basics

Rendered on its own it shows the house 1D / 1W / 1M / 1Y ranges with the first selected. It is a single-select toggle: exactly one range stays active, and onValueChange fires with the chosen value.

In a chart header

Drop it into a ChartContainer actions slot to switch the range a chart plots. Pass a custom periods list when your ranges differ from the defaults.

Requests

When to use it

Use PeriodSelector for the *time-range switch* that sits in a chart or dashboard header. It is a preset over SegmentedControl — for any other small single-select toggle (a view mode, a unit) reach for SegmentedControl directly.

Usage

Place it in a ChartContainer `actions` slot beside the chart it controls.
Keep range labels terse (`1D`, `1W`) — it is a toggle, not a menu.
Wire `onValueChange` to refetch or reslice the plotted data.
Override `periods` when your ranges differ from 1D/1W/1M/1Y.

Don't

Don't use it for multi-select — exactly one range stays active.
Don't pack in many long labels; use a Select for a large range list.
Don't forget an `aria-label` if the context isn't obvious.
Don't reach for it for non-range toggles — use SegmentedControl.

Accessibility

Keys	Action
`Arrow keys`	Move between ranges (Radix ToggleGroup roving focus).
`Tab`	Move focus into and out of the range group.
`Enter / Space`	Select the focused range.

Built on Radix ToggleGroup with radiogroup semantics; exposes `role=radiogroup` with `role=radio` segments.
Always keeps exactly one range selected — deselection is not possible.
Give an `aria-label` (defaults to `Time range`) so the group is named for assistive tech.

`PeriodSelector` props

Prop	Type	Default	Description
`periods`	`PeriodOption[]`	`1D / 1W / 1M / 1Y`	The periods, left to right. `PeriodOption` = `{ value: string; label: ReactNode; disabled?: boolean }`.
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	`first period's value`	Uncontrolled initial selected value.
`onValueChange`	`(value: string) => void`	—	Fired with the newly-selected period value.
`disabled`	`boolean`	`false`	Disable the whole control.
`aria-label`	`string`	`"Time range"`	Accessible name for the range group.