import { jsxs as n, Fragment as m, jsx as e } from "react/jsx-runtime";
import { T as o, C as a, a as t, o as s, c as p, P as d, A as l } from "../index-sdOMz8GW.js";
import "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const r = [
  { name: "Jan", revenue: 4e3, expenses: 2400, profit: 1600 },
  { name: "Feb", revenue: 3e3, expenses: 1398, profit: 1602 },
  { name: "Mar", revenue: 5e3, expenses: 3200, profit: 1800 },
  { name: "Apr", revenue: 4780, expenses: 2908, profit: 1872 },
  { name: "May", revenue: 5890, expenses: 4800, profit: 1090 },
  { name: "Jun", revenue: 6390, expenses: 3800, profit: 2590 }
], v = () => /* @__PURE__ */ n(m, { children: [
  /* @__PURE__ */ n("div", { className: "text-center space-y-4", children: [
    /* @__PURE__ */ e(o, { tag: "h2", className: "text-base md:text-base font-semibold", children: "ComposedChart" }),
    /* @__PURE__ */ e(
      o,
      {
        tag: "p",
        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
        children: "Composed chart combining line, bar, and area in a single chart for complex data visualization needs."
      }
    )
  ] }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Bar + Line Combination", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    s,
    {
      data: r,
      series: [
        { dataKey: "revenue", name: "Revenue", type: "bar" },
        { dataKey: "profit", name: "Profit", type: "line" }
      ],
      height: 300
    }
  ) }) }) }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Area + Bar + Line", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    s,
    {
      data: r,
      series: [
        { dataKey: "expenses", name: "Expenses", type: "area" },
        { dataKey: "revenue", name: "Revenue", type: "bar" },
        { dataKey: "profit", name: "Profit", type: "line" }
      ],
      height: 300
    }
  ) }) }) }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    p,
    {
      code: `import { ComposedChart } from '@e-burgos/tucu-ui';

const data = [
  { name: 'Jan', revenue: 4000, expenses: 2400, profit: 1600 },
  { name: 'Feb', revenue: 3000, expenses: 1398, profit: 1602 },
  { name: 'Mar', revenue: 5000, expenses: 3200, profit: 1800 },
];

<ComposedChart
  data={data}
  series={[
    { dataKey: 'expenses', name: 'Expenses', type: 'area' },
    { dataKey: 'revenue', name: 'Revenue', type: 'bar' },
    { dataKey: 'profit', name: 'Profit', type: 'line' },
  ]}
  height={300}
  barRadius={4}
  showGrid
  showTooltip
  showLegend
/>`,
      language: "tsx"
    }
  ) }) }) }),
  /* @__PURE__ */ e(
    d,
    {
      componentName: "ComposedChart",
      defaultValues: {
        height: 300,
        barRadius: 4,
        showGrid: !0,
        showTooltip: !0,
        showLegend: !0,
        animate: !0
      },
      excludeProps: [
        "data",
        "series",
        "colors",
        "className",
        "xAxisKey",
        "emptyMessage"
      ],
      children: (i) => /* @__PURE__ */ e(
        s,
        {
          data: r,
          series: [
            { dataKey: "revenue", name: "Revenue", type: "bar" },
            { dataKey: "profit", name: "Profit", type: "line" }
          ],
          ...i
        }
      )
    }
  ),
  /* @__PURE__ */ e(l, { componentName: "ComposedChart" })
] });
export {
  v as default
};
