{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pie-chart",
  "title": "Pie Chart",
  "description": "A customizable pie/donut chart component with animated active sections and legends.",
  "dependencies": [
    "recharts",
    "motion"
  ],
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "registry/new-york/pie-chart/pie-chart.tsx",
      "content": "\"use client\"\n\nimport { Pie, PieChart, Sector, Label } from \"recharts\"\n\nimport {\n    Card,\n    CardContent,\n    CardDescription,\n    CardFooter,\n    CardHeader,\n    CardTitle,\n} from \"@/components/ui/card\"\nimport {\n    ChartConfig,\n    ChartContainer,\n    ChartStyle,\n    ChartTooltip,\n    ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport { useMemo, useState } from \"react\"\nimport { motion } from \"framer-motion\"\n\nexport interface PieChartData {\n    category: string\n    value: number\n    percentage: number\n    fill?: string\n    [key: string]: unknown\n}\n\nexport interface PieChartProps {\n    title?: string\n    description?: string\n    data: PieChartData[]\n    chartConfig: ChartConfig\n    className?: string\n    dataKey?: string\n    nameKey?: string\n    legendKey?: string\n    innerRadius?: number\n    outerRadius?: number\n    cornerRadius?: number\n    paddingAngle?: number\n    strokeWidth?: number\n    stroke?: string\n    animationDuration?: number\n    enableAnimation?: boolean\n    showLegend?: boolean\n    showTooltip?: boolean\n    showActiveSection?: boolean\n    footerContent?: {\n        mainText?: string\n        subText?: string\n        showTrending?: boolean\n        trendingColor?: string\n        trendingIcon?: React.ReactNode\n    }\n}\n\nexport const PieChartComponent = ({\n    title,\n    description,\n    data,\n    chartConfig,\n    className = \"\",\n    dataKey = \"value\",\n    nameKey = \"category\",\n    legendKey = \"category\",\n    innerRadius = 0,\n    outerRadius = 100,\n    strokeWidth = 0,\n    cornerRadius = 0,\n    paddingAngle = 0,\n    stroke = \"var(--background)\",\n    showLegend = true,\n    showTooltip = true,\n    showActiveSection = false,\n    footerContent\n}: PieChartProps) => {\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n\n    const activeIndex = useMemo(() => {\n        return showActiveSection ? hoverIndex : null\n    }, [hoverIndex, showActiveSection])\n\n    const handleActiveSection = (_: unknown, index: number) => {\n        if (showActiveSection) {\n            setHoverIndex(index)\n        }\n    }\n\n    const handleUnActiveSection = () => {\n        if (showActiveSection) {\n            setHoverIndex(null)\n        }\n    }\n\n    const renderLegend = () => {\n        if (!showLegend) return null;\n\n        return (\n            <div className=\"flex flex-wrap justify-center gap-3 px-4\">\n                {data.map((item, index) => {\n                    const legendValue = String(item[legendKey] || \"\")\n                    const color = item.fill || chartConfig[legendValue as keyof typeof chartConfig]?.color || `var(--chart-${index + 1})`\n\n                    return (\n                        <div key={legendValue} className=\"flex items-center gap-2 text-sm\">\n                            <span\n                                className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                                style={{ backgroundColor: color }}\n                            />\n                            <span className=\"text-muted-foreground\">\n                                {chartConfig[legendValue as keyof typeof chartConfig]?.label || legendValue}\n                            </span>\n                        </div>\n                    )\n                })}\n            </div>\n        )\n    }\n\n    return (\n        <Card className={`flex flex-col h-full ${className}`}>\n            <ChartStyle id={`pie-chart-${title}`} config={chartConfig} />\n\n            <CardHeader className=\"items-center pb-4 text-center\">\n                <CardTitle>{title}</CardTitle>\n                {description && <CardDescription>{description}</CardDescription>}\n            </CardHeader>\n\n            <CardContent className=\"flex flex-col flex-1 justify-between gap-6\">\n                <div className=\"flex justify-center items-center flex-1\">\n                    <ChartContainer\n                        config={chartConfig}\n                        className=\"flex justify-center items-center\"\n                        style={{\n                            width: `${(outerRadius + strokeWidth) * 2 + 100}px`,\n                            height: `${(outerRadius + strokeWidth) * 2 + 100}px`\n                        }}\n                    >\n                        <PieChart\n                            width={(outerRadius + strokeWidth) * 2 + 100}\n                            height={(outerRadius + strokeWidth) * 2 + 100}\n                        >\n                            {showTooltip && (\n                                <ChartTooltip\n                                    cursor={false}\n                                    content={<ChartTooltipContent hideLabel />}\n                                />\n                            )}\n\n                            <Pie\n                                data={data}\n                                dataKey={dataKey}\n                                nameKey={nameKey}\n                                innerRadius={innerRadius}\n                                outerRadius={outerRadius}\n                                cornerRadius={cornerRadius}\n                                paddingAngle={paddingAngle}\n                                strokeWidth={strokeWidth}\n                                stroke={stroke}\n                                cx=\"50%\"\n                                cy=\"50%\"\n                                activeIndex={showActiveSection ? (activeIndex ?? undefined) : undefined}\n                                onMouseEnter={showActiveSection ? handleActiveSection : undefined}\n                                onMouseLeave={showActiveSection ? handleUnActiveSection : undefined}\n                                activeShape={showActiveSection ? (props: unknown) => {\n                                    const typedProps = props as { outerRadius?: number;[key: string]: unknown }\n                                    const { outerRadius = 100, ...otherProps } = typedProps\n                                    return (\n                                        <motion.g\n                                            initial={{ scale: 1 }}\n                                            animate={activeIndex !== null ? { scale: 1.1 } : { scale: 1 }}\n                                            transition={{\n                                                type: \"spring\",\n                                                stiffness: 300,\n                                                damping: 10,\n                                                mass: 0.8,\n                                                bounce: 0.4,\n                                                duration: 0.3\n                                            }}\n                                        >\n                                            <Sector {...otherProps} outerRadius={outerRadius + 1} />\n                                            <Sector\n                                                {...otherProps}\n                                                outerRadius={outerRadius + 15}\n                                                innerRadius={outerRadius + 5}\n                                            />\n                                        </motion.g>\n                                    )\n                                } : undefined}\n                            >\n                                {showActiveSection && innerRadius > 0 && activeIndex !== null && (\n                                    <Label\n                                        content={({ viewBox }) => {\n                                            if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                                                const activeData = data[activeIndex]\n                                                if (!activeData) return null\n\n                                                return (\n                                                    <text\n                                                        x={viewBox.cx}\n                                                        y={viewBox.cy}\n                                                        textAnchor=\"middle\"\n                                                        dominantBaseline=\"middle\"\n                                                    >\n                                                        <tspan\n                                                            x={viewBox.cx}\n                                                            y={viewBox.cy}\n                                                            className=\"fill-foreground text-2xl font-bold\"\n                                                        >\n                                                            {String(activeData[dataKey] || '').toLocaleString()}\n                                                        </tspan>\n                                                        <tspan\n                                                            x={viewBox.cx}\n                                                            y={(viewBox.cy || 0) + 20}\n                                                            className=\"fill-muted-foreground text-sm\"\n                                                        >\n                                                            {String(\n                                                                chartConfig[activeData[nameKey] as keyof typeof chartConfig]?.label\n                                                                ?? activeData[nameKey]\n                                                                ?? ''\n                                                            )}\n                                                        </tspan>\n                                                    </text>\n                                                )\n                                            }\n                                        }}\n                                    />\n                                )}\n                            </Pie>\n                        </PieChart>\n                    </ChartContainer>\n                </div>\n\n                {renderLegend()}\n            </CardContent>\n\n            {footerContent && (\n                <CardFooter className=\"flex-col gap-2 text-sm text-center pt-4\">\n                    <div className=\"flex items-center gap-2 leading-none font-medium\">\n                        <span className={footerContent.trendingColor || \"text-green-600\"}>\n                            {footerContent.mainText}\n                        </span>\n                        {footerContent.showTrending && footerContent.trendingIcon && (\n                            <span className={`h-4 w-4 ${footerContent.trendingColor || \"text-green-600\"}`}>\n                                {footerContent.trendingIcon}\n                            </span>\n                        )}\n                    </div>\n\n                    <div className=\"text-muted-foreground leading-none\">\n                        {footerContent.subText}\n                    </div>\n                </CardFooter>\n            )}\n        </Card>\n    )\n}\n\n\n// ========================================================================================\n// Pie Chart Example\n// ========================================================================================\nexport const PieChartExample = () => {\n    const rawData = [\n        { intent: \"product_inquiry\", interactions: 1250, fill: \"var(--chart-1)\" },\n        { intent: \"technical_support\", interactions: 892, fill: \"var(--chart-2)\" },\n        { intent: \"pricing_question\", interactions: 654, fill: \"var(--chart-3)\" },\n        { intent: \"booking_service\", interactions: 487, fill: \"var(--chart-4)\" },\n        { intent: \"general_greeting\", interactions: 398, fill: \"var(--chart-5)\" },\n        { intent: \"complaint_feedback\", interactions: 234, fill: \"var(--chart-6)\" },\n    ]\n    const total = rawData.reduce((sum, d) => sum + d.interactions, 0)\n    const data = rawData.map(d => ({\n        category: d.intent,\n        value: d.interactions,\n        percentage: Math.round((d.interactions / total) * 1000) / 10, // 1 chữ số thập phân\n        fill: d.fill\n    }))\n\n    const chartConfig = {\n        interactions: {\n            label: \"Interactions\",\n        },\n        product_inquiry: {\n            label: \"Product\",\n            color: \"var(--chart-1)\",\n        },\n        technical_support: {\n            label: \"Technical Support\",\n            color: \"var(--chart-2)\",\n        },\n        pricing_question: {\n            label: \"Pricing Questions\",\n            color: \"var(--chart-3)\",\n        },\n        booking_service: {\n            label: \"Booking Service\",\n            color: \"var(--chart-4)\",\n        },\n        general_greeting: {\n            label: \"General Greeting\",\n            color: \"var(--chart-5)\",\n        },\n        complaint_feedback: {\n            label: \"Complaints & Feedback\",\n            color: \"var(--chart-6)\",\n        },\n    } satisfies ChartConfig\n\n    return (\n        <PieChartComponent\n            title=\"Top Popular Intent\"\n            description=\"Most frequently detected intents from recent user interactions\"\n            data={data}\n            chartConfig={chartConfig}\n            innerRadius={80}\n            outerRadius={120}\n            paddingAngle={2}\n            cornerRadius={3}\n            showLegend={true}\n            showTooltip={false}\n            showActiveSection={true}\n        />\n    )\n}",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}