xlibs-components/dist/components/charts/chart-bar-negative.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 { TrendingUp } from "lucide-react";
import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
import { ChartContainer, ChartTooltip, ChartTooltipContent, } from '../../components/ui/chart.js';
export const description = "A bar chart with negative values";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    { month: "January", visitors: 186 },
    { month: "February", visitors: 205 },
    { month: "March", visitors: -207 },
    { month: "April", visitors: 173 },
    { month: "May", visitors: -209 },
    { month: "June", visitors: 214 },
];
const chartConfig = {
    visitors: {
        label: "Visitors",
    },
};
export function ChartBarNegative({ data = defaultChartData, title = "Bar Chart - Negative", description = "January - June 2024", className = "", dataKey = "visitors", positiveColor = "#249e5e", negativeColor = "#2a3289", height = 350 }) {
    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(BarChart, { accessibilityLayer: true, data: data, height: height, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsxs(Bar, { dataKey: dataKey, children: [_jsx(LabelList, { position: "top", dataKey: "month", fillOpacity: 1 }), data.map((item) => (_jsx(Cell, { fill: item.visitors > 0 ? positiveColor : negativeColor }, item.month)))] })] }) }) }), _jsxs(CardFooter, { className: "flex-col items-start gap-2 text-sm", children: [_jsxs("div", { className: "flex gap-2 leading-none font-medium", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "text-muted-foreground leading-none", children: "Showing total visitors for the last 6 months" })] })] }));
}