import { BubbleChart } from "@components/BubbleChart/BubbleChart";
import type { Meta, StoryObj } from "@storybook/react";




const meta = {
  title: "Aisera/BubbleChart",
  component: BubbleChart,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {

  },
} satisfies Meta<typeof BubbleChart>;

export default meta;

type Story = StoryObj<typeof meta>;


export const Primary: Story = {
  args: {
    type: 'bubble',
    height: "500px",
    width: "600px",
    data: {
      datasets: [
        {
          label: 'Red dataset',
          data: [
            { x: -100, y: 59, r: 5 },
            { x: 60, y: 73, r: 8 },
            { x: 80, y: 3, r: 3 },
            { x: -98, y: 67, r: 10 },
            { x: 86, y: 20, r: 7 },
            { x: 10, y: 90, r: 3 },
            { x: -58, y: 20, r: 2 },
            { x: 47, y: 74, r: 6 },
            { x: 72, y: 12, r: 10 },
            { x: 18, y: 84, r: 6 },
          ],
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
        },
        {
          label: 'Blue dataset',
          data: [
            { x: -100, y: 59, r: 3 },
            { x: 17, y: 73, r: 6 },
            { x: 80, y: 34, r: 5 },
            { x: 47, y: 82, r: 10 },
            { x: 86, y: 20, r: 7 },
            { x: -98, y: 90, r: 15 },
            { x: 58, y: 59, r: 2 },
            { x: -46, y: 74, r: 18 },
            { x: 12, y: 44, r: 10 },
            { x: 60, y: 49, r: 13 },
          ],
          backgroundColor: 'rgba(53, 162, 235, 0.5)',
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    }

  },
};