{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "area-chart",
  "title": "area-chart",
  "description": "area-chart",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/chart"
  ],
  "files": [
    {
      "path": "src/components/ui/area-chart.tsx",
      "content": "'use client'\n\nimport { type ComponentProps, Fragment, useId, useMemo } from 'react'\nimport { Area, AreaChart as AreaChartPrimitive } from 'recharts'\nimport {\n  type BaseChartProps,\n  CartesianGrid,\n  Chart,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  constructCategoryColors,\n  DEFAULT_COLORS,\n  getColorValue,\n  valueToPercent,\n  XAxis,\n  YAxis,\n} from './chart'\n\nconst slugRegExp = /[^a-zA-Z0-9]/g\n\nconst fillNone = <stop stopColor=\"currentColor\" stopOpacity={0} />\n\nconst fillGradientEnd = <stop offset=\"95%\" stopColor=\"currentColor\" stopOpacity={0} />\n\nfunction getFillContent({\n  fillType,\n  stopOpacity,\n}: {\n  fillType: AreaChartProps['fillType']\n  stopOpacity: number\n}): React.ReactNode {\n  switch (fillType) {\n    case 'none':\n      return fillNone\n    case 'gradient':\n      return (\n        <>\n          <stop offset=\"5%\" stopColor=\"currentColor\" stopOpacity={stopOpacity} />\n          {fillGradientEnd}\n        </>\n      )\n    default:\n      return <stop stopColor=\"currentColor\" stopOpacity={stopOpacity} />\n  }\n}\n\nexport interface AreaChartProps extends BaseChartProps {\n  chartProps?: Omit<ComponentProps<typeof AreaChartPrimitive>, 'data' | 'stackOffset'>\n  areaProps?: Partial<ComponentProps<typeof Area>>\n  connectNulls?: boolean\n  fillType?: 'gradient' | 'solid' | 'none'\n}\n\nexport function AreaChart({\n  data = [],\n  dataKey,\n  colors = DEFAULT_COLORS,\n  connectNulls = false,\n  type = 'default',\n\n  fillType = 'gradient',\n  config,\n  children,\n\n  areaProps,\n\n  // Components\n  tooltip = true,\n  tooltipProps,\n\n  cartesianGridProps,\n\n  legend = true,\n  legendProps,\n\n  intervalType = 'equidistantPreserveStart',\n\n  valueFormatter = (value: number) => value.toString(),\n\n  // XAxis\n  displayEdgeLabelsOnly = false,\n  hideXAxis = false,\n  xAxisProps,\n\n  // YAxis\n  hideYAxis = false,\n  yAxisProps,\n\n  hideGridLines = false,\n  chartProps,\n  ...props\n}: AreaChartProps) {\n  const configKeys = useMemo(() => Object.keys(config), [config])\n  const categoryColors = useMemo(\n    () => constructCategoryColors(configKeys, colors),\n    [configKeys, colors]\n  )\n  const stacked = type === 'stacked' || type === 'percent'\n  const areaId = useId()\n\n  const configEntries = useMemo(() => Object.entries(config), [config])\n\n  return (\n    <Chart config={config} data={data} dataKey={dataKey} {...props}>\n      {({ onLegendSelect, selectedLegend }) => (\n        <AreaChartPrimitive\n          onClick={() => {\n            onLegendSelect(null)\n          }}\n          data={data}\n          margin={{\n            bottom: 0,\n            left: 0,\n            right: 0,\n            top: 5,\n          }}\n          stackOffset={type === 'percent' ? 'expand' : undefined}\n          {...chartProps}\n        >\n          {!hideGridLines && <CartesianGrid {...cartesianGridProps} strokeDasharray=\"3 3\" />}\n          <XAxis\n            className=\"**:[text]:fill-muted-fg\"\n            hide={hideXAxis}\n            displayEdgeLabelsOnly={displayEdgeLabelsOnly}\n            intervalType={intervalType}\n            {...xAxisProps}\n          />\n          <YAxis\n            className=\"**:[text]:fill-muted-fg\"\n            hide={hideYAxis}\n            tickFormatter={type === 'percent' ? valueToPercent : valueFormatter}\n            {...yAxisProps}\n          />\n\n          {legend && (\n            <ChartLegend\n              content={typeof legend === 'boolean' ? <ChartLegendContent /> : legend}\n              {...legendProps}\n            />\n          )}\n\n          {tooltip && (\n            <ChartTooltip\n              content={\n                typeof tooltip === 'boolean' ? (\n                  <ChartTooltipContent\n                    {...{\n                      hideIndicator: tooltipProps?.hideIndicator,\n                      hideLabel: tooltipProps?.hideLabel,\n                      cursor: tooltipProps?.cursor,\n                      indicator: tooltipProps?.indicator,\n                      labelSeparator: tooltipProps?.labelSeparator,\n                      formatter: tooltipProps?.formatter,\n                      labelFormatter: tooltipProps?.labelFormatter,\n                    }}\n                    accessibilityLayer\n                  />\n                ) : (\n                  tooltip\n                )\n              }\n              {...tooltipProps}\n            />\n          )}\n\n          {!children\n            ? configEntries.map(([category, values]) => {\n                const categoryId = `${areaId}-${category.replace(slugRegExp, '')}`\n                const strokeOpacity = selectedLegend && selectedLegend !== category ? 0.1 : 1\n                const stopOpacity = selectedLegend && selectedLegend !== category ? 0.1 : 0.5\n                const color = getColorValue(values.color || categoryColors.get(category))\n\n                return (\n                  <Fragment key={categoryId}>\n                    <defs>\n                      <linearGradient style={{ color }} id={categoryId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        {getFillContent({ fillType, stopOpacity })}\n                      </linearGradient>\n                    </defs>\n                    <Area\n                      dot={false}\n                      name={category}\n                      dataKey={category}\n                      stroke={color}\n                      style={{\n                        strokeWidth: 2,\n                        strokeOpacity,\n                      }}\n                      strokeLinejoin=\"round\"\n                      strokeLinecap=\"round\"\n                      isAnimationActive={true}\n                      connectNulls={connectNulls}\n                      stackId={stacked ? 'stack' : undefined}\n                      fill={`url(#${categoryId})`}\n                      {...areaProps}\n                    />\n                  </Fragment>\n                )\n              })\n            : children}\n        </AreaChartPrimitive>\n      )}\n    </Chart>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}