xlibs-components/dist/components/charts/chart-radial-label.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 { RadialBar, RadialBarChart, ResponsiveContainer, Tooltip } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../../components/ui/card.js';
export const description = "A radial bar chart with customizable data";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    {
        name: "Bitcoin",
        value: 45,
        fill: "#249e5e",
    },
    {
        name: "Ethereum",
        value: 30,
        fill: "#2a3289",
    },
    {
        name: "BNB",
        value: 15,
        fill: "#8a8fdb",
    },
    {
        name: "Others",
        value: 10,
        fill: "#95dbb8",
    },
];
export function ChartRadialLabel({ data = defaultChartData, title = "Crypto Distribution", description = "Portfolio allocation across different cryptocurrencies", className = "", height = 350, colors = ["#249e5e", "#2a3289", "#8a8fdb", "#95dbb8"] }) {
    // ✅ FIXED: Apply colors to data if not provided
    const chartData = data.map((item, index) => ({
        ...item,
        fill: item.fill || colors[index % colors.length]
    }));
    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsx(CardContent, { children: _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(RadialBarChart, { cx: "50%", cy: "50%", innerRadius: "20%", outerRadius: "80%", barSize: 10, data: chartData, children: [_jsx(RadialBar, { background: true, dataKey: "value" }), _jsx(Tooltip, { content: ({ active, payload }) => {
                                    if (active && payload && payload.length) {
                                        return (_jsx("div", { className: "rounded-lg border bg-background p-2 shadow-sm", children: _jsx("div", { className: "grid grid-cols-2 gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-[0.70rem] uppercase text-muted-foreground", children: payload[0].name }), _jsxs("span", { className: "font-bold text-muted-foreground", children: [payload[0].value, "%"] })] }) }) }));
                                    }
                                    return null;
                                } })] }) }) })] }));
}