Radial score
One number made of up to three parts. The ring is split by how much each part contributes; the rows below give the exact counts.
Preview
Sleep score
Excellent
29 Jun – 5 Jul
98
Duration: 7h 50m49/50
Bedtime: 20m earlier29/30
Interruptions: 5m20/20
Parts
Arcs are separated by a small gap and keep round ends. Hovering an arc or its row dims the others.
Usage
import { ChartCard, RadialScore } from "@/charts";
<RadialScore score={98} parts={[
{ label: "Duration", value: 49, max: 50, color: "var(--mf-chart-5)" },
…
]} />