ConsumptionChart

1"use client";
2 
3import type { ComponentProps, ReactNode } from "react";
4import {
5  Area,
6  AreaChart,
7  Bar,
8  BarChart,
9  CartesianGrid,
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 { useControllableState } from "@/hooks/use-controllable-state";
22import { cn } from "@/lib/utils";
23 
24export type ConsumptionGranularityOption = "hourly" | "daily" | "monthly";
25 
26export interface ConsumptionSeries {
27  /** Stable id, e.g. "compute_unit_seconds". Keys into each point's values. */
28  id: string;
29  /** Legend and tooltip label. */
30  label: string;
31  /** Any CSS color; defaults to the --chart-n token for its position. */
32  color?: string;
33  /**
34   * Unit of the values, e.g. "CU-hrs" or "GB-mo". Series that don't share
35   * a unit are never stacked or summed together — CU-hours plus GB-months
36   * is not a quantity.
37   */
38  unit?: string;
39}
40 
41export interface ConsumptionPoint {
42  /** Axis and tooltip label, e.g. "Feb 4" or "14:00". */
43  label: string;
44  /** Series id -> value, already converted to the display unit. */
45  values: Record<string, number>;
46}
47 
48export type ConsumptionChartProps = Omit<
49  ComponentProps<"section">,
50  "children" | "onChange"
51> & {
52  /** Buckets, oldest first. */
53  data: ConsumptionPoint[];
54  /** Series to plot, in stacking order (first sits at the bottom). */
55  series: ConsumptionSeries[];
56  /** "area" reads as a trend, "bar" as discrete buckets. */
57  variant?: "area" | "bar";
58  /**
59   * Stack series into a total. Ignored when the visible series carry more
60   * than one unit, where stacking would be arithmetic on unlike things.
61   */
62  stacked?: boolean;
63  /** Controlled visible series. */
64  activeSeriesIds?: string[];
65  /** Uncontrolled initial visible series; defaults to all of them. */
66  defaultActiveSeriesIds?: string[];
67  onActiveSeriesIdsChange?: (ids: string[]) => void;
68  /** Controlled granularity; pair with `granularities` to show the switch. */
69  granularity?: ConsumptionGranularityOption;
70  defaultGranularity?: ConsumptionGranularityOption;
71  onGranularityChange?: (granularity: ConsumptionGranularityOption) => void;
72  /** Granularities to offer. Omit to hide the switch. */
73  granularities?: ConsumptionGranularityOption[];
74  /** Panel heading. */
75  title?: string;
76// … truncated