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:T2f63,"use client"; import { createContext, useContext, useId, useMemo } from "react"; import type { ComponentProps, ComponentType, CSSProperties, ReactNode, } from "react"; import { Legend, ResponsiveContainer, Tooltip } from "recharts"; import type { DefaultLegendContentProps, DefaultTooltipContentProps, TooltipPayloadEntry, TooltipValueType, } from "recharts"; import { cn } from "@/lib/utils"; const THEMES = { dark: ".dark", light: "" } as const; const INITIAL_DIMENSION = { height: 200, width: 320 } as const; type TooltipNameType = number | string; export type ChartConfig = Record< string, { icon?: ComponentType; label?: ReactNode; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) >; interface ChartContextProps { config: ChartConfig; } const ChartContext = createContext(null); function useChart() { const context = useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }: ComponentProps<"div"> & { children: ComponentProps["children"]; config: ChartConfig; initialDimension?: { height: number; width: number }; }) { const uniqueId = useId(); const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`; return (

{children}

); } function ChartStyle({ id, config }: { config: ChartConfig; id: string }) { const colorConfig = Object.entries(config).filter( ([, itemConfig]) => itemConfig.theme ?? itemConfig.color ); if (colorConfig.length === 0) { return null; } return ( ); } const ChartTooltip = Tooltip; function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ComponentProps & ComponentProps<"div"> & { hideIndicator?: boolean; hideLabel?: boolean; indicator?: "dashed" | "dot" | "line"; labelKey?: string; nameKey?: string; } & Omit< DefaultTooltipContentProps, "accessibilityLayer" >) { const { config } = useChart(); const tooltipLabel = useMemo(() => { if (hideLabel || !payload?.length) { return null; } const [item] = payload; const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); const value = !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label; if (labelFormatter) { return (

{labelFormatter(value, payload)}

); } return value ? (

{value}

) : null; }, [ config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload, ]); if (!(active && payload?.length)) { return null; } const nestLabel = payload.length === 1 && indicator !== "dot"; return (

{nestLabel ? null :

{tooltipLabel}

}

{payload .filter((item) => item.type !== "none") .map((item, index) => { const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`; return ( ); })}

); } interface ChartTooltipItemProps { color?: string; config: ChartConfig; formatter: DefaultTooltipContentProps< TooltipValueType, TooltipNameType >["formatter"]; hideIndicator: boolean; index: number; indicator: "dashed" | "dot" | "line"; item: TooltipPayloadEntry; nestLabel: boolean; payload: readonly TooltipPayloadEntry[]; tooltipLabel: ReactNode; } function ChartTooltipItem({ color, config, formatter, hideIndicator, index, indicator, item, nestLabel, payload, tooltipLabel, }: ChartTooltipItemProps) { const key = `${item.name ?? item.dataKey ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); const indicatorColor = color ?? item.payload?.fill ?? item.color; const Icon = itemConfig?.icon; const formattedItem = getFormattedTooltipItem({ formatter, index, item, payload, }); if (formattedItem) { return formattedItem; } return (

svg]:size-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center" )} >

); } function getFormattedTooltipItem({ formatter, index, item, payload, }: Pick) { if (!(formatter && item.value !== undefined && item.name !== undefined)) { return null; } return (

{formatter(item.value, item.name, item, index, payload)}

); } function ChartTooltipMarker({ color, hidden, Icon, indicator, nested, }: { color: string | undefined; hidden: boolean; Icon: ChartConfig[string]["icon"]; indicator: "dashed" | "dot" | "line"; nested: boolean; }) { if (Icon) { return ; } return ( ); } function ChartTooltipValue({ value, }: { value: TooltipPayloadEntry["value"]; }) { if (value === null || value === undefined) { return null; } return ( {typeof value === "number" ? value.toLocaleString() : String(value)} ); } function ChartTooltipIndicator({ color, hidden, indicator, nested, }: { color: string | undefined; hidden: boolean; indicator: "dashed" | "dot" | "line"; nested: boolean; }) { if (hidden) { return null; } return (

); } const ChartLegend = Legend; function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }: ComponentProps<"div"> & { hideIcon?: boolean; nameKey?: string; } & DefaultLegendContentProps) { const { config } = useChart(); if (!payload?.length) { return null; } return (

{payload .filter((item) => item.type !== "none") .map((item) => { const key = `${nameKey ?? item.dataKey ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); return (

{itemConfig?.icon && !hideIcon ? ( ) : (

)} {itemConfig?.label}

); })}

); } function getPayloadConfigFromPayload( config: ChartConfig, payload: unknown, key: string ) { if (typeof payload !== "object" || payload === null) { return; } const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined; let configLabelKey = key; if ( key in payload && typeof payload[key as keyof typeof payload] === "string" ) { configLabelKey = payload[key as keyof typeof payload] as string; } else if ( payloadPayload && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === "string" ) { configLabelKey = payloadPayload[ key as keyof typeof payloadPayload ] as string; } return configLabelKey in config ? config[configLabelKey] : config[key]; } export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, }; 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":"@afterglow","registryDependencies":["@afterglow/theme"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/terminal/ui/chart.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]