CycleWheel
General cycle composition built on RadialSegmentChart — fully configurable cycleLength, selectedDay, and every phase duration. Proposed/under Owner review, GitHub Issues #127/#129.
Proposed component — under Owner review (GitHub Issue #127). Not part of the governed component registry. Reference: D:\NexWell\nexwell-ai-inputs\components.
Demo A — 28-day cycle, selectedDay=5
Reference-fidelity example
Day 5
Menstrual phase
- Menstrual
- Follicular
- Ovulation
- Luteal
Demo B — 31-day cycle, different phase durations, selectedDay=20
Configurable cycleLength
Day 20
Luteal phase
- Menstrual
- Follicular
- Ovulation
- Luteal
Demo D — every phase duration and selectedDay are configurable
Interactive: switch cycleLength preset, drag selected day
Day 5
- Menstrual
- Follicular
- Ovulation
- Luteal
API
Public props
import { CycleWheel, type CyclePhase } from "@nexwellaifactory/components";
const phases: CyclePhase[] = [
{ id: "menstrual", label: "Menstrual", startDay: 1, lengthDays: 5, colorToken: "var(--nw-color-chart-series1)" },
{ id: "follicular", label: "Follicular", startDay: 6, lengthDays: 8, colorToken: "var(--nw-color-chart-series2)" },
{ id: "ovulation", label: "Ovulation", startDay: 14, lengthDays: 2, colorToken: "var(--nw-color-chart-series3)" },
{ id: "luteal", label: "Luteal", startDay: 16, lengthDays: 13, colorToken: "var(--nw-color-chart-series4)" },
]; // sum(lengthDays) must === cycleLength
<CycleWheel
cycleLength={28}
selectedDay={5}
phases={phases}
onDaySelect={setSelectedDay} // renders a keyboard-operable range control
ariaLabel="28-day cycle, day 5 selected"
/>