Share Ring

#Installation & usage

Use a share ring when the question is what a whole is made of and the parts are few: a dish's calories by protein, carbs and fat, a month's spending by category, a day's hours by activity. The cells run clockwise from twelve o'clock, each lit in the tone of the part it falls in, so the split reads at a glance and the cells can be counted. The total sits in the bowl in big mono figures that count to each new value, with its unit under it, and the legend gives each part its amount and its share. For many parts, or parts inside parts, use a Treemap; for one quantity against a limit, a Segmented Meter.

import { ShareRing } from '@youj/react'

<ShareRing
  unit="kcal"
  // `value` sizes each part; `amount` is what the legend shows for it.
  segments={[
    { id: 'protein', label: 'Protein', value: 152, amount: 38 },
    { id: 'carbs', label: 'Carbs', value: 256, amount: 64 },
    { id: 'fat', label: 'Fat', value: 198, amount: 22 },
  ]}
  amountFormat={{ style: 'unit', unit: 'gram', unitDisplay: 'short' }}
/>

Each part takes whole cells by the largest remainder, so the parts always fill exactly the cells they're due and the shares in the legend always add up to 100%. value sizes a part on the ring and amount is what its row shows, so a macro can take its share of the calories while the legend lists its grams. Parts take the chart colors in turn, or a tone of their own.

max sets the ring's full scale: above the total, the rest of the ring stays dark (606 kcal of a 2,000 kcal day). value puts a different figure in the bowl, format formats it, and children replaces the bowl altogether. Pointing at a part, on the dial or in the legend, dims the others and puts its amount and share in the bowl; highlight does the same from your own state.

The legend sits beside the dial when the ring has the room and under it when it hasn't (legend="side", the default), always under it with legend="below", or not at all with legend={false}, when the parts are still spoken. At size="xs" the ring is 28px across, with no bowl and no legend: small enough to sit in a pill, as the timers in the Procedure block do.

#Description

#Code