xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
27 lines (26 loc) • 1.98 kB
JavaScript
"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 horizontal bar chart with customizable data";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
{ name: "Product A", value: 400 },
{ name: "Product B", value: 300 },
{ name: "Product C", value: 300 },
{ name: "Product D", value: 200 },
{ name: "Product E", value: 278 },
{ name: "Product F", value: 189 },
];
export function ChartBarHorizontal({ data = defaultChartData, title = "Horizontal Bar Chart", description = "Product performance comparison", className = "", dataKey = "value", color = "#249e5e", // ✅ THEMED: Use project's primary green color
height = "h-64", aspectRatio = "aspect-[4/3]" }) {
// ✅ FIXED: Dynamic chart config based on props
const chartConfig = {
[dataKey]: {
label: title,
color: color,
},
};
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, layout: "horizontal", children: [_jsx(CartesianGrid, { horizontal: false }), _jsx(XAxis, { type: "number", tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { type: "category", dataKey: "name", tickLine: false, axisLine: false, tickMargin: 8, width: 80 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: dataKey, fill: color, radius: [0, 4, 4, 0] })] }) }) })] }));
}