import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card } from "../../../Card";
import { MiniAreaChart } from "../MiniAreaChart";
// Simple array of numbers for 1D area chart
const simpleAreaChartData = [
    12, 45, 78, 32, 67, 89, 23, 56, 91, 34, 76, 28, 85, 42, 19, 63, 87, 31, 74, 58, 92, 26, 49, 83,
    37, 50,
];
// Array of objects with value and label
const labeledAreaChartData = [
    { value: 150, label: "January" },
    { value: 280, label: "February" },
    { value: 220, label: "March" },
    { value: 180, label: "April" },
    { value: 250, label: "May" },
    { value: 300, label: "June" },
    { value: 320, label: "July" },
    { value: 280, label: "August" },
    { value: 310, label: "September" },
    { value: 290, label: "October" },
    { value: 340, label: "November" },
    { value: 360, label: "December" },
    // { value: 360, label: "December" },
    // { value: 360, label: "December" },
];
const meta = {
    title: "Components/Charts/MiniAreaChart",
    component: MiniAreaChart,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { MiniAreaChart } from '@openuidev/react-ui/Charts/AreaCharts/MiniAreaChart';\n```\n\nA responsive mini area chart component that accepts 1D data (numbers or objects with value/label) with automatic data filtering for space-constrained containers. Features linear gradient fills from color to transparent.",
            },
        },
    },
    tags: ["!autodocs"],
    argTypes: {
        data: {
            description: "An array of numbers or an array of objects with value and optional label. Each entry represents a single point in the area chart.",
            control: false,
            table: {
                type: { summary: "Array<number> | Array<{ value: number; label?: string }>" },
                defaultValue: { summary: "[]" },
                category: "Data",
            },
        },
        theme: {
            description: "The color palette theme for the chart. Each theme provides a different color for the area.",
            control: "select",
            options: ["ocean", "orchid", "emerald", "sunset", "spectrum", "vivid"],
            table: {
                defaultValue: { summary: "ocean" },
                category: "Appearance",
            },
        },
        variant: {
            description: "The interpolation method used to create the area curves. 'linear' creates straight lines between points, 'natural' creates smooth curves, and 'step' creates a stepped area.",
            control: "radio",
            options: ["linear", "natural", "step"],
            table: {
                defaultValue: { summary: "natural" },
                category: "Appearance",
            },
        },
        opacity: {
            description: "The opacity of the filled area beneath the line (0 = fully transparent, 1 = fully opaque). Only used when useGradient is false.",
            control: "number",
            table: {
                type: { summary: "number" },
                defaultValue: { summary: "0.5" },
                category: "Appearance",
            },
        },
        useGradient: {
            description: "Whether to use a linear gradient fill that goes from the area color at the top to transparent at the bottom.",
            control: "boolean",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "true" },
                category: "Appearance",
            },
        },
        isAnimationActive: {
            description: "Whether to animate the chart when it first renders",
            control: "boolean",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "true" },
                category: "Display",
            },
        },
        size: {
            description: "The width and height of the chart",
            control: "text",
            table: {
                type: { summary: "number | string" },
                defaultValue: { summary: "100%" },
                category: "Appearance",
            },
        },
        areaColor: {
            description: "Custom color for the area fill and stroke",
            control: "color",
            table: {
                type: { summary: "string" },
                category: "Appearance",
            },
        },
    },
};
export default meta;
export const SimpleNumberArray = {
    name: "Simple Number Array (With Gradient)",
    args: {
        data: simpleAreaChartData,
        theme: "ocean",
        variant: "natural",
        opacity: 0.5,
        useGradient: true,
        isAnimationActive: true,
        size: "100%",
    },
    render: (args) => (_jsxs(Card, { style: { width: "280px", padding: "20px" }, children: [_jsx("h3", { style: { marginBottom: "16px", fontSize: "16px", fontWeight: "600" }, children: "Daily Activity" }), _jsx(MiniAreaChart, { ...args })] })),
    parameters: {
        docs: {
            source: {
                code: `
const activityData = [12, 45, 78, 32, 67, 89, 23, 56, 91, 34];

<MiniAreaChart 
  data={activityData}
  theme="ocean"
  variant="natural"
  useGradient={true}
  isAnimationActive={true}
  size="100%"
/>
`,
            },
        },
    },
};
export const LabeledData = {
    name: "Labeled Data (With Gradient)",
    args: {
        data: labeledAreaChartData,
        theme: "emerald",
        variant: "natural",
        opacity: 0.6,
        useGradient: true,
        isAnimationActive: true,
        size: "100%",
    },
    render: (args) => (_jsxs(Card, { style: { width: "320px", padding: "20px" }, children: [_jsx("h3", { style: { marginBottom: "16px", fontSize: "16px", fontWeight: "600" }, children: "Monthly Revenue" }), _jsx(MiniAreaChart, { ...args })] })),
    parameters: {
        docs: {
            source: {
                code: `
const revenueData = [
  { value: 150, label: "January" },
  { value: 280, label: "February" },
  { value: 220, label: "March" },
  // ...
];

<MiniAreaChart 
  data={revenueData}
  theme="emerald"
  variant="natural"
  useGradient={true}
  size="100%"
/>
`,
            },
        },
    },
};
export const WithoutGradient = {
    name: "Solid Fill (Without Gradient)",
    args: {
        data: simpleAreaChartData.slice(0, 15),
        theme: "sunset",
        variant: "natural",
        opacity: 0.4,
        useGradient: false,
        isAnimationActive: true,
        size: "100%",
    },
    render: (args) => (_jsxs(Card, { style: { width: "280px", padding: "20px" }, children: [_jsx("h3", { style: { marginBottom: "16px", fontSize: "16px", fontWeight: "600" }, children: "Solid Fill Area" }), _jsx(MiniAreaChart, { ...args })] })),
    parameters: {
        docs: {
            source: {
                code: `
<MiniAreaChart 
  data={data}
  theme="sunset"
  variant="natural"
  opacity={0.4}
  useGradient={false}
  size="100%"
/>
`,
            },
        },
    },
};
export const GradientComparison = {
    name: "Gradient vs Solid Comparison",
    render: () => (_jsxs("div", { style: { display: "flex", gap: "20px" }, children: [_jsxs(Card, { style: { width: "250px", padding: "16px" }, children: [_jsx("h4", { style: { marginBottom: "12px", fontSize: "14px", fontWeight: "600" }, children: "With Gradient (Default)" }), _jsx(MiniAreaChart, { data: [20, 45, 35, 80, 60, 90, 45, 70, 85, 30], theme: "orchid", variant: "natural", useGradient: true, size: 200 })] }), _jsxs(Card, { style: { width: "250px", padding: "16px" }, children: [_jsx("h4", { style: { marginBottom: "12px", fontSize: "14px", fontWeight: "600" }, children: "Solid Fill" }), _jsx(MiniAreaChart, { data: [20, 45, 35, 80, 60, 90, 45, 70, 85, 30], theme: "orchid", variant: "natural", useGradient: false, opacity: 0.3, size: 200 })] })] })),
};
export const ResponsiveData = {
    name: "Responsive Data Filtering",
    args: {
        data: simpleAreaChartData,
        theme: "orchid",
        variant: "natural",
        opacity: 0.4,
        useGradient: true,
        isAnimationActive: true,
        size: "100%",
    },
    render: (args) => (_jsxs("div", { style: { display: "flex", gap: "20px", flexDirection: "column" }, children: [_jsxs(Card, { style: { width: "200px", padding: "16px" }, children: [_jsx("h4", { style: { marginBottom: "12px", fontSize: "14px", fontWeight: "600" }, children: "Small (200px)" }), _jsx(MiniAreaChart, { ...args })] }), _jsxs(Card, { style: { width: "400px", padding: "16px" }, children: [_jsx("h4", { style: { marginBottom: "12px", fontSize: "14px", fontWeight: "600" }, children: "Medium (400px)" }), _jsx(MiniAreaChart, { ...args })] }), _jsxs(Card, { style: { width: "600px", padding: "16px" }, children: [_jsx("h4", { style: { marginBottom: "12px", fontSize: "14px", fontWeight: "600" }, children: "Large (600px)" }), _jsx(MiniAreaChart, { ...args })] })] })),
};
export const DifferentSizes = {
    name: "Different Sizes",
    render: () => (_jsxs("div", { style: { display: "flex", gap: "20px", alignItems: "center" }, children: [_jsxs(Card, { style: { width: "120px", padding: "12px" }, children: [_jsx("h4", { style: { marginBottom: "8px", fontSize: "12px", fontWeight: "600" }, children: "Small" }), _jsx(MiniAreaChart, { data: [15, 25, 20, 35, 30, 18, 22], theme: "sunset", size: 80 })] }), _jsxs(Card, { style: { width: "200px", padding: "16px" }, children: [_jsx("h4", { style: { marginBottom: "12px", fontSize: "14px", fontWeight: "600" }, children: "Medium" }), _jsx(MiniAreaChart, { data: simpleAreaChartData.slice(0, 10), theme: "spectrum", size: 160 })] }), _jsxs(Card, { style: { width: "280px", padding: "20px" }, children: [_jsx("h4", { style: { marginBottom: "16px", fontSize: "16px", fontWeight: "600" }, children: "Large" }), _jsx(MiniAreaChart, { data: simpleAreaChartData, theme: "vivid", size: 240 })] })] })),
};
export const DifferentThemes = {
    name: "Different Themes (All With Gradients)",
    render: () => (_jsx("div", { style: { display: "flex", gap: "20px", flexWrap: "wrap" }, children: ["ocean", "orchid", "emerald", "sunset", "spectrum", "vivid"].map((theme) => (_jsxs(Card, { style: { width: "200px", padding: "16px" }, children: [_jsxs("h4", { style: {
                        marginBottom: "12px",
                        fontSize: "14px",
                        fontWeight: "600",
                        textTransform: "capitalize",
                    }, children: [theme, " Theme"] }), _jsx(MiniAreaChart, { data: [15, 25, 20, 35, 30, 18, 22, 28, 33, 19], theme: theme, variant: "natural", useGradient: true, size: 160 })] }, theme))) })),
};
export const DifferentVariants = {
    name: "Different Variants",
    render: () => (_jsx("div", { style: { display: "flex", gap: "20px" }, children: ["linear", "natural", "step"].map((variant) => (_jsxs(Card, { style: { width: "220px", padding: "16px" }, children: [_jsxs("h4", { style: {
                        marginBottom: "12px",
                        fontSize: "14px",
                        fontWeight: "600",
                        textTransform: "capitalize",
                    }, children: [variant, " Variant"] }), _jsx(MiniAreaChart, { data: [15, 35, 25, 45, 30, 50, 28, 42, 38, 29], theme: "spectrum", variant: variant, useGradient: true, size: 180 })] }, variant))) })),
};
export const CustomColor = {
    name: "Custom Color with Gradient",
    args: {
        data: [20, 45, 28, 80, 99, 43, 67, 23, 89, 56],
        theme: "ocean",
        variant: "natural",
        opacity: 0.7,
        areaColor: "#ff6b6b",
        useGradient: true,
        size: 200,
    },
    render: (args) => (_jsxs(Card, { style: {
            width: "280px",
            padding: "20px",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
        }, children: [_jsx("h3", { style: { marginBottom: "16px", fontSize: "16px", fontWeight: "600" }, children: "Custom Red Area" }), _jsx(MiniAreaChart, { ...args })] })),
};
//# sourceMappingURL=MiniAreaChart.stories.js.map