{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "pie-chart-interactive-example",
  "title": "Pie Chart Interactive",
  "description": "pie-chart-interactive-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/pie-chart",
    "https://intentui.com/r/toggle-group"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/pie-chart/pie-chart-interactive-example.tsx",
      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\nimport type { Key } from 'react-aria-components/Breadcrumbs'\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { PieChart } from '@/components/ui/pie-chart'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nexport default function PieChartAudienceSegmentDemo() {\n  const data = useMemo(\n    () => [\n      { name: 'Unique visitors', code: 'UV', value: 2400 },\n      { name: 'Page views', code: 'PV', value: 5600 },\n      { name: 'Bounce rate', code: 'BR', value: 700 },\n      { name: 'Conversion rate', code: 'CR', value: 480 },\n    ],\n    []\n  )\n\n  const defaultCode = data[0]?.code\n  const [selected, setSelected] = useState<Set<Key>>(new Set(defaultCode ? [defaultCode] : []))\n  const selectedCode = [...selected][0] as string\n\n  return (\n    <Card>\n      <CardHeader className=\"text-center\">\n        <CardTitle>Audience insights</CardTitle>\n        <CardDescription>Engagement metrics by type</CardDescription>\n        <CardAction>\n          <ToggleGroup\n            selectedKeys={selected}\n            onSelectionChange={setSelected}\n            selectionMode=\"single\"\n            size=\"sm\"\n          >\n            {data.map((d) => (\n              <ToggleGroupItem key={d.code} id={d.code}>\n                {d.code}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <PieChart\n          containerHeight={250}\n          data={data}\n          dataKey=\"value\"\n          nameKey=\"name\"\n          variant=\"donut\"\n          showLabel\n          pieProps={{\n            innerRadius: '50%',\n            outerRadius: (dp: { code: string }) => (dp.code === selectedCode ? 110 : 90),\n          }}\n          valueFormatter={(value: number) => `${value.toLocaleString()} units`}\n          config={{\n            UV: { label: 'UV' },\n            PV: { label: 'PV' },\n            BR: { label: 'BR' },\n            CR: { label: 'CR' },\n          }}\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/pie-chart-interactive-example/page.tsx"
    }
  ],
  "type": "registry:page"
}