{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "title": "Bar Chart",
  "description": "A customizable bar chart component with multiple variants (default, horizontal, stacked, mixed, interactive).",
  "dependencies": [
    "recharts",
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "registry/new-york/bar-chart/bar-chart.tsx",
      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport {\n    Bar,\n    BarChart,\n    CartesianGrid,\n    Cell,\n    LabelList,\n    XAxis,\n    YAxis,\n    Rectangle,\n} from \"recharts\"\nimport {\n    Card,\n    CardContent,\n    CardDescription,\n    CardFooter,\n    CardHeader,\n    CardTitle,\n} from \"@/components/ui/card\"\nimport {\n    ChartContainer,\n    ChartLegend,\n    ChartLegendContent,\n    ChartTooltip,\n    ChartTooltipContent,\n    type ChartConfig,\n} from \"@/components/ui/chart\"\nimport { TrendingUp } from \"lucide-react\"\n\nexport type BarChartVariant =\n    | 'default'\n    | 'horizontal'\n    | 'multiple'\n    | 'stacked'\n    | 'stacked-legend'\n    | 'label'\n    | 'negative'\n    | 'mixed'\n    | 'interactive'\n\nexport interface BarConfig {\n    dataKey: string\n    fill?: string\n    radius?: number | [number, number, number, number]\n    stackId?: string\n    name?: string\n}\n\nexport interface BarChartComponentProps {\n    title?: string\n    description?: string\n    data: Array<Record<string, string | number>>\n    chartConfig: ChartConfig\n    className?: string\n\n    variant?: BarChartVariant\n\n    bars?: BarConfig[]\n\n    xAxisKey?: string\n    xAxisFormatter?: (value: string) => string\n    yAxisConfig?: {\n        dataKey?: string // for horizontal layout\n        domain?: [number, number] | 'auto'\n        tickFormatter?: (value: number) => string\n        hide?: boolean\n    }\n\n    // Features\n    showGrid?: boolean\n    showTooltip?: boolean\n    showLegend?: boolean\n    showLabels?: boolean\n    labelPosition?: 'top' | 'center' | 'bottom' | 'inside' | 'insideTop' | 'insideBottom'\n    labelFormatter?: (value: number) => string\n    tooltipNameKey?: string  // Key to use for tooltip name lookup (for mixed variant)\n\n    // Layout\n    layout?: 'vertical' | 'horizontal'\n    margin?: { top?: number; right?: number; bottom?: number; left?: number }\n    barRadius?: number | [number, number, number, number]\n    barGap?: number\n    barCategoryGap?: string | number\n\n    // Negative bar colors\n    positiveColor?: string\n    negativeColor?: string\n\n    footerContent?: {\n        mainText?: string\n        subText?: string\n        showTrending?: boolean\n        trendingIcon?: React.ReactNode\n        trendingColor?: string\n    }\n}\n\nconst getDefaultRadius = (variant: BarChartVariant): number | [number, number, number, number] => {\n    switch (variant) {\n        case 'stacked':\n        case 'stacked-legend':\n            return 0\n        case 'horizontal':\n            return [0, 4, 4, 0]\n        default:\n            return 8\n    }\n}\n\nconst getDefaultLayout = (variant: BarChartVariant): 'vertical' | 'horizontal' | undefined => {\n    // In Recharts: 'vertical' layout = horizontal bars (bars grow to the right)\n    // undefined/default = vertical bars (bars grow upward) \n    return variant === 'horizontal' ? 'vertical' : undefined\n}\n\nexport const BarChartComponent = ({\n    title,\n    description,\n    data,\n    chartConfig,\n    className = \"\",\n    variant = 'default',\n    bars,\n    xAxisKey = \"month\",\n    xAxisFormatter = (value) => typeof value === 'string' ? value.slice(0, 3) : String(value),\n    yAxisConfig,\n    showGrid = true,\n    showTooltip = true,\n    showLegend,\n    showLabels,\n    labelPosition = 'top',\n    labelFormatter,\n    tooltipNameKey,\n    layout,\n    margin = { left: 12, right: 12 },\n    barRadius,\n    barGap,\n    barCategoryGap,\n    positiveColor = \"var(--chart-1)\",\n    negativeColor = \"var(--chart-2)\",\n    footerContent,\n}: BarChartComponentProps) => {\n\n    // Determine layout based on variant\n    // Note: In Recharts, layout=\"vertical\" = horizontal bars (bars grow to the right)\n    const isHorizontalBars = variant === 'horizontal' || layout === 'vertical'\n    const chartLayout = layout ?? getDefaultLayout(variant)\n\n    // Determine radius\n    const defaultRadius = barRadius ?? getDefaultRadius(variant)\n\n    // Auto determine showLegend based on variant\n    const shouldShowLegend = showLegend ?? (variant === 'stacked-legend' || variant === 'multiple')\n\n    // Auto determine showLabels based on variant\n    const shouldShowLabels = showLabels ?? (variant === 'label')\n\n    // Auto-generate bars from chartConfig if not provided\n    const chartBars = useMemo(() => {\n        if (bars) return bars\n\n        return Object.keys(chartConfig).map((key, index) => ({\n            dataKey: key,\n            fill: chartConfig[key].color || `var(--chart-${index + 1})`,\n            radius: defaultRadius,\n            stackId: (variant === 'stacked' || variant === 'stacked-legend') ? 'stack' : undefined,\n        }))\n    }, [bars, chartConfig, variant, defaultRadius])\n\n    // Render bars based on variant\n    const renderBars = () => {\n        switch (variant) {\n            case 'mixed':\n                // Mixed: Each bar has different color from data's fill property\n                return (\n                    <Bar\n                        dataKey={chartBars[0]?.dataKey || 'value'}\n                        radius={defaultRadius}\n                    >\n                        {data.map((entry, index) => (\n                            <Cell\n                                key={`cell-${index}`}\n                                fill={entry.fill as string || `var(--chart-${(index % 5) + 1})`}\n                            />\n                        ))}\n                    </Bar>\n                )\n\n            case 'negative':\n                // Negative: Different colors for positive/negative values\n                return (\n                    <Bar dataKey={chartBars[0]?.dataKey || 'value'} radius={defaultRadius}>\n                        {data.map((entry, index) => {\n                            const value = entry[chartBars[0]?.dataKey || 'value'] as number\n                            return (\n                                <Cell\n                                    key={`cell-${index}`}\n                                    fill={value >= 0 ? positiveColor : negativeColor}\n                                />\n                            )\n                        })}\n                    </Bar>\n                )\n\n            case 'interactive':\n                // Interactive: Active bar on hover\n                return chartBars.map((bar) => (\n                    <Bar\n                        key={bar.dataKey}\n                        dataKey={bar.dataKey}\n                        fill={bar.fill || `var(--color-${bar.dataKey})`}\n                        radius={bar.radius ?? defaultRadius}\n                        stackId={bar.stackId}\n                        activeBar={({ ...props }) => (\n                            <Rectangle\n                                {...props}\n                                fillOpacity={0.8}\n                                stroke={props.fill}\n                                strokeDasharray={4}\n                                strokeDashoffset={4}\n                            />\n                        )}\n                    >\n                        {shouldShowLabels && (\n                            <LabelList\n                                dataKey={bar.dataKey}\n                                position={labelPosition}\n                                offset={8}\n                                className=\"fill-foreground\"\n                                fontSize={12}\n                                formatter={labelFormatter}\n                            />\n                        )}\n                    </Bar>\n                ))\n\n            case 'stacked':\n            case 'stacked-legend':\n            case 'multiple':\n            default:\n                // Default, Multiple, Stacked variants\n                return chartBars.map((bar) => (\n                    <Bar\n                        key={bar.dataKey}\n                        dataKey={bar.dataKey}\n                        fill={bar.fill || `var(--color-${bar.dataKey})`}\n                        radius={bar.radius ?? defaultRadius}\n                        stackId={bar.stackId}\n                    >\n                        {shouldShowLabels && (\n                            <LabelList\n                                dataKey={bar.dataKey}\n                                position={labelPosition}\n                                offset={8}\n                                className=\"fill-foreground\"\n                                fontSize={12}\n                                formatter={labelFormatter}\n                            />\n                        )}\n                    </Bar>\n                ))\n        }\n    }\n\n    // Render X Axis\n    const renderXAxis = () => {\n        if (isHorizontalBars) {\n            return (\n                <XAxis\n                    type=\"number\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    hide={yAxisConfig?.hide}\n                    tickFormatter={yAxisConfig?.tickFormatter}\n                />\n            )\n        }\n\n        return (\n            <XAxis\n                dataKey={xAxisKey}\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={xAxisFormatter}\n            />\n        )\n    }\n\n    // Render Y Axis\n    const renderYAxis = () => {\n        if (isHorizontalBars) {\n            return (\n                <YAxis\n                    dataKey={yAxisConfig?.dataKey || xAxisKey}\n                    type=\"category\"\n                    tickLine={false}\n                    tickMargin={10}\n                    axisLine={false}\n                    tickFormatter={xAxisFormatter}\n                />\n            )\n        }\n\n        if (yAxisConfig?.hide !== true && (variant === 'negative' || yAxisConfig?.tickFormatter)) {\n            return (\n                <YAxis\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={yAxisConfig?.tickFormatter}\n                />\n            )\n        }\n\n        return null\n    }\n\n    return (\n        <Card className={`flex flex-col h-full ${className}`}>\n            {(title || description) && (\n                <CardHeader>\n                    {title && <CardTitle>{title}</CardTitle>}\n                    {description && <CardDescription>{description}</CardDescription>}\n                </CardHeader>\n            )}\n\n            <CardContent className=\"flex-1\">\n                <div className=\"w-full h-full flex items-center justify-center\">\n                    <ChartContainer config={chartConfig} className=\"w-full\">\n                        <BarChart\n                            accessibilityLayer\n                            data={data}\n                            layout={chartLayout}\n                            margin={margin}\n                            barGap={barGap}\n                            barCategoryGap={barCategoryGap}\n                        >\n                            {showGrid && <CartesianGrid vertical={!isHorizontalBars} horizontal={isHorizontalBars} />}\n\n                            {renderXAxis()}\n                            {renderYAxis()}\n\n                            {showTooltip && (\n                                <ChartTooltip\n                                    cursor={false}\n                                    content={\n                                        <ChartTooltipContent\n                                            hideLabel={variant === 'mixed' || chartBars.length === 1}\n                                            indicator={variant === 'mixed' ? 'dot' : 'line'}\n                                            nameKey={variant === 'mixed' ? tooltipNameKey : undefined}\n                                        />\n                                    }\n                                />\n                            )}\n\n                            {shouldShowLegend && <ChartLegend content={<ChartLegendContent />} />}\n\n                            {renderBars()}\n                        </BarChart>\n                    </ChartContainer>\n                </div>\n            </CardContent>\n\n            {footerContent && (\n                <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n                    <div className={`flex gap-2 leading-none font-medium ${footerContent.trendingColor || ''}`}>\n                        {footerContent.mainText}\n                        {footerContent.showTrending && footerContent.trendingIcon}\n                    </div>\n                    {footerContent.subText && (\n                        <div className=\"text-muted-foreground leading-none\">\n                            {footerContent.subText}\n                        </div>\n                    )}\n                </CardFooter>\n            )}\n        </Card>\n    )\n}\n\n// ========================================================================================\n// Bar Chart Example\n// ========================================================================================\nexport const BarChartExample = () => {\n    const monthlyData = [\n        { period: \"Jan\", newSubscriptions: 1245, revenue: 18500, churnedUsers: 32 },\n        { period: \"Feb\", newSubscriptions: 1289, revenue: 21200, churnedUsers: 28 },\n        { period: \"Mar\", newSubscriptions: 1312, revenue: 24800, churnedUsers: 35 },\n        { period: \"Apr\", newSubscriptions: 1378, revenue: 29100, churnedUsers: 41 },\n        { period: \"May\", newSubscriptions: 1425, revenue: 33600, churnedUsers: 38 },\n        { period: \"Jun\", newSubscriptions: 1468, revenue: 37800, churnedUsers: 45 },\n        { period: \"Jul\", newSubscriptions: 1512, revenue: 42300, churnedUsers: 49 },\n        { period: \"Aug\", newSubscriptions: 1498, revenue: 41200, churnedUsers: 52 },\n        { period: \"Sep\", newSubscriptions: 1542, revenue: 45900, churnedUsers: 47 },\n        { period: \"Oct\", newSubscriptions: 1589, revenue: 49800, churnedUsers: 51 },\n        { period: \"Nov\", newSubscriptions: 1634, revenue: 54200, churnedUsers: 48 },\n        { period: \"Dec\", newSubscriptions: 1701, revenue: 61500, churnedUsers: 55 },\n    ]\n\n    const chartConfig = {\n        newSubscriptions: {\n            label: \"New Subscriptions\",\n            color: \"var(--chart-1)\",\n        },\n        revenue: {\n            label: \"Revenue ($)\",\n            color: \"var(--chart-2)\",\n        },\n    } satisfies ChartConfig\n\n    return (\n        <BarChartComponent\n            title=\"Monthly VPS Performance\"\n            description=\"New subscriptions and revenue breakdown by month\"\n            data={monthlyData}\n            chartConfig={chartConfig}\n            layout=\"horizontal\"\n            xAxisKey=\"period\"\n            variant=\"label\"\n            bars={[\n                {\n                    dataKey: \"newSubscriptions\",\n                    fill: \"var(--chart-1)\",\n                    radius: [4, 4, 0, 0],\n                },\n                {\n                    dataKey: \"revenue\",\n                    fill: \"var(--chart-2)\",\n                    radius: [4, 4, 0, 0],\n                },\n            ]}\n            showGrid={true}\n            showTooltip={true}\n            showLegend={true}\n            yAxisConfig={{\n                tickFormatter: (value) => {\n                    if (value >= 1000) return `${(value / 1000).toFixed(1)}K`\n                    return value.toString()\n                }\n            }}\n            margin={{ top: 20, right: 30, bottom: 5, left: 20 }}\n            footerContent={{\n                mainText: \"Trending up by 12.5% this period\",\n                subText: `Showing monthly performance metrics for 2024`,\n                showTrending: true,\n                trendingIcon: <TrendingUp className=\"h-4 w-4\" />,\n                trendingColor: \"text-emerald-600\"\n            }}\n        />\n    )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}