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:T49f0,"use client" import { createContext, use, useCallback, useId, useMemo, useState, type ReactElement, } from "react" import { twJoin, twMerge } from "cn" import { ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, } from "react-aria-components/ToggleButtonGroup" import type { CartesianGridProps as CartesianGridPrimitiveProps, CartesianGridProps, LegendPayload, LegendProps, TooltipProps as TooltipPrimitiveProps, XAxisProps as XAxisPropsPrimitive, YAxisProps as YAxisPrimitiveProps, } from "recharts" import { CartesianGrid as CartesianGridPrimitive, Legend as LegendPrimitive, ResponsiveContainer, Tooltip as TooltipPrimitive, XAxis as XAxisPrimitive, YAxis as YAxisPrimitive, } from "recharts" import type { ContentType as LegendContentType } from "recharts/types/component/DefaultLegendContent" import type { NameType, Props as TooltipContentProps, ValueType, } from "recharts/types/component/DefaultTooltipContent" import type { ContentType as TooltipContentType } from "recharts/types/component/Tooltip" import { cx } from "@/lib/primitive" // #region Chart Types type ChartType = "default" | "stacked" | "percent" type ChartLayout = "horizontal" | "vertical" | "radial" type IntervalType = "preserveStartEnd" | "equidistantPreserveStart" type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: ChartColorKeys | (string & {}); theme?: never } | { color?: never; theme: Record } ) } type ChartDatum = Record const CHART_COLORS = { "chart-1": "var(--chart-1)", "chart-2": "var(--chart-2)", "chart-3": "var(--chart-3)", "chart-4": "var(--chart-4)", "chart-5": "var(--chart-5)", } as const type ChartColorKeys = keyof typeof CHART_COLORS | (string & {}) const DEFAULT_COLORS = [ "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", ] as const // #endregion // #region Chart Context type ChartContextProps = { config: ChartConfig data?: ChartDatum[] layout: ChartLayout dataKey?: string selectedLegend: string | null onLegendSelect: (legendItem: string | null) => void } const ChartContext = createContext(null) export function useChart() { const context = use(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } // #endregion // #region helpers export function valueToPercent(value: number) { return `${(value * 100).toFixed(0)}%` } const constructCategoryColors = ( categories: string[], colors: readonly ChartColorKeys[] ): Map => { const categoryColors = new Map() categories.forEach((category, index) => { const color = colors[index % colors.length] if (color !== undefined) { categoryColors.set(category, color) } }) return categoryColors } const getColorValue = (color?: string): string => { if (!color) { return "var(--chart-1)" } return CHART_COLORS[color as "chart-1"] ?? color } 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 as keyof typeof config] } // #endregion // #region Base Chart Components interface BaseChartProps< TValue extends ValueType, TName extends NameType, > extends React.HTMLAttributes { config: ChartConfig data: ChartDatum[] dataKey: string colors?: readonly (ChartColorKeys | (string & {}))[] type?: ChartType intervalType?: IntervalType layout?: ChartLayout valueFormatter?: (value: number) => string tooltip?: TooltipContentType | boolean tooltipProps?: Omit & { hideLabel?: boolean labelSeparator?: boolean hideIndicator?: boolean indicator?: "line" | "dot" | "dashed" nameKey?: string labelKey?: string } cartesianGridProps?: CartesianGridProps legend?: LegendContentType | boolean legendProps?: Omit< React.ComponentProps, "content" | "ref" > xAxisProps?: XAxisPropsPrimitive yAxisProps?: YAxisPrimitiveProps // XAxis displayEdgeLabelsOnly?: boolean hideGridLines?: boolean hideXAxis?: boolean hideYAxis?: boolean } const Chart = ({ id, className, children, config, data, dataKey, ref, layout = "horizontal", ...props }: Omit, "children"> & Pick & { config: ChartConfig layout?: ChartLayout children: ReactElement | ((props: ChartContextProps) => ReactElement) }) => { const uniqueId = useId() const chartId = useMemo( () => `chart-${id || uniqueId.replace(/:/g, "")}`, [id, uniqueId] ) const [selectedLegend, setSelectedLegend] = useState(null) const onLegendSelect = useCallback((legendItem: string | null) => { setSelectedLegend(legendItem) }, []) const _data = data ?? [] const _dataKey = dataKey ?? "value" const value = { config, selectedLegend, onLegendSelect, data: _data, dataKey: _dataKey, layout, } return (

.recharts-dot]:stroke-foreground/10", className )} {...props} > {typeof children === "function" ? children(value) : children}

) } const THEMES = { light: "", dark: ".dark" } as const const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (