AutoscaleChart

Autoscaling compute units over time against the min and max bounds, with a scrubable readout.

AutoscaleChart plots a compute’s used compute units (CU) over time inside its autoscaling envelope: the band between the min and max bounds is shaded, the bounds sit on dashed hairlines, and the usage line rides between them. Scrub with a pointer or the arrow keys to read the CU at any moment; the marker turns amber at the ceiling and gray at the floor. It is presentational: the bounds come from Neon, the series from your metrics.

Behavior

• Envelope the shaded band spans min to max; the usage line and its area fill sit inside it, so pinning the ceiling or resting at the floor is obvious.
• Scrub move a pointer across the chart, or focus it and use the left and right arrow keys, to inspect a reading. The dot is amber at the ceiling, gray at the floor, green while scaling.
• Readout the header shows the latest CU and the min–max range; the tooltip shows the scrubbed point.

Install

npx shadcn@latest add https://ui.neon.com/r/autoscale-chart.json

Usage

import { AutoscaleChart } from "@/components/neon-ui/autoscale-chart";

<AutoscaleChart data={usage} min={0.25} max={4} />;

data is an array of { label, cu } readings, oldest first. min and max are the autoscaling bounds in CU.

Wiring to Neon

A server component reads the endpoint’s autoscaling bounds, then plots a CU series from your metrics store:

import { createNeonClient } from "@/lib/neon-client";

const neon = createNeonClient(process.env.NEON_API_KEY);
const { data: endpoints } = await neon.postgres.endpoints.listByBranch(
  projectId,
  branchId
);
const [endpoint] = endpoints ?? [];

<AutoscaleChart
  data={metrics}
  min={endpoint.autoscaling_limit_min_cu}
  max={endpoint.autoscaling_limit_max_cu}
/>;

The control plane exposes the bounds; the per-interval CU timeseries comes from your own monitoring (Datadog, Grafana, a metrics table).

Props

Accessibility

The chart is a focusable control with a descriptive label and arrow-key scrubbing; the SVG itself is decorative (aria-hidden), and the bound and readout values are plain text. There is no motion to reduce.