{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "area-chart-custom-format-example",
  "title": "Area Chart Custom Format",
  "description": "area-chart-custom-format-example",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/area-chart",
    "https://intentui.com/r/card",
    "https://intentui.com/r/use-mobile"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/area-chart/area-chart-custom-format-example.tsx",
      "content": "'use client'\n\nimport { useMemo } from 'react'\nimport type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'\nimport { AreaChart } from '@/components/ui/area-chart'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { useIsMobile } from '@/hooks/use-mobile'\n\nexport default function AreaChartCustomFormatDemo() {\n  const isMobile = useIsMobile()\n  const formatCompact = (value: number) =>\n    new Intl.NumberFormat('en-US', {\n      notation: 'compact',\n      compactDisplay: 'short',\n    }).format(value)\n  const data = useMemo(() => {\n    return Array.from({ length: 12 }, (_, i) => {\n      const month = new Date(0, i).toLocaleString('en-US', {\n        month: 'short',\n      })\n      const revenue = Math.floor(4000 + Math.random() * 1500)\n      const expenses = Math.floor(2000 + Math.random() * 1000)\n      return { month, revenue, expenses, net: revenue - expenses }\n    })\n  }, [])\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Net revenue by month</CardTitle>\n        <CardDescription>Revenue minus expenses to show monthly profitability.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <AreaChart\n          containerHeight={isMobile ? 200 : 300}\n          data={data}\n          dataKey=\"month\"\n          areaProps={{\n            type: 'natural',\n          }}\n          type=\"stacked\"\n          valueFormatter={formatCompact}\n          tooltipProps={{\n            formatter: (value: ValueType | undefined, label: NameType | undefined) => {\n              const formattedValue = typeof value === 'number' ? formatCompact(value) : '-'\n              return (\n                <span className=\"flex w-full justify-between gap-x-4 font-mono\">\n                  <span className=\"flex-1\">{label}</span>\n                  <span> {formattedValue}</span>\n                </span>\n              )\n            },\n          }}\n          config={{\n            revenue: { label: 'Revenue' },\n            expenses: { label: 'Expenses' },\n            net: { label: 'Net' },\n          }}\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/area-chart-custom-format-example/page.tsx"
    }
  ],
  "type": "registry:page"
}