Usage forecast

Arrow keys

On the plot, steps one day; on the budget handle, moves the budget one step.

Page uporPage down

Jumps a week on the plot, or five steps on the budget handle.

HomeorEnd

Jumps to the first or last day, or to the minimum or maximum budget.

Escape

Clears the inspected day on the plot.

• The plot and the budget handle are role="slider" elements with aria-valuetext in plain words.
• The chart SVG has a full sentence label and is described by a data table; a polite live region reads the forecast summary.
• Alert rules are toggle buttons with aria-pressed and labels that include their current status.

• The budget line follows drags directly and settles on a snappy spring when released or moved by keyboard.
• The crossing marker and inspection panel follow the scrubbed day on springs; numbers roll with the animated counter.
• Reduced motion drops the springs and applies changes immediately.

• Chart width follows its container through a ResizeObserver, and below 560px KPIs and the legend tighten.
• The plot uses touch-action pan-y for scrubbing, while the budget handle uses touch-action none so it can be dragged on touch.

• SVG over daily readings for one billing period; the forecast cone is computed once per change, not per frame.
• Dragging the budget updates one line and label; there is no loop at rest.

• Use on a billing or usage page to warn customers before they hit a budget.
• Replace METRICS and daily readings in usage-data.ts with your metering data.
• Persist budget and alert rule changes to your billing settings; they are local state in the preview.

The full library index for assistants is at /llms.txt.