xlibs-components/dist/components/charts/chart-bar-multiple.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../../components/ui/card.js';
import { ChartContainer, ChartTooltip, ChartTooltipContent, } from '../../components/ui/chart.js';
export const description = "A multiple bar chart with customizable data";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    { name: "Jan", desktop: 2400, mobile: 1800, tablet: 1200 },
    { name: "Feb", desktop: 1398, mobile: 2210, tablet: 900 },
    { name: "Mar", desktop: 9800, mobile: 2290, tablet: 1800 },
    { name: "Apr", desktop: 3908, mobile: 2000, tablet: 1500 },
    { name: "May", desktop: 4800, mobile: 2181, tablet: 1200 },
    { name: "Jun", desktop: 3800, mobile: 2500, tablet: 1600 },
];
// ✅ THEMED: Use project's color palette
const defaultColors = [
    "#249e5e", // Primary green
    "#2a3289", // Primary blue
    "#10b981", // Light green
];
export function ChartBarMultiple({ data = defaultChartData, title = "Multiple Bar Chart", description = "Monthly data across different categories", className = "", dataKeys = ["desktop", "mobile", "tablet"], colors = defaultColors, xAxisKey = "name", height = "h-64", aspectRatio = "aspect-[4/3]" }) {
    // ✅ FIXED: Dynamic chart config based on data keys
    const chartConfig = dataKeys.reduce((config, key, index) => {
        config[key] = {
            label: key.charAt(0).toUpperCase() + key.slice(1),
            color: colors[index % colors.length],
        };
        return config;
    }, {});
    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, className: `${height} ${aspectRatio}`, children: _jsxs(BarChart, { data: data, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), dataKeys.map((key, index) => (_jsx(Bar, { dataKey: key, fill: colors[index % colors.length], radius: [4, 4, 0, 0] }, key)))] }) }) })] }));
}