import { Chart } from "../modules/request-details/components/annotation-workbench/modals/Chart/Chart";
import type { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "Example/Chart",
  component: Chart,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {},
} satisfies Meta<typeof Chart>;

export default meta;

type Story = StoryObj<typeof meta>;

const options = {
  title: "Company Performance",
  curveType: "function",
  legend: { position: "bottom" },
};

export const BubbleChart: Story = {
  args: {
    data: [
      ["Year", "Sales", "Expenses"],
      ["2015", 5000, 400],
      ["2016", 3170, 460],
      ["2017", 660, 1120],
      ["2020", 990, 2020],
      ["2021", 1830, 940],
    ],
    height: "400px",
    width: "600px",
    options,
    chartType: "BubbleChart",
  },
};

export const LineChart: Story = {
  args: {
    chartType: "LineChart",
    data: [
      ["Year", "Sales", "Expenses"],
      ["2015", 1000, 400],
      ["2016", 1170, 460],
      ["2017", 660, 1120],
      ["2018", 1030, 540],
      ["2019", 670, 589],
      ["2020", 990, 2020],
      ["2021", 1830, 940],
    ],
    height: "100%",
    options,
    width: "600px",
  },
};

export const Bar: Story = {
  args: {
    data: [
      ["Year", "Sales", "Expenses"],
      ["2015", 1000, 400],
      ["2016", 1170, 460],
      ["2017", 660, 1120],
      ["2018", 1030, 540],
      ["2019", 670, 589],
      ["2020", 990, 2020],
      ["2021", 1830, 940],
    ],
    height: "400px",
    width: "100%",
    options,
    chartType: "Bar",
  },
};

export const PieChart: Story = {
  args: {
    data: [
      ["Year", "Sales"],
      ["2015", 1000],
      ["2016", 1170],
      ["2017", 660],
    ],
    height: "400px",
    width: "100%",
    options,
    chartType: "PieChart",
  },
};