xlibs-components/dist/components/charts/chart-area-gradient.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 { Area, AreaChart, CartesianGrid, XAxis } 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 = "An area chart with gradient fill and customizable data";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
];
// ✅ THEMED: Use project's color palette
const defaultColors = [
    "#249e5e", // Primary green
    "#2a3289", // Primary blue
];
export function ChartAreaGradient({ data = defaultChartData, title = "Area Chart - Gradient", description = "Showing total visitors for the last 6 months", className = "", dataKeys = ["desktop", "mobile"], colors = defaultColors, xAxisKey = "month", footerText = "Trending up by 5.2% this month", footerSubtext = "January - June 2024" }) {
    // ✅ FIXED: Dynamic chart config based on data keys
    const chartConfig = dataKeys.reduce((config, key, index) => {
        config[key] = {
            label: key.charAt(0).toUpperCase() + key.slice(1),
            color: colors[index % 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, children: _jsxs(AreaChart, { accessibilityLayer: true, data: data, margin: {
                            left: 12,
                            right: 12,
                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx("defs", { children: dataKeys.map((key, index) => (_jsxs("linearGradient", { id: `fill${key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: colors[index % colors.length], stopOpacity: 0.8 }), _jsx("stop", { offset: "95%", stopColor: colors[index % colors.length], stopOpacity: 0.1 })] }, key))) }), dataKeys.map((key, index) => (_jsx(Area, { dataKey: key, type: "natural", fill: `url(#fill${key})`, fillOpacity: 0.4, stroke: colors[index % colors.length], stackId: "a" }, key)))] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 leading-none font-medium", children: [footerText, " ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "text-muted-foreground flex items-center gap-2 leading-none", children: footerSubtext })] }) }) })] }));
}