Radial Progress

Usage

import { RadialProgress } from '@wdzyi/ui';

<RadialProgress
  title='Budget'
  rings={[
    { label: 'Groceries', value: 312, goal: 400 },
    { label: 'Eating out', value: 148, goal: 160 },
    { label: 'Transport', value: 64, goal: 120 },
  ]}
  lowerIsBetter
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

ringsRadialProgressRing[]

Outermost first, each with a label, a value, and the goal or budget it’s measured against. Three or four read best.

titlestring

Over the rings, beside the switch.

periods, period, onPeriodChangestring[], string, function

The periods to switch between, the one shown, and what to do when another is chosen. Swap the rings to match, and each arc sweeps on to its new length.

lowerIsBetterboolean = false

For a budget, where going over is the bad news, and shows in the negative colour. Otherwise a goal that’s reached shows in the positive one.

format(value: number) => string

How an amount reads in the legend and the tooltip. By default, whole pounds.

heightnumber = 200

The rings’ height in px. In a card given a height of its own, they take what’s left.

Notes

• The rings are sized from the room they’re given, up to just under half the card’s width, so the legend keeps its own. Their thickness and the number in the middle scale with them.
• A ring is picked by its whole band, so the pointer needn’t find the arc itself. The ring you rest on, or the row you rest on, takes the foil while the others step back. Press a row to keep it there.
• Focus the rings and use the arrows to go from one to the next. A tooltip at the end of each arc says what’s left, or how far over it is.
• The amounts hide when the card is under 440px wide, and the middle drops its caption, then its number, as the rings get small. With reduced motion, the arcs are drawn at their lengths from the start.
• Values are sample data.