50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1b24,"use client"; import { useId } from "react"; import type { ComponentProps } from "react"; import { Area, AreaChart, ReferenceArea, ReferenceLine, XAxis, YAxis, } from "recharts"; import type { ChartConfig } from "@/components/ui/chart"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; export interface AutoscalePoint { /** Short time label, e.g. "12:00". */ label: string; /** Compute units in use at this moment. */ cu: number; } const HEADROOM = 1.08; const NICE_STEPS = [1, 2, 2.5, 5, 10] as const; /** * Rounds the top of the scale to a readable number. Left at peak x 1.08 * the axis reads 4.32, which is a number nobody asked for. */ const niceCeiling = (peak: number) => { const raw = peak * HEADROOM; if (raw <= 0) { return 1; } const magnitude = 10 ** Math.floor(Math.log10(raw)); const normalized = raw / magnitude; const step = NICE_STEPS.find((candidate) => normalized <= candidate) ?? 10; return step * magnitude; }; const formatCu = (cu: number) => { const rounded = Math.round(cu * 100) / 100; return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(2); }; export type AutoscaleChartProps = Omit, "children"> & { /** Compute-unit readings over time, oldest first. */ data: AutoscalePoint[]; /** Autoscale lower bound (CU); the compute never scales below it. */ min: number; /** Autoscale upper bound (CU); the compute never scales above it. */ max: number; /** Panel heading. */ title?: string; isLoading?: boolean; }; /* ───────────────────────────────────────────────────────── * AUTOSCALE STORYBOARD * * envelope the band between min and max is drawn first, * so the reading is always seen against the * room it has to move in * bounds dashed lines with mono labels at both edges; * a ceiling you can't see is a ceiling you'll * hit without knowing * scrub Recharts' accessibility layer gives the plot * focus and arrow keys; the tooltip names the * moment and its CU * ───────────────────────────────────────────────────────── */ const cuTooltipFormatter = ( value: unknown, _name: unknown, entry: { color?: string } ) => ( <>

Compute {formatCu(Number(value))} CU

); export const AutoscaleChart = ({ className, data, isLoading = false, max, min, title = "Autoscaling", ...props }: AutoscaleChartProps) => { const gradientId = `autoscale-fill-${useId().replaceAll(":", "")}`; if (isLoading) { return (

); } const current = data.at(-1)?.cu ?? 0; const ceiling = niceCeiling(Math.max(max, ...data.map((point) => point.cu))); const config: ChartConfig = { cu: { color: "var(--primary)", label: "Compute units" }, }; return (

{title} {formatCu(current)} CU / {formatCu(min)}–{formatCu(max)}

{/* The band the compute may move within. */} } cursor={{ stroke: "var(--border)", strokeDasharray: "2 3" }} />

); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/skeleton.json","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/chart.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/autoscale-chart/autoscale-chart.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]