import { jsxs, jsx } from "react/jsx-runtime";
import { AreaChart } from "./area-chart.js";
import { BarChart } from "./bar-chart.js";
import { LineChart } from "./line-chart.js";
import { ComposedChart } from "./composed-chart.js";
import { PieChart } from "./pie-chart.js";
import { RadarChart } from "./radar-chart.js";
import { RadialBarChart } from "./radial-bar-chart.js";
import { ScatterChart } from "./scatter-chart.js";
import { FunnelChart } from "./funnel-chart.js";
import { Treemap } from "./treemap.js";
import { SankeyChart } from "./sankey-chart.js";
import "react";
const timeSeriesData = [
  { month: "Jan", desktop: 186, mobile: 80, tablet: 120 },
  { month: "Feb", desktop: 305, mobile: 200, tablet: 140 },
  { month: "Mar", desktop: 237, mobile: 120, tablet: 115 },
  { month: "Apr", desktop: 273, mobile: 150, tablet: 130 },
  { month: "May", desktop: 209, mobile: 170, tablet: 125 },
  { month: "Jun", desktop: 214, mobile: 190, tablet: 135 }
];
const categoricalData = [
  { category: "Electronics", sales: 4500, returns: 320 },
  { category: "Clothing", sales: 3200, returns: 280 },
  { category: "Home", sales: 2800, returns: 150 },
  { category: "Sports", sales: 2100, returns: 190 },
  { category: "Books", sales: 1800, returns: 90 }
];
const pieData = [
  { name: "Chrome", value: 68.5 },
  { name: "Safari", value: 19.4 },
  { name: "Firefox", value: 3.8 },
  { name: "Edge", value: 3.2 },
  { name: "Other", value: 5.1 }
];
const radarData = [
  { skill: "JavaScript", level: 85, required: 90 },
  { skill: "React", level: 90, required: 85 },
  { skill: "TypeScript", level: 75, required: 80 },
  { skill: "CSS", level: 80, required: 70 },
  { skill: "Node.js", level: 70, required: 75 },
  { skill: "Testing", level: 65, required: 70 }
];
const funnelData = [
  { name: "Page Views", value: 5e3 },
  { name: "Sign Ups", value: 2500 },
  { name: "Active Users", value: 1500 },
  { name: "Subscribers", value: 800 },
  { name: "Paid Users", value: 300 }
];
const treemapData = [
  {
    name: "Frontend",
    children: [
      { name: "React", size: 3812 },
      { name: "Vue", size: 2543 },
      { name: "Angular", size: 1943 },
      { name: "Svelte", size: 743 }
    ]
  },
  {
    name: "Backend",
    children: [
      { name: "Node.js", size: 4116 },
      { name: "Python", size: 3623 },
      { name: "Java", size: 2832 },
      { name: "Go", size: 1274 }
    ]
  },
  {
    name: "Database",
    children: [
      { name: "PostgreSQL", size: 2138 },
      { name: "MongoDB", size: 1824 },
      { name: "MySQL", size: 1353 }
    ]
  }
];
const sankeyData = {
  nodes: [
    { name: "Marketing" },
    { name: "Sales" },
    { name: "Support" },
    { name: "New Customers" },
    { name: "Returning Customers" },
    { name: "Revenue" }
  ],
  links: [
    { source: 0, target: 3, value: 100 },
    { source: 1, target: 3, value: 50 },
    { source: 1, target: 4, value: 80 },
    { source: 2, target: 4, value: 40 },
    { source: 3, target: 5, value: 120 },
    { source: 4, target: 5, value: 100 }
  ]
};
function ChartExamples() {
  return /* @__PURE__ */ jsxs("div", { className: "space-y-8 p-8", children: [
    /* @__PURE__ */ jsx("h1", { className: "headline-lg", children: "Chart Component Examples" }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Area Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Perfect for showing trends over time with filled areas." }),
      /* @__PURE__ */ jsx(
        AreaChart,
        {
          data: timeSeriesData,
          config: {
            desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
            mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
            tablet: { label: "Tablet", color: "hsl(var(--chart-3))" }
          },
          xAxisKey: "month",
          showLegend: true,
          height: 300
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Bar Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Ideal for comparing values across categories." }),
      /* @__PURE__ */ jsx(
        BarChart,
        {
          data: categoricalData,
          config: {
            sales: { label: "Sales ($)", color: "hsl(var(--chart-1))" },
            returns: { label: "Returns ($)", color: "hsl(var(--chart-2))" }
          },
          xAxisKey: "category",
          showLegend: true,
          height: 300
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Line Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Great for displaying trends and patterns over time." }),
      /* @__PURE__ */ jsx(
        LineChart,
        {
          data: timeSeriesData,
          config: {
            desktop: { label: "Desktop" },
            mobile: { label: "Mobile", strokeDasharray: "5 5" }
          },
          xAxisKey: "month",
          showLegend: true,
          height: 300
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Composed Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Combines different chart types in one visualization." }),
      /* @__PURE__ */ jsx(
        ComposedChart,
        {
          data: timeSeriesData,
          config: {
            desktop: { label: "Desktop", type: "bar" },
            mobile: { label: "Mobile", type: "line" },
            tablet: { label: "Tablet", type: "area", fillOpacity: 0.3 }
          },
          xAxisKey: "month",
          showLegend: true,
          height: 300
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Pie Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Shows proportions and percentages of a whole." }),
      /* @__PURE__ */ jsx("div", { className: "max-w-md", children: /* @__PURE__ */ jsx(PieChart, { data: pieData, showLegend: true, height: 300 }) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Donut Chart (Pie with Inner Radius)" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "A variation of pie chart with a hollow center." }),
      /* @__PURE__ */ jsx("div", { className: "max-w-md", children: /* @__PURE__ */ jsx(
        PieChart,
        {
          data: pieData,
          innerRadius: 60,
          outerRadius: 100,
          showLegend: true,
          centerLabel: "Market Share",
          height: 300
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Radar Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Displays multivariate data on axes from the same point." }),
      /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsx(
        RadarChart,
        {
          data: radarData,
          config: {
            level: { label: "Current Level", color: "hsl(var(--chart-1))" },
            required: {
              label: "Required Level",
              color: "hsl(var(--chart-2))",
              fillOpacity: 0.2
            }
          },
          angleAxisKey: "skill",
          showLegend: true,
          height: 400
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Radial Bar Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Shows progress or comparison in circular bars." }),
      /* @__PURE__ */ jsx("div", { className: "max-w-md", children: /* @__PURE__ */ jsx(
        RadialBarChart,
        {
          data: [
            { name: "Completed", value: 80 },
            { name: "In Progress", value: 45 },
            { name: "Pending", value: 25 }
          ],
          innerRadius: 30,
          outerRadius: 90,
          showLegend: true,
          maxValue: 100,
          height: 300
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Scatter Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Shows correlation between two variables." }),
      /* @__PURE__ */ jsx(
        ScatterChart,
        {
          data: {
            groupA: [
              { x: 100, y: 200 },
              { x: 120, y: 100 },
              { x: 170, y: 300 },
              { x: 140, y: 250 },
              { x: 150, y: 180 }
            ],
            groupB: [
              { x: 200, y: 260 },
              { x: 240, y: 290 },
              { x: 190, y: 280 },
              { x: 210, y: 300 },
              { x: 180, y: 250 }
            ]
          },
          config: {
            groupA: { label: "Group A", color: "hsl(var(--chart-1))" },
            groupB: { label: "Group B", color: "hsl(var(--chart-2))" }
          },
          showLegend: true,
          height: 300
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Funnel Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Perfect for showing conversion rates and process flow." }),
      /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsx(FunnelChart, { data: funnelData, showLabel: true, height: 400 }) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Treemap" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Displays hierarchical data as nested rectangles." }),
      /* @__PURE__ */ jsx(Treemap, { data: treemapData, height: 400 })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("h2", { className: "headline-md", children: "Sankey Chart" }),
      /* @__PURE__ */ jsx("p", { className: "text-subtle", children: "Shows flow and relationships between nodes." }),
      /* @__PURE__ */ jsx(
        SankeyChart,
        {
          data: sankeyData,
          nodeWidth: 15,
          nodePadding: 10,
          height: 400
        }
      )
    ] })
  ] });
}
export {
  ChartExamples,
  ChartExamples as default
};
