"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{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}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"ComposedChart"}),e.jsx(a.Typography,{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."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Bar + Line Combination",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.ComposedChart,{data:s,series:[{dataKey:"revenue",name:"Revenue",type:"bar"},{dataKey:"profit",name:"Profit",type:"line"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Area + Bar + Line",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.ComposedChart,{data:s,series:[{dataKey:"expenses",name:"Expenses",type:"area"},{dataKey:"revenue",name:"Revenue",type:"bar"},{dataKey:"profit",name:"Profit",type:"line"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{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"})})})}),e.jsx(a.PropPlayground,{componentName:"ComposedChart",defaultValues:{height:300,barRadius:4,showGrid:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:r=>e.jsx(a.ComposedChart,{data:s,series:[{dataKey:"revenue",name:"Revenue",type:"bar"},{dataKey:"profit",name:"Profit",type:"line"}],...r})}),e.jsx(a.AutoPropsTable,{componentName:"ComposedChart"})]});exports.default=t;
