Revenue explorer

Arrow keys

On the plot, step the scrubbed month. On the brush or its handles, move the window or one edge by a month.

Shift+Arrow keys

Move the brush or a handle by three months.

HomeorEnd

Jump to the range start or end (plot), or to the timeline edges (brush).

Escape

Clears the scrubbed month on the plot.

• The brush window and both handles are role="slider" with aria-valuenow and month-name aria-valuetext.
• Series toggles use aria-pressed and the comparison toggle is a role="switch" with aria-checked.
• The plot is a focusable role="img" with aria-describedby pointing at the live summary.

• Paths, axes and ticks glide to the new range on springs while totals roll with Animated counter.
• Reduced motion jumps values instantly and replaces movement with opacity changes.

• Chart width follows its container through a ResizeObserver, so axes and paths recompute at any width.
• Below a 560px container padding tightens and the comparison context wraps under the KPIs.
• The plot uses touch-action pan-y so vertical page scroll still works, while the brush uses touch-action none and pointer capture for dragging.

• Geometry is computed from 24 months of data; paths and ticks animate on springs rather than a per-frame loop.
• It is SVG with no downsampling, so long daily series should be aggregated to months before passing them in.

• Use for MRR or other monthly flow metrics (new, expansion, churn) on an analytics page.
• Replace DATA and the month calendar in revenue-data.ts with your billing series; geometry, summaries and y domains are computed from it.
• No props or callbacks; lift the data into props if you load it at runtime.

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