{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "title": "Chart",
  "description": "Chart components built on Recharts.",
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "registry/default/ui/chart.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { cn } from '@/lib/utils';\n\nconst THEMES = { light: '', dark: '.dark' } as const;\n\nexport type TChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype TChartContextProps = {\n  config: TChartConfig;\n};\n\nconst ChartContext = React.createContext<TChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<'div'> & {\n  config: TChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >['children'];\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n  const context = React.useMemo(() => ({ config }), [config]);\n\n  return (\n    <ChartContext.Provider value={context}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: TChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  );\n  if (!colorConfig.length) return null;\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join('\\n')}\n}\n`\n          )\n          .join('\\n'),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\ntype TTooltipValueType = number | string | Array<number | string>;\ntype TTooltipNameType = number | string;\n\ntype TChartTooltipContentProps = React.ComponentProps<\n  typeof RechartsPrimitive.Tooltip\n> &\n  React.ComponentProps<'div'> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: 'line' | 'dot' | 'dashed';\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<\n      TTooltipValueType,\n      TTooltipNameType\n    >,\n    'accessibilityLayer'\n  >;\n\ntype TChartTooltipLabelProps = Pick<\n  TChartTooltipContentProps,\n  'payload' | 'label' | 'labelKey' | 'labelClassName' | 'labelFormatter'\n> & { config: TChartConfig; hideLabel?: boolean };\n\nfunction ChartTooltipLabel({\n  config,\n  payload,\n  label,\n  labelKey,\n  labelClassName,\n  labelFormatter,\n  hideLabel,\n}: TChartTooltipLabelProps) {\n  if (hideLabel || !payload?.length) return null;\n\n  const [item] = payload;\n  const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;\n  const itemConfig = getPayloadConfigFromPayload(config, item, key);\n  const value =\n    !labelKey && typeof label === 'string'\n      ? config[label as keyof typeof config]?.label || label\n      : itemConfig?.label;\n\n  if (labelFormatter) {\n    return (\n      <div className={cn('font-medium', labelClassName)}>\n        {labelFormatter(value, payload)}\n      </div>\n    );\n  }\n\n  if (!value) return null;\n\n  return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n}\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: TChartTooltipContentProps) {\n  const { config } = useChart();\n\n  if (!active || !payload?.length) return null;\n\n  const tooltipLabel = (\n    <ChartTooltipLabel\n      config={config}\n      payload={payload}\n      label={label}\n      labelKey={labelKey}\n      labelClassName={labelClassName}\n      labelFormatter={labelFormatter}\n      hideLabel={hideLabel}\n    />\n  );\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn(\n        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index: number) => {\n          const itemKey = `${nameKey || item.name || item.dataKey || 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, itemKey);\n          const indicatorColor = color || item.payload?.fill || item.color;\n\n          return (\n            <div\n              key={`${item.dataKey ?? item.name ?? index}-${index}`}\n              className={cn(\n                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',\n                indicator === 'dot' && 'items-center'\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',\n                          {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent':\n                              indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          }\n                        )}\n                        style={\n                          {\n                            '--color-bg': indicatorColor,\n                            '--color-border': indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      'flex flex-1 justify-between leading-none',\n                      nestLabel ? 'items-end' : 'items-center'\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value && (\n                      <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: React.ComponentProps<'div'> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n  if (!payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-4',\n        verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || 'value'}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction getPayloadConfigFromPayload(\n  config: TChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== 'object' || payload === null) return undefined;\n  const payloadPayload =\n    'payload' in payload &&\n    typeof payload.payload === 'object' &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n  let configLabelKey: string = key;\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === 'string'\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}