Waterfall

The simple version

Each step from the running total before it to the one after. The same structure with almost no styling: a good place to start your own.

How it’s built

A waterfall is a Bar that starts where the one before it ended. running(amounts) does that arithmetic: it turns a list of ups and downs into a from and a to for each step. The slat draws a Bar from d.from to d.to, a Tick at d.to to link the step to the next one, and a Label at whichever end is further along. A class on the slat’s root says whether the step is money in, money out, or the total, and the CSS colours it from there.

The gallery version adds:

• An expense you can cut. Each name is a <button> inside the Label, and a click adds that row to a signal of cut expenses, which is fed back through running(), so the later steps, the savings and the headline all move together.
• A cut step that keeps its place. It has no length, and a dashed Bar is left behind to show where it was.