Spend Flow

Installation

Usage

import { SpendFlow } from "@/components/spend-flow";

<SpendFlow
  title="Cloud spend"
  levels={[
    { kind: "Project", name: "Atlas", spent: 642.1, budget: 900 },
    { kind: "Environment", name: "Production", spent: 271.35, budget: 300 },
    { kind: "Service", name: "Search API", spent: 46.8, budget: 60 },
  ]}
/>

Each level is counted against the one above it, so the card steps in one level at a time and joins them with a tree line. Use it for cloud costs, an API that bills per call, or any product that meters usage against budgets at more than one level.

Examples

Over budget

A level that spends past its budget turns its marker, amount, and bar to the destructive color. While the flow is live, a level close to its limit can cross it as pulses arrive.

Static

With animated={false}, nothing moves and the numbers stay as given.

Behavior

• While the flow is on screen, pulses run from the left into the meter, then on to each level. The numbers count up from zero, then each level adds its perCall every time a pulse reaches it, and the call count under the source label goes up as pulses reach the meter.
• Each bar has segments cells. The spent share fills from the left and brightens toward the newest spend.
• With reduced motion enabled, or off screen, nothing moves and every number shows its given value.
• The whole flow is one SVG that scales to its container. It lays out at minWidth or wider (560px by default); in a narrower container it scrolls sideways and takes keyboard focus so it can be scrolled from the keyboard.
• Amounts are written with Intl.NumberFormat in locale and currency: what was spent to the cent, the budget in whole units.
• Screen readers hear one summary: where the traffic goes, then each level's spend and budget, and which levels are over.
• The caption in the corner says the numbers are illustrative. Change it when the flow shows real data.

Props

SpendFlow

SpendFlowLevel