Liquid Bars

Usage

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

<LiquidBars
  title='Spending'
  points={[
    { label: 'Mon', value: 42 },
    { label: 'Tue', value: 18 },
    { label: 'Wed', value: 64 },
    { label: 'Thu' },
  ]}
  limit={100}
  lowerIsBetter
/>

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

Props

pointsLiquidBarsPoint[]

A column each, in order, with a label, a value, and a detail for screen readers. Leave the value out for a day still to come. The last with a value is foil.

titlestring

Over the chart, 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 points to match, and the levels slosh to their new heights.

limitnumber = a little over the biggest

What a full column holds, such as a daily budget. A day over it fills to the brim, and its value comes up in the negative colour.

valuenumber = the days added up

The big number.

change, changeLabelnumber, string

How far it moved, as a fraction, and a quieter word on what against. Without a change, there’s none shown.

lowerIsBetterboolean = false

For spending, where going up is the bad news.

format(value: number) => string

How a value reads in the number and as it comes up. By default, whole pounds.

heightnumber = 200

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

Notes

• Each surface is two slow waves crossing, drawn a frame at a time and only while the card is on screen. It stirs while its level moves, and lifts a little under the pointer.
• The levels ride a soft spring, so they rise one after another as the card comes into view, and settle with the smallest overshoot when the period changes.
• Rest on a column, tap it, or focus the plot and use the arrows, and its value comes up out of the liquid. Days still to come stand empty, and the keyboard passes over them.
• With reduced motion, the surfaces are still and the levels start where they end.
• Values are sample data.