AutoscaleChart

1"use client";
2 
3import { useId } from "react";
4import type { ComponentProps } from "react";
5import {
6  Area,
7  AreaChart,
8  ReferenceArea,
9  ReferenceLine,
10  XAxis,
11  YAxis,
12} from "recharts";
13 
14import type { ChartConfig } from "@/components/ui/chart";
15import {
16  ChartContainer,
17  ChartTooltip,
18  ChartTooltipContent,
19} from "@/components/ui/chart";
20import { Skeleton } from "@/components/ui/skeleton";
21import { cn } from "@/lib/utils";
22 
23export interface AutoscalePoint {
24  /** Short time label, e.g. "12:00". */
25  label: string;
26  /** Compute units in use at this moment. */
27  cu: number;
28}
29 
30const HEADROOM = 1.08;
31const NICE_STEPS = [1, 2, 2.5, 5, 10] as const;
32 
33/**
34 * Rounds the top of the scale to a readable number. Left at peak x 1.08
35 * the axis reads 4.32, which is a number nobody asked for.
36 */
37const niceCeiling = (peak: number) => {
38  const raw = peak * HEADROOM;
39 
40  if (raw <= 0) {
41    return 1;
42  }
43 
44  const magnitude = 10 ** Math.floor(Math.log10(raw));
45  const normalized = raw / magnitude;
46  const step = NICE_STEPS.find((candidate) => normalized <= candidate) ?? 10;
47 
48  return step * magnitude;
49};
50 
51const formatCu = (cu: number) => {
52  const rounded = Math.round(cu * 100) / 100;
53 
54  return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(2);
55};
56 
57export type AutoscaleChartProps = Omit<ComponentProps<"div">, "children"> & {
58  /** Compute-unit readings over time, oldest first. */
59  data: AutoscalePoint[];
60  /** Autoscale lower bound (CU); the compute never scales below it. */
61  min: number;
62  /** Autoscale upper bound (CU); the compute never scales above it. */
63  max: number;
64  /** Panel heading. */
65  title?: string;
66  isLoading?: boolean;
67};
68 
69/* ─────────────────────────────────────────────────────────
70 * AUTOSCALE STORYBOARD
71 *
72 *  envelope  the band between min and max is drawn first,
73 *            so the reading is always seen against the
74 *            room it has to move in
75 *  bounds    dashed lines with mono labels at both edges;
76 *            a ceiling you can't see is a ceiling you'll
77 *            hit without knowing
78 *  scrub     Recharts' accessibility layer gives the plot
79 *            focus and arrow keys; the tooltip names the
80 *            moment and its CU
81// … truncated