61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T3afd,"use client"; import * as React from "react"; import * as RechartsPrimitive from "recharts"; import type { TooltipValueType } from "recharts"; import { cn } from "@/lib/utils"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; const CHART_KEY_PATTERN = /^[a-zA-Z0-9_-]+$/; const CHART_COLOR_PATTERN = /^[\w\s#(),.%+\-/]+$/; const SAFE_COLOR_FUNCTIONS = new Set([ "calc", "clamp", "color", "color-mix", "contrast-color", "hsl", "hsla", "hwb", "lab", "lch", "light-dark", "max", "min", "oklab", "oklch", "rgb", "rgba", "var", ]); const INITIAL_DIMENSION = { width: 320, height: 200 } as const; type TooltipNameType = number | string; export type ChartConfig = Record< string, { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) >; type ChartContextProps = { config: ChartConfig; }; const ChartContext = React.createContext(null); function useChart() { const context = React.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 }: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps["children"]; initialDimension?: { width: number; height: number; }; }) { const uniqueId = React.useId(); const chartId = normalizeChartId(`chart-${uniqueId}`); return (

{children}

); } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const css = Object.entries(THEMES) .flatMap(([theme, prefix]) => { const variables = Object.entries(config).flatMap(([key, itemConfig]) => { if (!CHART_KEY_PATTERN.test(key)) { return []; } const color = itemConfig.theme?.[theme as keyof typeof THEMES] ?? itemConfig.color; if (!isSafeChartColor(color)) { return []; } return [` --color-${key}: ${color.trim()};`]; }); if (!variables.length) { return []; } return [`${prefix} [data-chart="${normalizeChartId(id)}"] {\n${variables.join("\n")}\n}`]; }) .join("\n"); if (!css) { return null; } return ; }; function normalizeChartId(id: string) { return id.replace(/[^a-zA-Z0-9_-]/g, "-"); } function isSafeChartColor(color: string | undefined): color is string { if (!color || color.length > 256 || !CHART_COLOR_PATTERN.test(color)) { return false; } for (const [, name] of color.matchAll(/([a-zA-Z-]+)\s*\(/g)) { if (!SAFE_COLOR_FUNCTIONS.has(name.toLowerCase())) { return false; } } return true; } const ChartTooltip = RechartsPrimitive.Tooltip; type ChartContentHtmlProps = Omit< React.ComponentProps<"div">, "children" | "dangerouslySetInnerHTML" > & { [attribute: `data-${string}`]: string | number | boolean | null | undefined }; type ChartTooltipContentProps = Partial< Pick< RechartsPrimitive.TooltipContentProps, "active" | "payload" | "label" | "labelFormatter" | "formatter" | "accessibilityLayer" > > & { className?: string; htmlProps?: ChartContentHtmlProps; hideLabel?: boolean; hideIndicator?: boolean; indicator?: "line" | "dot" | "dashed"; labelClassName?: string; color?: string; nameKey?: string; labelKey?: string; }; function ChartTooltipContent({ active, payload, className, htmlProps, accessibilityLayer, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps) { const { config } = useChart(); const tooltipLabel = React.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" || typeof label === "number") ? (config[label]?.label ?? label) : itemConfig?.label; if (labelFormatter) { return (

{labelFormatter(value, payload)}

); } if (value === undefined || value === null || value === false || value === "") { return null; } return

{value}

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

{!nestLabel ? tooltipLabel : null}

{payload.map((item, index) => { if (item.type === "none") return null; const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); const indicatorColor = color ?? item.payload?.fill ?? item.color; let formatted: React.ReactNode; if (formatter && item.value !== undefined && item.name != null) { formatted = formatter(item.value, item.name, item, index, payload); if (formatted == null) return null; } const formattedTuple = Array.isArray(formatted) ? formatted : undefined; const displayName = formattedTuple ? formattedTuple[1] : (itemConfig?.label ?? item.name); const displayValue = formattedTuple ? formattedTuple[0] : item.value == null ? null : typeof item.value === "number" ? item.value.toLocaleString() : String(item.value); return (

svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-foreground", indicator === "dot" && "items-center", )} > {formatted !== undefined && !formattedTuple ? ( formatted ) : ( <> {itemConfig?.icon ? ( ) : ( !hideIndicator && (

) )}

{nestLabel ? tooltipLabel : null} {displayName}

{displayValue != null && ( {displayValue} )}

)}

); })}

); } const ChartLegend = RechartsPrimitive.Legend; function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, htmlProps, }: Pick & { className?: string; htmlProps?: ChartContentHtmlProps; hideIcon?: boolean; nameKey?: string; }) { const { config } = useChart(); if (!payload?.length) { return null; } return (

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

svg]:h-3 [&>svg]:w-3 [&>svg]:text-foreground", )} > {itemConfig?.icon && !hideIcon ? ( ) : (

)} {itemConfig?.label ?? item.value}

); })}

); } function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) { if (typeof payload !== "object" || payload === null) { return undefined; } const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined; let configLabelKey: string = 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 { ChartSelect, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, }; function ChartSelect({ label, value, onValueChange, options, }: { label: string; value: string; onValueChange: (value: string) => void; options: { value: string; label: string }[]; }) { const id = React.useId(); return (

{label}

); } 60:["$","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@^3.10.1",{"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@^3.10.1"}]]}]}]]}],["$","$L61",null,{"namespace":"@neobrutal-ui","registryDependencies":["https://neobrutal-ui.andongmin.com/r/select.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/components/ui/chart.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]