ChartControlBar
A three-layer chart control bar with metric, entity, and dimension toggles. Features grey track backgrounds, FusedShape SVG connectors, and interactive TabGroup controls with animated filter trays. Supports a datePickerSlot for dependency-inversion of date picker components.
ChartControlBar
vizState: {"type":"orders","quant":"$","entityType":"customers","entityId":null,"itemId":null,"timeFrame":"MTD"}
State Configurations
Switch between preset configurations to see the control bar in different states. Each preset demonstrates different metric, entity, and filter combinations.
Orders view, $ metric, no active filters
Date Picker Slot (Dependency Inversion)
The datePickerSlot prop accepts any ReactNode, allowing consumers to inject their own date picker component. This is the dependency-inversion pattern — the control bar defines where the date picker lives without knowing its implementation.
Usage
import { ChartControlBar } from '@so.boss/gloss-ui';
import type { VizState } from '@so.boss/gloss-ui';
const [vizState, setVizState] = useState<VizState>({
type: 'orders',
quant: '$',
entity: { type: 'customers', id: null, name: null },
byItem: { id: null, name: null },
timeFrame: 'MTD',
});
<ChartControlBar
vizState={vizState}
onTypeChange={(type) => setVizState(s => ({ ...s, type }))}
onQuantChange={(quant) => setVizState(s => ({ ...s, quant }))}
onEntityTypeChange={(entityType) =>
setVizState(s => ({ ...s, entity: { ...s.entity, type: entityType } }))}
onEntitySelect={(id, name) =>
setVizState(s => ({ ...s, entity: { ...s.entity, id, name } }))}
onItemSelect={(id, name) =>
setVizState(s => ({ ...s, byItem: { id, name } }))}
onTimeFrameChange={(tf) => setVizState(s => ({ ...s, timeFrame: tf }))}
userType="sales-agency"
entityFilterOptions={customerOptions}
itemFilterOptions={itemOptions}
datePickerSlot={<MyCustomDatePicker />}
/>