KQ-725 · SECTOR/WHEEL
Sector Wheel
A ring of market sectors drawn as stroked wedges whose widths are their performance: each sector's share is its absolute move plus a small baseline, coloured success or danger by sign, and a change of data re-proportions every wedge's pathLength and pathOffset on one glide so the ring settles as a body. Choosing a sector spins the wheel on snap, the shorter way round, until that wedge sits under the notch at twelve o'clock, the hub cross-fades to its name and move, and a measured panel glides open on its movers in a cascade. The wheel can be grabbed after four pixels of travel and released onto a wedge; the chips beneath are a radiogroup with a roving tabindex, so the arrow keys spin it too.
- FRNFernworkup 3.20 percent, +3.20%
- GGEGauge Systemsup 1.62 percent, +1.62%
- LMNLoomlineup 0.71 percent, +0.71%
Tech +1.84% · top FRN +3.20%
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/sector-wheel
Props
- sectors
- WheelSector[]
- default —
- Clockwise from the notch: { id, label, change, movers: { symbol, name, change }[] }, moves in percent.
- value / defaultValue
- string
- default first sector
- Controlled or initial selected sector id.
- onValueChange
- (id: string) => void
- default —
- Fires from the press, key or release that chose a sector.
- baseline
- number
- default 0.5
- Percent points added to every wedge's magnitude so a flat sector keeps a readable slice.
- formatChange
- (percent: number) => string
- default signed two decimals with %
- Prints a move.
- label
- React.ReactNode
- default —
- Visible heading. Omit it and pass aria-label.
- aria-label
- string
- default —
- Invisible label when label is omitted.
| Prop | Type | Default | Description |
|---|---|---|---|
| sectors | WheelSector[] | — | Clockwise from the notch: { id, label, change, movers: { symbol, name, change }[] }, moves in percent. |
| value / defaultValue | string | first sector | Controlled or initial selected sector id. |
| onValueChange | (id: string) => void | — | Fires from the press, key or release that chose a sector. |
| baseline | number | 0.5 | Percent points added to every wedge's magnitude so a flat sector keeps a readable slice. |
| formatChange | (percent: number) => string | signed two decimals with % | Prints a move. |
| label | React.ReactNode | — | Visible heading. Omit it and pass aria-label. |
| aria-label | string | — | Invisible label when label is omitted. |