xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
37 lines (36 loc) • 2.23 kB
JavaScript
"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 basic pie chart with customizable data";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
{ name: "Desktop", value: 456 },
{ name: "Mobile", value: 351 },
{ name: "Tablet", value: 271 },
{ name: "Laptop", value: 191 },
];
// ✅ THEMED: Use project's color palette
const defaultColors = [
"#249e5e", // Primary green
"#2a3289", // Primary blue
"#10b981", // Light green
"#6366f1", // Light blue
"#059669", // Dark green
"#4338ca", // Dark blue
];
export function ChartPieBasic({ data = defaultChartData, title = "Device Usage", description = "Distribution of users across different devices", className = "", colors = defaultColors }) {
// ✅ 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;
}, {});
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: "aspect-square", children: _jsxs(PieChart, { children: [_jsx(Pie, { data: data, cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 80, paddingAngle: 2, dataKey: "value", 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;
} }) })] }) }) })] }));
}