xlibs-components/dist/components/ui/chart.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 * as React from "react";
import { Bar, BarChart, Line, LineChart, Area, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, } from "recharts";
import { cn } from '../../lib/utils.js';
const ChartContainer = React.forwardRef(({ config, children, className, ...props }, ref) => {
    // Create dynamic CSS variables based on config keys
    const cssVariables = {};
    Object.entries(config).forEach(([key, item], index) => {
        cssVariables[`--color-${key}`] = item.color || `hsl(var(--chart-${(index % 5) + 1}))`;
    });
    return (_jsx("div", { ref: ref, className: cn("w-full h-full", className), style: cssVariables, ...props, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: children }) }));
});
ChartContainer.displayName = "ChartContainer";
// Remove ref from Tooltip as it's not supported by Recharts
const ChartTooltip = React.forwardRef(({ config, ...props }, ref) => (_jsx(Tooltip, { contentStyle: {
        backgroundColor: "white",
        border: "1px solid #e5e7eb",
        borderRadius: "8px",
        color: "#374151",
        fontFamily: "var(--font-sans)",
        fontSize: "14px",
        lineHeight: "1.4",
        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
    }, content: ({ active, payload, label }) => (_jsx("div", { ref: ref, className: "rounded-lg border bg-white p-3 shadow-lg", children: _jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: "flex items-center justify-between gap-2", children: _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "font-medium text-gray-900", children: label }) }) }), _jsx("div", { className: "grid gap-1", children: payload?.map((item, index) => {
                        const configItem = config?.[item.dataKey];
                        const color = configItem?.color || item.color || "#3b82f6";
                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-2 w-2 rounded-full", style: {
                                        backgroundColor: color,
                                    } }), _jsxs("span", { className: "text-sm text-gray-600", children: [configItem?.label || item.name, ":"] }), _jsx("span", { className: "text-sm font-medium text-gray-900", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value })] }, index));
                    }) })] }) })), ...props })));
ChartTooltip.displayName = "ChartTooltip";
const ChartTooltipContent = React.forwardRef(({ active, payload, label, labelFormatter, hideLabel, config }, ref) => {
    if (!active || !payload) {
        return null;
    }
    return (_jsx("div", { ref: ref, className: "rounded-lg border bg-white p-3 shadow-lg", children: _jsxs("div", { className: "grid gap-2", children: [!hideLabel && (_jsx("div", { className: "flex items-center justify-between gap-2", children: _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "font-medium text-gray-900", children: labelFormatter ? labelFormatter(label) : label }) }) })), _jsx("div", { className: "grid gap-1", children: payload.map((item, index) => {
                        const configItem = config?.[item.dataKey];
                        const color = configItem?.color || item.color || "#3b82f6";
                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-2 w-2 rounded-full", style: {
                                        backgroundColor: color,
                                    } }), _jsxs("span", { className: "text-sm text-gray-600", children: [configItem?.label || item.name, ":"] }), _jsx("span", { className: "text-sm font-medium text-gray-900", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value })] }, index));
                    }) })] }) }));
});
ChartTooltipContent.displayName = "ChartTooltipContent";
// Remove ref from Legend as it's not supported by Recharts
const ChartLegend = React.forwardRef(({ config, ...props }, ref) => (_jsx(Legend, { wrapperStyle: {
        paddingTop: "1rem",
        fontFamily: "var(--font-sans)",
        fontSize: "var(--font-size-p)",
        lineHeight: "var(--line-height-typography)",
    }, content: ({ payload }) => (_jsx("div", { ref: ref, className: "flex flex-wrap items-center gap-4 text-small", children: payload?.map((entry, index) => {
            const configItem = config?.[entry.value];
            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-3 w-3 rounded-full", style: {
                            backgroundColor: configItem?.color || entry.color,
                        } }), _jsx("span", { className: "text-muted-foreground", children: configItem?.label || entry.value })] }, index));
        }) })), ...props })));
ChartLegend.displayName = "ChartLegend";
const ChartLegendContent = React.forwardRef(({ payload, config }, ref) => {
    if (!payload) {
        return null;
    }
    return (_jsx("div", { ref: ref, className: "flex flex-wrap items-center gap-4 text-small", children: payload.map((entry, index) => {
            const configItem = config?.[entry.value];
            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-3 w-3 rounded-full", style: {
                            backgroundColor: configItem?.color || entry.color,
                        } }), _jsx("span", { className: "text-muted-foreground", children: configItem?.label || entry.value })] }, index));
        }) }));
});
ChartLegendContent.displayName = "ChartLegendContent";
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, Bar, BarChart, Line, LineChart, Area, AreaChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, PieChart, Pie, Cell, };