Diverging Bars

Usage

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

<DivergingBars
  title='Net gain'
  points={[
    { label: 'Aug', value: 1180 },
    { label: 'Sep', value: -240 },
    { label: 'Oct', value: 1560 },
  ]}
  change={0.511}
  changeLabel='on this time last year'
/>

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

Props

pointsDivergingBarsPoint[]

A bar each, oldest first: a short label under it, a detail for its tooltip, and its value, above zero for a gain and below for a loss.

titlestring

Heads the card.

periods, period, onPeriodChangestring[], string, (period: string) => void

The switch in the header. Swap the points when one’s chosen, and each month moves to its new value.

valuenumber = the net of every month

The big number, which counts up to each new value.

change, changeLabelnumber, string

How far the big number moved, as a fraction, then quieter words beside it. The words go when the card is narrow.

format, formatAxis(value: number) => string = pounds with a sign

How an amount reads in the big number and the tooltip, and on the axis, where it’s compact, like −£1k.

heightnumber = 200

The plot’s height in px. In a card with a height of its own, the plot fills what’s left.

Notes

• Gains rise in green and losses fall in pink, both held back to a third of their strength, so the one in hand stands out at full. Its tooltip sits over the end of a gain and under the end of a loss.
• The zero line is a hairline a step stronger than the gridlines, and the losses start a pixel under it, so it always shows between them.
• The bars grow out of the zero line one after another the first time it’s seen. A new period moves each month to its new value, through the line where it has to, and months that arrive or leave grow and fold at the line.
• The arrow keys, Home and End move along the months, and each is read out as a gain or a loss. With reduced motion, it all lands at once.
• Values are sample data.