xlibs-components/dist/components/charts/chart-radial-text.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 { Cell, Pie, PieChart } 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 radial chart with customizable data and text";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    { name: "Completed", value: 70 },
    { name: "Remaining", value: 30 },
];
// ✅ THEMED: Use project's color palette
const defaultColors = [
    "#249e5e", // Primary green
    "#e5e7eb", // Light gray for remaining
];
export function ChartRadialText({ data = defaultChartData, title = "Radial Progress", description = "Task completion progress", className = "", colors = defaultColors, centerText = "70%", centerSubtext = "Complete", height = "h-64", aspectRatio = "aspect-square" }) {
    // ✅ FIXED: Dynamic chart config based on data
    const chartConfig = data.reduce((config, item) => {
        config[item.name.toLowerCase()] = {
            label: item.name,
            color: colors[data.indexOf(item) % colors.length],
        };
        return config;
    }, {});
    const total = data.reduce((sum, item) => sum + item.value, 0);
    const percentage = data[0] ? Math.round((data[0].value / total) * 100) : 0;
    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(PieChart, { children: [_jsx(Pie, { data: data, cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 80, paddingAngle: 0, dataKey: "value", startAngle: 90, endAngle: -270, children: data.map((_, index) => (_jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))) }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (value) => {
                                        const item = data.find((d) => d.name === value);
                                        return item ? `${item.name}: ${item.value}%` : value;
                                    } }) }), _jsx("text", { x: "50%", y: "45%", textAnchor: "middle", dominantBaseline: "middle", className: "text-2xl font-bold fill-foreground", children: centerText || `${percentage}%` }), _jsx("text", { x: "50%", y: "55%", textAnchor: "middle", dominantBaseline: "middle", className: "text-sm font-medium fill-muted-foreground", children: centerSubtext || "Complete" })] }) }) })] }));
}