Design system
Documentation experienceDS-07

Home / Components / ScientificCycleWheel

Approved

ScientificCycleWheel

Two independently configurable concentric rings (e.g. uterine/ovarian) sharing one cycleLength/selectedDay coordinate system, built on the same primitive as CycleWheel. 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 — 28-day cycle, selectedDay=3, independent outer/inner rings

Uterine (outer) + Ovarian (inner)

Outer ring has 4 phases, inner ring has 3 — each validated independently against the same shared cycleLength/selectedDay.

28-day cycle, day 3 selected. Uterine Cycle: Menstrual (5 days), Follicular (8 days), Ovulation (2 days), Luteal (13 days). Ovarian Cycle: Follicular (13 days), Ovulatory (3 days), Luteal (12 days).MenstrualFollicularOvulationLutealFollicularOvulatoryLuteal3
  • Menstrual
  • Follicular
  • Ovulation
  • Luteal
  • Follicular
  • Ovulatory
  • Luteal

API

Public props

import { ScientificCycleWheel } from "@nexwellaifactory/components";

<ScientificCycleWheel
  cycleLength={28}
  selectedDay={3}
  outerPhases={uterinePhases}   // validated independently
  innerPhases={ovarianPhases}   // validated independently
  outerLabel="Uterine Cycle"
  innerLabel="Ovarian Cycle"
  ariaLabel="28-day scientific cycle view, day 3 selected"
/>