import React from "react";
import { Chart } from "../components/Chart";
import { Button } from "../components/Button";
import { Select } from "../components/Select";
import { Table } from "../components/Table";
import { ReactComponent as NotificationIcon } from "../assets/bell.svg";

export default {
  title: "Components/Chart(WIP)",
  component: Chart,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "The **Chart** component is a reusable visualization wrapper built on top of **Highcharts**. " +
          "It supports 20+ chart types (column, line, bar, pie, scatter, bubble, waterfall, treemap, heatmap, and more), " +
          "and includes advanced options such as 3D mode, stacked views, tooltips, legends, and dynamic dropdowns.\n\n" +
          "**Features:**\n" +
          "- Reusable, configurable Highcharts wrapper\n" +
          "- Dynamic resizing & scrollable plot area\n" +
          "- Supports dual axis, legends, and tooltips\n" +
          "- Expandable, downloadable, and switchable views\n" +
          "- Works with heatmap, scatter3d, treemap, pie, and other advanced chart types",
      },
    },
  },
  argTypes: {
    // 📊 Core Chart Props
    graphType: {
      description:
        "Specifies the type of chart to render (e.g., column, bar, line, pie, heatmap, etc.)",
      control: { type: "select" },
      options: ["column", "bar", "line", "area", "pie", "semidonut", "scatter"],
      table: {
        defaultValue: { summary: "column" },
        type: { summary: "string" },
      },
    },
    graphTitle: {
      description:
        "Main heading of the chart displayed in the top header section.",
      control: { type: "text" },
      table: { type: { summary: "string" } },
    },
    xAxisCategories: {
      description: "Labels for the X-axis (array of strings).",
      control: { type: "object" },
      table: { type: { summary: "string[]" } },
    },
    xAxisTitle: {
      description: "Title text displayed below the X-axis.",
      control: { type: "text" },
      table: { type: { summary: "string" } },
    },
    yAxisTitle: {
      description: "Title text displayed beside the Y-axis.",
      control: { type: "text" },
      table: { type: { summary: "string" } },
    },
    seriesData: {
      description:
        "Array of data series objects that define chart values and colors.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.SeriesOptionsType[]" } },
    },
    stackedColumn: {
      description:
        "If true, stacks column series on top of each other (for cumulative data).",
      control: { type: "boolean" },
      table: { defaultValue: { summary: false }, type: { summary: "boolean" } },
    },
    is3D: {
      description: "Enables 3D chart rendering (works for specific types).",
      control: { type: "boolean" },
      table: { defaultValue: { summary: false }, type: { summary: "boolean" } },
    },
    showSubTitle: {
      description: "Shows the subtitle text below the chart (optional).",
      control: { type: "boolean" },
      table: { defaultValue: { summary: false }, type: { summary: "boolean" } },
    },

    // 🧩 UI Controls
    showSwitchButton: {
      description:
        "Displays the button that toggles between chart and table view.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },
    showChartTypeDropdown: {
      description: "Shows the chart type selection dropdown on the top-right.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: false }, type: { summary: "boolean" } },
    },
    showDownloadButton: {
      description: "Displays the button for chart data download/export.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },

    // 🧭 Dropdown / Menu
    chartTypesOptions: {
      description: "Array of available chart type options for the dropdown.",
      control: { type: "object" },
      table: { type: { summary: "Array<{ label: string; value: string }>" } },
    },
    selectedChart: {
      description:
        "Currently selected chart type (matches one from chartTypesOptions).",
      control: { type: "text" },
      table: { type: { summary: "string" } },
    },
    chartMenuProps: {
      description:
        "Additional configuration options for the chart type menu (placement, density, etc).",
      control: { type: "object" },
      table: { type: { summary: "object" } },
    },

    // ⚙️ Functional / Internal Props
    onChartDownload: {
      description: "Callback triggered when user clicks the download button.",
      action: "chart downloaded",
      table: { type: { summary: "() => void" } },
    },
    fallbackContent: {
      description:
        "Optional JSX content displayed when chart is hidden (for example, an empty state message).",
      control: { type: "object" },
      table: { type: { summary: "React.ReactNode" } },
    },
    topRightOptions: {
      description:
        "Custom React elements (e.g., Buttons, Selects) rendered in the top-right corner of the chart header.",
      control: { type: "object" },
      table: { type: { summary: "React.ReactNode" } },
    },
    showScrollX: {
      description:
        "Enables horizontal scrolling for charts with large numbers of categories. When disabled, the chart will auto-fit within the view but may compress data.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },
    topLeftOptions: {
      description:
        "Custom React elements (e.g., Buttons, Selects) rendered in the top-left corner of the chart header.",
      control: { type: "object" },
      table: { type: { summary: "React.ReactNode" } },
    },
    // 📝 Subtitle
    subtitleText: {
      description:
        "Subtitle text shown inside the chart area when showSubTitle is true.",
      control: { type: "text" },
      table: { defaultValue: { summary: '""' }, type: { summary: "string" } },
    },
    // 📍 Legend / Axis positions
    legendXPosition: {
      description: "Horizontal offset for the legend.",
      control: { type: "number" },
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "number | null" },
      },
    },
    legendYPosition: {
      description: "Vertical offset for the legend.",
      control: { type: "number" },
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "number | null" },
      },
    },
    xAxisTitlePositionY: {
      description: "Vertical offset for the X-axis title.",
      control: { type: "number" },
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "number | null" },
      },
    },
    // 🧰 Tooltip
    customTooltipFormatter: {
      description:
        "Custom formatter for tooltip. Receives Highcharts context (`this`) and should return an HTML string.",
      control: false,
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "(ctx) => string" },
      },
    },
    sharedTooltip: {
      description:
        "If true, displays a shared tooltip for all series at a point.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: false }, type: { summary: "boolean" } },
    },
    // 🧩 Advanced option overrides (merged into Highcharts options)
    chartOptions: {
      description:
        "Extra Highcharts `chart` options to merge (e.g., spacing, backgroundColor).",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.ChartOptions" } },
    },
    titleOptions: {
      description:
        "Highcharts `title` options. Component hides default title; use for fine control.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.TitleOptions" } },
    },
    subtitleOptions: {
      description:
        "Highcharts `subtitle` options. Used when `showSubTitle` is true or to override defaults.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.SubtitleOptions" } },
    },
    xAxisOptions: {
      description: "Additional `xAxis` options merged with component defaults.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.XAxisOptions" } },
    },
    yAxisOptions: {
      description:
        "Base `yAxis` options applied to both left and right axes (if present).",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.YAxisOptions" } },
    },
    yAxisLeftOptions: {
      description: "Extra options merged into the left Y axis.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.YAxisOptions" } },
    },
    yAxisRightOptions: {
      description: "Extra options merged into the right Y axis (when used).",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.YAxisOptions" } },
    },
    zAxisOptions: {
      description:
        "Highcharts `zAxis` options for 3D charts (scatter3d, etc.).",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.ZAxisOptions | undefined" } },
    },
    tooltipOptions: {
      description: "Additional Highcharts `tooltip` options to merge.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.TooltipOptions" } },
    },
    plotOptionsOptions: {
      description: "Additional `plotOptions` merged with component defaults.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.PlotOptions" } },
    },
    creditsOptions: {
      description:
        "Highcharts `credits` options (credits disabled by default).",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.CreditsOptions" } },
    },
    legendOptions: {
      description:
        "Additional `legend` options merged with component defaults.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.LegendOptions" } },
    },
    colorAxisOptions: {
      description:
        "Highcharts `colorAxis` options (used for heatmap, bubble, packedbubble, treemap).",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.ColorAxisOptions" } },
    },
    seriesOptions: {
      description:
        "Override `series` entirely with Highcharts series config; if null, uses `seriesData`.",
      control: { type: "object" },
      table: { type: { summary: "Highcharts.SeriesOptionsType[] | null" } },
    },
    additionalOptions: {
      description:
        "Last-mile options merged at the end. Use sparingly for specialty charts.",
      control: { type: "object" },
      table: { type: { summary: "Record<string, unknown>" } },
    },
    // 👁️ Visibility
    showchart: {
      description:
        "Controls whether the chart is visible; if false, shows `fallbackContent`.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },
    setShowChart: {
      description: "Setter function to toggle chart visibility.",
      action: "toggle chart",
      table: { type: { summary: "(val: boolean) => void" } },
    },
    // 🎛️ Plot options / events
    plotOptionsEvents: {
      description:
        "Additional plotOptions for Highcharts series, including event handlers (e.g., point.events.click).",
      control: { type: "object" },
      table: {
        defaultValue: { summary: "undefined" },
        type: { summary: "object" },
      },
    },
    // 🖥️ Header right extra control
    customSystemButton: {
      description:
        "Custom React node rendered near the expand/collapse button.",
      control: { type: "object" },
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "React.ReactNode" },
      },
    },
    handleChartExpand: {
      description:
        "Callback when expand/collapse toggles. Receives a boolean (expanded).",
      action: "expand toggled",
      table: { type: { summary: "(expanded: boolean) => void" } },
    },
    // 📐 Layout
    chartMarginBottom: {
      description: "Bottom margin for the chart area.",
      control: { type: "number" },
      table: { defaultValue: { summary: 150 }, type: { summary: "number" } },
    },
    cardContainer: {
      description:
        "Wraps the chart in a card-like container with header and padding.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },
    showExpandButton: {
      description:
        "Shows the expand button in the top-right corner of the chart header.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },
    width: {
      description: "Width of the chart.",
      control: { type: "number" },
      table: {
        defaultValue: { summary: null },
        type: { summary: "number | null" },
      },
    },
    height: {
      description: "Height of the chart.",
      control: { type: "number" },
      table: {
        defaultValue: { summary: null },
        type: { summary: "number | null" },
      },
    },
    showHeader: {
      description: "Shows the header of the chart.",
      control: { type: "boolean" },
      table: { defaultValue: { summary: true }, type: { summary: "boolean" } },
    },
    yAxisTitleRight: {
      description: "Title text displayed beside the right Y-axis.",
      control: { type: "text" },
      table: { type: { summary: "string" } },
    },
    customLegend: {
      description:
        "Provide a custom legend UI. Pass a React element or a function that receives the Highcharts instance and returns an element.",
      control: false,
      table: {
        type: { summary: "React.ReactNode | (chart) => React.ReactNode" },
      },
    },
    customLegendStyle: {
      description:
        "Style object applied to the custom legend container (e.g., { marginTop: 8 }).",
      control: { type: "object" },
      table: { type: { summary: "React.CSSProperties" } },
    },
    hoveredXAxisIndex: {
      description: "Index of the X-axis item that is currently hovered.",
      control: { type: "number" },
      table: { type: { summary: "number" } },
    },
    aboveChartComponent: {
      description: "Component to be rendered above the chart.",
      control: { type: "object" },
      table: { defaultValue: { summary: null }, type: { summary: "React.ReactNode" } },
    },
    isEmpty: {
      description: "Whether the chart is empty.",
      control: { type: "boolean" },
      table: { type: { summary: "boolean" } },
    },
  },
};

// STORIES

export const ColumnChart = {
  args: {
    graphTitle: "Header Title",
    xAxisCategories: [
      "USA",
      "China",
      "Brazil",
      "EU",
      "Argentina",
      "India",
      "Russia",
      "Canada",
      "Mexico",
      "Australia",
      "South Africa",
      "Egypt",
      "Nigeria",
      "Pakistan",
      "Bangladesh",
      "Vietnam",
      "Indonesia",
      "Thailand",
      "Philippines",
      "Japan",
      "Korea",
      "UK",
      "France",
      "Germany",
      "Italy",
      "Spain",
      "Turkey",
      "Iran",
      "Iraq",
      "Ukraine",
      "Poland",
      "Netherlands",
      "Belgium",
      "Sweden",
      "Norway",
      "Denmark",
      "Finland",
      "Chile",
      "Peru",
      "Colombia",
      "Venezuela",
      "Saudi Arabia",
      "UAE",
      "Qatar",
      "Kuwait",
      "Israel",
      "Jordan",
      "Kenya",
      "Ethiopia",
      "Morocco",
      "Algeria",
    ],
    seriesData: [
      {
        name: "Corn",
        data: Array.from(
          { length: 51 },
          () => Math.floor(Math.random() * 400000 + 10000) // 10k - 400k random
        ),
        color: "#6BBEC2",
      },
      {
        name: "Wheat",
        data: Array.from(
          { length: 51 },
          () => Math.floor(Math.random() * 150000 + 5000) // 5k - 150k random
        ),
        color: "#658EC4",
      },
    ],
    xAxisTitle: "Countries",
    yAxisTitle: "1000 metric tons (MT)",
    stackedColumn: true,
    isEmpty: false,
    fallbackContent: (
      <Table
        cardContainer
        columnDefs={[
          {
            advanceSearchEnabled: true,
            field: "make",
            filter: "agTextColumnFilter",
            isSearchable: true,
            sortable: true,
            thirdOptionAsDropdown: true,
            thirdOptionDropdownOptions: [
              {
                label: "Tesla",
                value: "tesla",
              },
              {
                label: "Ford",
                value: "ford",
              },
              {
                label: "Toyota",
                value: "toyota",
              },
              {
                label: "Honda",
                value: "honda",
              },
              {
                label: "Hyundai",
                value: "hyundai",
              },
              {
                label: "Kia",
                value: "kia",
              },
              {
                label: "Volkswagen",
                value: "volkswagen",
              },
              {
                label: "Mercedes-Benz",
                value: "mercedes-benz",
              },
              {
                label: "BMW",
                value: "bmw",
              },
              {
                label: "Audi",
                value: "audi",
              },
              {
                label: "Volvo",
                value: "volvo",
              },
              {
                label: "Jeep",
                value: "jeep",
              },
              {
                label: "Land Rover",
                value: "land-rover",
              },
              {
                label: "Lexus",
                value: "lexus",
              },
              {
                label: "Mazda",
                value: "mazda",
              },
              {
                label: "Nissan",
                value: "nissan",
              },
              {
                label: "Peugeot",
                value: "peugeot",
              },
              {
                label: "Renault",
                value: "renault",
              },
              {
                label: "Skoda",
                value: "skoda",
              },
              {
                label: "Suzuki",
                value: "suzuki",
              },
              {
                label: "Toyota",
                value: "toyota",
              },
              {
                label: "Volkswagen",
                value: "volkswagen",
              },
              {
                label: "Volvo",
                value: "volvo",
              },
            ],
            toShowDuplicateColumnInAdvanceSearch: true,
          },
          {
            advanceSearchEnabled: true,
            field: "model",
            filter: "agTextColumnFilter",
            isSearchable: true,
            toShowDuplicateColumnInAdvanceSearch: true,
          },
          {
            advanceSearchEnabled: true,
            displayFormat: "MM-DD-YYYY",
            field: "electric",
            filter: "agDateColumnFilter",
            isSearchable: true,
            minWidth: 150,
          },
          {
            field: "electric1",
          },
          {
            field: "electric2",
          },
        ]}
        commentProps={{
          author: "User 1",
          commentSearchOptions: [
            {
              label: "Sort by date",
              value: "opt1",
            },
            {
              label: "Sort by unread",
              value: "opt2",
            },
            {
              label: "Show resolved comments",
              value: "opt3",
            },
            {
              label: "Only your threads",
              value: "opt4",
            },
            {
              label: "Only current page",
              value: "opt5",
            },
          ],
          comments: {
            "0__electric1": [
              {
                author: "User 2",
                id: 2,
                isEdited: true,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 3",
                id: 3,
                text: "Yes, let's do it",
                timestamp: "2025-04-22T12:10:00",
              },
            ],
            "0__make": [
              {
                author: "User 1",
                id: 1,
                text: "Hi there",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 2",
                id: 2,
                text: "Hello, ready for discussion?",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 3",
                id: 3,
                text: "I am ready",
                timestamp: "2025-04-22T12:10:00",
              },
            ],
            "2__model": [
              {
                author: "User 3",
                id: 3,
                text: "Which model are you interested in?",
                timestamp: "2025-04-22T12:10:00",
              },
            ],
            "3__make": [
              {
                author: "User 1",
                id: 1,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 2",
                id: 2,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 3",
                id: 3,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
            ],
            "7__electric2": [
              {
                author: "User 1",
                id: 1,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 2",
                id: 2,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 3",
                id: 3,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
              {
                author: "User 4",
                id: 4,
                text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                timestamp: "2025-04-22T12:10:00",
              },
            ],
          },
          handleCommentDelete: () => {},
          handleCommentEdit: () => {},
          handleMarkAsRead: () => {},
          handleSaveComment: () => {},
          selectedCommentSearchOption: "opt1",
        }}
        contentualFilterProps={{
          filterButtonClick: () => {},
          filterButtonLabel: "Select Filters",
          filterDropDownLabel: "Applied Filters: ",
          filterTags: [
            {
              handleViewAll: () => {},
              id: 1,
              label: "TimeLine",
              required: true,
              values: [
                {
                  id: 1,
                  label: "LW",
                },
                {
                  id: 1,
                  label: "Department 2",
                },
                {
                  id: 1,
                  label: "Department 3",
                },
                {
                  id: 1,
                  label: "Department 4",
                },
                {
                  id: 1,
                  label: "Department 5",
                },
                {
                  id: 1,
                  label: "Department 6",
                },
                {
                  id: 1,
                  label: "Department 7",
                },
              ],
            },
            {
              handleViewAll: () => {},
              id: 2,
              label: "Compared to",
              required: true,
              values: [
                {
                  id: 1,
                  label: "Plan",
                },
              ],
            },
          ],
          handleApplyFilter: () => {},
          handleCancelFilter: () => {},
          recentFilters: [
            {
              filterSet: [
                {
                  id: 1,
                  label: "Filter label_01",
                },
                {
                  id: 2,
                  label: "Filter label_02",
                },
                {
                  id: 3,
                  label: "Filter label_03",
                },
              ],
              handleRecentFilter: () => {},
              id: 1,
            },
            {
              filterSet: [
                {
                  id: 1,
                  label: "Filter label_01",
                },
                {
                  id: 2,
                  label: "Filter label_02",
                },
                {
                  id: 3,
                  label: "Filter label_03",
                },
              ],
              handleRecentFilter: () => {},
              id: 2,
            },
          ],
          savedFilterLists: [
            {
              id: 1,
              label: "Saved Filter_01",
              value: "filter_01",
            },
            {
              id: 2,
              label: "Saved Filter_02",
              value: "filter_02",
            },
            {
              id: 3,
              label: "Saved Filter_03",
              value: "filter_03",
            },
            {
              id: 4,
              label: "Saved Filter_04",
              value: "filter_04",
            },
            {
              id: 5,
              label: "Saved Filter_05",
              value: "filter_05",
            },
            {
              id: 6,
              label: "Saved Filter_06",
              value: "filter_06",
            },
            {
              id: 7,
              label: "Saved Filter_07",
              value: "filter_07",
            },
            {
              id: 8,
              label: "Saved Filter_08",
              value: "filter_08",
            },
          ],
          savedFiltersBadge: [
            {
              handleClick: () => {},
              id: 1,
              label: "All",
            },
            {
              handleClick: () => {},
              id: 2,
              label: "Global",
            },
            {
              handleClick: () => {},
              id: 1,
              label: "Personal",
            },
          ],
          selectedFilter: "Not selected",
          setSelectedFilter: () => {},
        }}
        contextualFilterLabel="Filter"
        defaultColDef={{
          filter: true,
        }}
        filterStripProps={{
          filters: [],
          onApplyFilter: () => {},
          onCancelFilter: () => {},
        }}
        isCommentFeatureEnabled
        onContentualFilterClick={() => {}}
        onContextualFilterClick={() => {}}
        onNumberFormatChange={() => {}}
        rowData={[
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Tesla",
            model: "Model Y",
            price: 64950,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Ford",
            model: "F-Series",
            price: 33850,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "maruti",
            model: "dhoni",
            price: 29600,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Toyota",
            model: "dhoni",
            price: 29600,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Toyota",
            model: "dhoni",
            price: 29600,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Toyota",
            model: "Corolla",
            price: 29600,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Toyota",
            model: "Corolla",
            price: 29600,
          },
          {
            electric: true,
            electric0: true,
            electric1: "kunal",
            electric2: "Patel",
            electric3: "Bangalore",
            electric4: "Karnataka",
            electric5: "India",
            make: "Toyota",
            model: "Corolla",
            price: 29600,
          },
        ]}
        rowHeight="default"
        showContentualFilter
        tableHeader="Default Table"
      />
    ),
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: (
      <>
        <Button label="Button">Top Right</Button>
        <Select placeholder="Select Options" />
        <Button label="Button">Top Right</Button>
        <Button label="Button">Top Right</Button>
      </>
    ),
    topLeftOptions: (
      <>
        <Button label="Button">Top Left</Button>
      </>
    ),
    chartTypesOptions: [
      {
        icon: <NotificationIcon />,
        label: "Column",
        value: "column",
        onClick: () => {},
      },
      {
        icon: <NotificationIcon />,
        label: "Bar",
        value: "bar",
        onClick: () => {},
      },
      {
        icon: <NotificationIcon />,
        label: "Line",
        value: "line",
        onClick: () => {},
      },
      {
        icon: <NotificationIcon />,
        label: "Area",
        value: "area",
        onClick: () => {},
      },
      {
        icon: <NotificationIcon />,
        label: "Pie",
        value: "pie",
        onClick: () => {},
      },
      {
        icon: <NotificationIcon />,
        label: "Semi Donut",
        value: "semidonut",
        onClick: () => {},
      },
      {
        icon: <NotificationIcon />,
        label: "Scatter",
        value: "scatter",
        onClick: () => {},
      },
    ],
  },
};

export const NegativeColumn = {
  args: {
    graphTitle: "Column with Negative Values",
    graphType: "column",
    xAxisCategories: ["US A", "US B", "US C", "US D", "US E", "US F"],
    seriesData: [
      {
        name: "Series 1",
        data: [7000, -5000, 6000, -4000, 4500, -3500],
        color: "#6BBEC2",
      },
      {
        name: "Series 2",
        data: [5000, 3000, -4000, 6000, -2000, 6500],
        color: "#658EC4",
      },
      {
        name: "Series 3",
        data: [5500, -2500, 5000, -3000, 7200, -2800],
        color: "#A78BFA",
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const Scatter3D = {
  args: {
    graphTitle: "3D Scatter",
    graphType: "scatter3d",
    is3D: true,
    seriesData: [
      {
        name: "Group A",
        color: "red",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 100, // X
          Math.random() * 6000, // Y
          Math.random() * 10, // Z
        ]),
      },
      {
        name: "Group B",
        color: "blue",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 100,
          Math.random() * 6000,
          Math.random() * 10,
        ]),
      },
      {
        name: "Group C",
        color: "green",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 100,
          Math.random() * 6000,
          Math.random() * 10,
        ]),
      },
      {
        name: "Group D",
        color: "green",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 100,
          Math.random() * 6000,
          Math.random() * 10,
        ]),
      },
      {
        name: "Group E",
        color: "green",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 100,
          Math.random() * 6000,
          Math.random() * 10,
        ]),
      },
      {
        name: "Group f",
        color: "green",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 100,
          Math.random() * 6000,
          Math.random() * 10,
        ]),
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const Heatmap = {
  args: {
    graphTitle: "Heatmap Chart",
    graphType: "heatmap",
    seriesData: [
      {
        name: "Data",
        borderWidth: 1,
        data: Array.from({ length: 10 }, (_, x) =>
          Array.from({ length: 10 }, (_, y) => [
            x,
            y,
            Math.floor(Math.random() * 200), // random values
          ])
        ).flat(),
        dataLabels: {
          enabled: true,
          color: "#000000",
        },
      },
    ],
    xAxisCategories: [
      "10",
      "20",
      "30",
      "40",
      "50",
      "60",
      "70",
      "80",
      "90",
      "100",
    ],
    yAxisTitle: [
      "20k",
      "18k",
      "16k",
      "14k",
      "12k",
      "10k",
      "8k",
      "6k",
      "4k",
      "2k",
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const Lollipop = {
  args: {
    graphTitle: "Lollipop Example",
    graphType: "line",
    is3D: false,
    seriesData: [
      {
        type: "errorbar",
        data: [
          [0, 29],
          [1, 71],
          [2, 106],
          [3, 129],
          [4, 144],
        ],
        whiskerWidth: 2,
        stemWidth: 2,
        whiskerLength: 0,
        color: "#26A69A",
        tooltip: { enabled: false },
      },
      {
        type: "scatter",
        data: [29, 71, 106, 129, 144],
        marker: { symbol: "circle", radius: 6, fillColor: "#26A69A" },
        tooltip: { pointFormat: "{point.y}" },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const BubbleChart = {
  args: {
    graphTitle: "Bubble graph",
    graphType: "bubble",
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        name: "Product A",
        data: [
          [9, 81, 6300],
          [4, 9, 6400],
          [1, 10, 5000],
          [6, 51, 3500],
          [4, 39, 2800],
        ],
        color: "#658EC4", // Example color
      },
      {
        name: "Product B",
        data: [
          [3, 76, 5000],
          [7, 39, 4500],
          [5, 20, 2500],
          [8, 1, 1000],
          [2, 36, 1500],
        ],
        color: "#6BBEC2", // Example color
      },
      {
        name: "Product C",
        data: [
          [8, 100, 7000],
          [2, 93, 6200],
          [5, 48, 5500],
          [1, 13, 3000],
          [6, 3, 2000],
        ],
        color: "#8C6ED9", // Example color
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const Candlesticks = {
  args: {
    graphTitle: "Candlesticks",
    graphType: "candlestick",
    xAxisCategories: ["US A", "US B", "US C", "US D"],
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        name: "Candlestick Data",
        type: "candlestick",
        data: [
          [0, 6100, 7200, 5900, 6800], // [x, open, high, low, close]
          [1, 5000, 6000, 4500, 5600],
          [2, 5400, 5800, 5200, 5600],
          [3, 4500, 6200, 4000, 6000],
          [4, 3200, 4800, 2800, 3500],
          [5, 4000, 4800, 3600, 4200],
          [6, 4700, 5500, 4200, 5300],
          [7, 6000, 7500, 5500, 7200],
          [8, 3800, 4200, 3000, 3500],
        ],
        color: "#3B898D", // bearish (filled candle)
        lineColor: "#3B898D", // bearish border
        upColor: "#ffffff", // bullish (hollow candle) fill
        upLineColor: "#3B898D",
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const WaterfallChart = {
  args: {
    graphTitle: "Waterfall Example",
    graphType: "waterfall",
    xAxisCategories: ["US A", "US B", "US C", "US C", "US D", "US D"],
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        type: "waterfall",
        name: "Waterfall Data",
        data: [
          { name: "US A", y: 3000, color: "#658EC4" }, // Positive bar
          { name: "US B", y: 4000, color: "#6BBEC2" }, // Positive bar
          { name: "US C", isIntermediateSum: true, color: "#A78BFA" }, // Intermediate sum
          { name: "US C", y: -2500, color: "#6BBEC2" }, // Negative bar
          { name: "US D", y: 3500, color: "#658EC4" }, // Positive bar
          { name: "US D", isSum: true, color: "#A78BFA" }, // Final total
        ],
        borderColor: "#ffffff",
        borderWidth: 1,
        upColor: "#6BBEC2", // Optional: auto color for positive bars
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const VennChart = {
  args: {
    graphTitle: "Venn Diagram Example",
    graphType: "venn",
    seriesData: [
      {
        type: "venn",
        name: "Venn Data",
        data: [
          { sets: ["A"], value: 10, name: "Label A" },
          { sets: ["B"], value: 15, name: "Label B" },
          { sets: ["C"], value: 20, name: "Label C" },
          { sets: ["A", "B"], value: 5, name: "A ∩ B" },
          { sets: ["B", "C"], value: 7, name: "B ∩ C" },
          { sets: ["A", "C"], value: 3, name: "A ∩ C" },
          { sets: ["A", "B", "C"], value: 2, name: "A ∩ B ∩ C" },
        ],
        dataLabels: {
          enabled: true,
          style: {
            fontSize: "12px",
            fontWeight: "500",
            color: "#444",
          },
        },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const ScatterChart = {
  args: {
    graphTitle: "Scatter plot",
    graphType: "scatter",
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        name: "Series 1",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 10, // X
          Math.random() * 8000, // Y
        ]),
        color: "#E67C73", // red/orange
        marker: {
          symbol: "circle",
          radius: 4,
        },
      },
      {
        name: "Series 2",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 10,
          Math.random() * 8000,
        ]),
        color: "#5C9BD5", // blue
        marker: {
          symbol: "square",
          radius: 4,
        },
      },
      {
        name: "Series 3",
        data: Array.from({ length: 100 }, () => [
          Math.random() * 10,
          Math.random() * 8000,
        ]),
        color: "#8E7CC3", // purple
        marker: {
          symbol: "triangle",
          radius: 5,
        },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const LineChart = {
  args: {
    graphTitle: "Line chart",
    graphType: "line",
    xAxisCategories: ["US A", "US B", "US C", "US C", "US C", "US D", "US D"],
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        name: "Series 1",
        data: [2000, 2200, 2300, 2400, 2500, 2600, 2700],
        color: "#2E86AB",
        marker: {
          symbol: "circle",
        },
      },
      {
        name: "Series 2",
        data: [1500, 1300, 1350, 1250, 1400, 1450, 1500],
        color: "#1ABC9C",
        marker: {
          symbol: "circle",
        },
      },
      {
        name: "Series 3",
        data: [4000, 3800, 3900, 3950, 4100, 4050, 4150],
        color: "#9B59B6",
        marker: {
          symbol: "circle",
        },
      },
      {
        name: "Series 4",
        data: [5000, 5200, 6000, 7000, 8000, 7800, 8200],
        color: "#34495E",
        marker: {
          symbol: "circle",
        },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const AreaChart = {
  args: {
    graphTitle: "Area Chart",
    graphType: "area",
    xAxisCategories: ["US A", "US B", "US C", "US C", "US C", "US D", "US D"],
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        name: "Series 1",
        data: [0, 500, 250, 40, 350, 20, 50, 40, 30, 20, 100, 50, 0],
        color: "rgba(46, 204, 113, 0.5)", // green shade with transparency
        lineColor: "#27AE60", // line border color
        marker: {
          enabled: false,
        },
      },
      {
        name: "Series 2",
        data: [0, 100, 2000, 6000, 5000, 2500, 2000, 1000, 500, 100, 20, 0],
        color: "rgba(52, 152, 219, 0.5)", // blue shade with transparency
        lineColor: "#2980B9",
        marker: {
          enabled: false,
        },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
    topRightOptions: null,
  },
};

export const DualAxisChart = {
  args: {
    graphTitle: "Dual Axes Line & Column",
    graphType: "column", // base chart type
    xAxisCategories: ["US A", "US B", "US C", "US C", "US C", "US D", "US D"],
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    seriesData: [
      {
        name: "Column Data",
        type: "column", // 👈 force column for this series
        data: [1500, 7000, 2000, 4500, 4000, 1000, 2000],
        color: "#5DADE2",
      },
      {
        name: "Line Data",
        type: "line", // 👈 force line for this series
        yAxis: 1, // 👈 use secondary axis
        data: [8000, 7500, 4500, 6000, 3500, 5500, 2500],
        color: "#1ABC9C",
        marker: {
          enabled: true,
          symbol: "circle",
        },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
  },
};

export const TreeMapChart = {
  args: {
    graphType: "treemap",
    graphTitle: "Treemap Example",
    seriesData: [
      {
        type: "treemap",
        layoutAlgorithm: "squarified",
        allowDrillToNode: true,
        animationLimit: 1000,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: "12px",
            fontWeight: "500",
          },
        },
        levels: [
          {
            level: 1,
            borderWidth: 2,
            borderColor: "#fff",
            dataLabels: {
              enabled: true,
            },
          },
        ],
        data: [
          { name: "Label 1", value: 6, color: "#B39DDB" },
          { name: "Label 2", value: 3, color: "#81D4FA" },
          { name: "Label 3", value: 2, color: "#FFD54F" },
          { name: "Label 4", value: 4, color: "#FF8A65" },
          { name: "Label 5", value: 1, color: "#4DB6AC" },
        ],
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
  },
};

export const FashionTreemapWithLegend = {
  args: {
    graphType: "treemap",
    graphTitle: "Fashion Categories",
    showChartTypeDropdown: false,
    xAxisTitle: "",
    yAxisTitle: "",
    chartMarginBottom: 24,
    seriesData: [
      {
        type: "treemap",
        layoutAlgorithm: "squarified",
        allowDrillToNode: false,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: "11px",
            fontWeight: "500",
            color: "#1F2B4D",
          },
        },
        levels: [
          {
            level: 1,
            borderWidth: 8,
            borderColor: "#FFFFFF",
          },
        ],
        data: [
          // Men Wear group
          { id: "men", name: "Men Wear", color: "#D8B9F3" },
          { name: "Men tees", parent: "men", value: 54 },
          { name: "Men bottoms", parent: "men", value: 42 },
          { name: "Men fleece", parent: "men", value: 36 },
          { name: "Men wovens", parent: "men", value: 34 },
          { name: "Men denim", parent: "men", value: 22 },
          { name: "Men knits", parent: "men", value: 28 },
          { name: "Men outerwear", parent: "men", value: 10 },
          { name: "Men shorts", parent: "men", value: 9 },

          // Women Wear group
          { id: "women", name: "Women Wear", color: "#E5F3D6" },
          { name: "Women dresses", parent: "women", value: 48 },
          { name: "Women shorts", parent: "women", value: 18 },
          { name: "Women tees", parent: "women", value: 14 },
          { name: "Women fleece", parent: "women", value: 12 },
          { name: "Women denim", parent: "women", value: 11 },

          // Men Accessories group
          { id: "menAcc", name: "Men Accessories", color: "#CDE4FA" },
          { name: "Men hats", parent: "menAcc", value: 18 },
          { name: "Men socks", parent: "menAcc", value: 24 },
          { name: "Men wallets", parent: "menAcc", value: 12 },
          { name: "Men watches", parent: "menAcc", value: 14 },
          { name: "Men bags", parent: "menAcc", value: 16 },
          { name: "Men fragrance", parent: "menAcc", value: 12 },
          { name: "Men tie", parent: "menAcc", value: 10 },

          // Women Accessories group
          { id: "womenAcc", name: "Women Accessories", color: "#CDEAB8" },
          { name: "Women perfumes", parent: "womenAcc", value: 26 },
          { name: "Women hats", parent: "womenAcc", value: 18 },
          { name: "Women bags", parent: "womenAcc", value: 16 },
          { name: "Women fragrance", parent: "womenAcc", value: 14 },

          // Kids Wear group
          { id: "kids", name: "Kids wear", color: "#FBD3C9" },
          { name: "Kids dresses", parent: "kids", value: 18 },
          { name: "Kids tees", parent: "kids", value: 16 },
          { name: "Kids shorts", parent: "kids", value: 12 },
          { name: "Kids outerwear", parent: "kids", value: 10 },
          { name: "Kids...", parent: "kids", value: 10 },

          // Kids Accessories group
          { id: "kidsAcc", name: "Kids Accessories", color: "#FCE1DB" },
          { name: "Kids socks", parent: "kidsAcc", value: 14 },
          { name: "Kids watches", parent: "kidsAcc", value: 12 },
          { name: "Kids bags", parent: "kidsAcc", value: 16 },
        ],
      },
    ],
    customLegendPlacement: "below",
    customLegend: (
      <div
        style={{
          display: "flex",
          gap: 16,
          flexWrap: "wrap",
          marginTop: 12,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {[
          { label: "Men Wear", color: "#D8B9F3" },
          { label: "Women Wear", color: "#E5F3D6" },
          { label: "Men Accessories", color: "#CDE4FA" },
          { label: "Women Accessories", color: "#CDEAB8" },
          { label: "Kids wear", color: "#FBD3C9" },
          { label: "Kids Accessories", color: "#FCE1DB" },
        ].map((item) => (
          <div
            key={item.label}
            style={{ display: "flex", alignItems: "center", gap: 6 }}
          >
            <span
              style={{
                width: 12,
                height: 12,
                borderRadius: 3,
                background: item.color,
                border: "1px solid rgba(0,0,0,0.06)",
              }}
            />
            <span style={{ color: "#60697D", fontSize: 12, fontWeight: 500 }}>
              {item.label}
            </span>
          </div>
        ))}
      </div>
    ),
  },
};
export const AreaChat = {
  args: {
    graphType: "area line",
    graphTitle: "Area Spline Example",
    xAxisCategories: ["US A", "US B", "US C", "US D", "US E"],
    yAxisTitle: "Label",
    seriesData: [
      {
        type: "areaspline",
        name: "Label 1",
        data: [8000, 800, 4600, 9400, 2200],
        color: "#4DB6AC",
        fillOpacity: 0.2,
        marker: {
          enabled: true,
          radius: 3,
        },
      },
      {
        type: "areaspline",
        name: "Label 2",
        data: [3200, 5600, 1000, 4600, 5000],
        color: "#3949AB",
        fillOpacity: 0.3,
        marker: {
          enabled: true,
          radius: 3,
        },
      },
    ],
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
  },
};

export const SemiDonutChart = {
  args: {
    graphType: "semidonut",
    graphTitle: "Semi Circle Donut",
    seriesData: [
      {
        type: "pie",
        name: "Label",
        innerSize: "70%", // donut style
        data: [
          ["A", 12000000],
          ["B", 5000000],
          ["C", 3000000],
          ["D", 2500000],
          ["E", 1500000],
        ],
        dataLabels: {
          enabled: true,
        },
      },
    ],
    is3D: false,
    stackedColumn: false,
    showSubTitle: true,
    onChartDownload: () => {},
    showSwitchButton: true,
    showChartTypeDropdown: true,
    fallbackContent: null,
    subtitleText: "23.5M",
  },
};

export const ColumnStackedChart = {
  args: {
    graphType: "column",
    graphTitle: "Stacked Column Bar",
    xAxisCategories: ["US A", "US B", "US C", "US D"],
    yAxisTitle: "Label",
    stackedColumn: true,
    seriesData: [
      {
        name: "Series 1",
        data: [3000, 5000, 2000, 4000],
      },
      {
        name: "Series 2",
        data: [1500, 2500, 1800, 2000],
      },
      {
        name: "Series 3",
        data: [1000, 2000, 1500, 1000],
      },
    ],
    showSwitchButton: true,
    showChartTypeDropdown: true,
    showScrollX: true,
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    fallbackContent: null,
  },
};

export const StackedBarChart = {
  args: {
    graphType: "bar",
    graphTitle: "Stacked Bar",
    xAxisCategories: ["January", "February", "March", "April", "May"],
    yAxisTitle: "Label",
    stackedColumn: true,
    seriesData: [
      {
        name: "Series 1",
        data: [5000, 3000, 4000, 7000, 6000],
      },
      {
        name: "Series 2",
        data: [2000, 2500, 3000, 1500, 4000],
      },
      {
        name: "Series 3",
        data: [1500, 0, 2000, 0, 2500],
      },
    ],
    showSwitchButton: true,
    showChartTypeDropdown: true,
    showScrollX: true,
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    fallbackContent: null,
  },
};

export const PieChart = {
  args: {
    graphType: "pie",
    graphTitle: "Donut",
    seriesData: [
      {
        name: "Label",
        data: [
          { name: "Label", y: 12000000 },
          { name: "Label", y: 6000000 },
          { name: "Label", y: 4000000 },
          { name: "Label", y: 1500000 },
        ],
      },
    ],
    showSwitchButton: true,
    showChartTypeDropdown: true,
    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
  },
};

export const OmsChart = {
  args: {
    graphType: "column",
    graphTitle: "Heading",
    xAxisTitle: "Label",
    yAxisTitle: "Label",
    xAxisCategories: Array?.from({ length: 26 }, (_, i) =>
      `${i + 1}`.padStart(2, "0")
    ),
    seriesData: [
      {
        type: "column",
        name: "Label",
        data: [
          1200, -1500, -1300, -1400, 3000, 0, 2000, -1800, 2200, 1100, 700,
          -100, 200, 100, 20,
        ], // 👈 bar chart data
      },
      {
        type: "line",
        name: "Label",
        data: [
          2000, 1800, 1600, 1400, 1700, 2200, 1200, -1400, 2100, 1500, 700,
          -100, 200, 100, 20,
        ], // 👈 line data
      },
      {
        type: "areaspline",
        name: "Label",
        data: [
          4000, 3500, 3200, 3000, 3700, 3600, 2050, 1050, 1150, -200, 10, 20,
        ], // 👈 area spline
      },
      {
        type: "line",
        dashStyle: "ShortDash", // 👈 dotted line
        name: "Label",
        data: [3900, 3600, 3400, 3100, 3500, 3300, -500, 1200, 1400, 450, 232],
      },
    ],

    xAxisTitle: "XYZ",
    yAxisTitle: "Y axis",
    stackedColumn: true,
    showScrollX: true,
    fallbackContent: null,
    showSwitchButton: true,
    showChartTypeDropdown: true,
  },
};

export const SimpleColumnChart = {
  args: {
    graphType: "column",
    cardContainer: false,
    showHeader: false,
    width: 408,
    height: 161,
    xAxisCategories: ["WP", "LY", "MFP OP", "IAF"],
    seriesData: [
      {
        name: "Values",
        showInLegend: false,
        borderRadius: 4,
        pointWidth: 30,
        data: [
          { y: 5000, color: "#76C4C8" },
          { y: 6800, color: "#D1A4F9" },
          { y: 7200, color: "#8CAADC" },
          { y: 4200, color: "#F7C8BA" },
        ],
      },
    ],
    xAxisTitle: "",
    yAxisTitle: "",
    legendXPosition: null,
    legendYPosition: null,
    showScrollX: false,
    chartMarginBottom: 30,
  },
};
