Demos

The bio clock with its default domains and severity scale.

"use client"

import { BioClock } from "@workspace/ui/predict/bio-clock"

export function BioClockDemo() {
  return (
    <div className="mx-auto flex flex-wrap items-center justify-center gap-3">
      <BioClock />
    </div>
  )
}

Usage

Use the bio clock to sum up a person's results on one dial. It has three hands:

• Domain hand — The dashed hand on the outer arc. It points at the domain with the highest value.
• Severity hand — The solid hand on the inner arc, with a bubble showing the score as given, such as 1.1.
• Age hand — The thick hand on the lower scale, from 0 to 100. The badge shows yearsValue and the biological age, such as +4 Years (51).

Hover or focus a domain on the outer arc to see a tooltip with its full name and value.

Import it from @workspace/ui/predict/bio-clock.

Defaults

• Domains — Seven segments: IFR, VAF, MHF, BMF, PNF, CMF, and RFF, each with a full name for its tooltip. PNF has the highest value, so the domain hand points at it.
• Severity — A 0 to 5 scale in five steps, coloured --status-normal, --status-mild, --status-moderate, --status-severe, and --status-extreme. The score is 1.1.
• Age — bioAge is 60, and the badge shows +7 YEARS (60). Always pass yearsValue with real data, or the badge shows the placeholder.

Notes

• The clock is a fixed square, 450 pixels by default. Set size to change it. On narrow screens, pick a size that fits or pass a number from your own layout.
• currentValue replaces severity.current, so you can keep one scale and change only the score.
• The age hand stops at 0 and 100. The severity hand does not, so keep currentValue inside the scale.
• When two domains share the highest value, the hand points at the first.
• Colours are any CSS colour. Use the --color-status-* variables to follow the theme.
• The bubble and badge show numbers as you pass them. Round them first, such as Math.round(age * 10) / 10.
• Each domain can be reached with Tab, which opens its tooltip.

Examples

Custom values

Pass bioAge, yearsValue, and currentValue to show a person's own result.

"use client"

import { BioClock } from "@workspace/ui/predict/bio-clock"

export function BioClockCustom() {
  return (
    <div className="mx-auto flex flex-wrap items-center justify-center gap-3">
      <BioClock bioAge={42} yearsValue="-3 Years" currentValue={0.6} />
    </div>
  )
}

Custom domains

Pass domains to set each segment's label, full name, colour, and value. HRT has the highest value, so the domain hand points at it.

"use client"

import { BioClock, type DomainSegment } from "@workspace/ui/predict/bio-clock"

const domains: DomainSegment[] = [
  { label: "HRT", fullName: "Heart health", color: "var(--color-status-normal)", value: 80 },
  { label: "MET", fullName: "Metabolic health", color: "var(--color-status-mild)", value: 60 },
  { label: "INF", fullName: "Inflammation", color: "var(--color-status-moderate)", value: 45 },
  { label: "HRM", fullName: "Hormones", color: "var(--color-status-normal)", value: 70 },
  { label: "KID", fullName: "Kidney function", color: "var(--color-status-severe)", value: 30 },
]

export function BioClockDomains() {
  return (
    <div className="mx-auto flex flex-wrap items-center justify-center gap-3">
      <BioClock domains={domains} bioAge={51} yearsValue="+4 Years" currentValue={2.4} />
    </div>
  )
}

Custom severity scale

Pass severity to change the inner arc. This one runs from 0 to 10 in three steps, with a score of 6.5.

"use client"

import { BioClock, type SeverityScale } from "@workspace/ui/predict/bio-clock"

const severity: SeverityScale = {
  ranges: [
    { min: 0, max: 4, color: "var(--color-status-normal)" },
    { min: 4, max: 7, color: "var(--color-status-mild)" },
    { min: 7, max: 10, color: "var(--color-status-extreme)" },
  ],
  current: 6.5,
}

export function BioClockSeverity() {
  return (
    <div className="mx-auto flex flex-wrap items-center justify-center gap-3">
      <BioClock severity={severity} bioAge={47} yearsValue="+2 Years" />
    </div>
  )
}

Sizes

size takes sm (320), default (450), lg (600), xl (720), or any number of pixels. This shows 240 and sm.

"use client"

import { BioClock } from "@workspace/ui/predict/bio-clock"

export function BioClockSizes() {
  return (
    <div className="mx-auto flex flex-wrap items-end justify-center gap-6">
      <BioClock size={240} />
      <BioClock size="sm" />
    </div>
  )
}

Props

Unlisted props pass through to the wrapping div, which also takes a ref.

BioClock

DomainSegment

Segment has label, color, and an optional value. Its tooltip shows the label as the name.

SeverityScale

SeverityRange

ClockGaugeProps is the type of the props.