@mozaic-ds/chart/src/components/bubble/BubbleChart.stories.ts

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

// BubbleChart.stories.ts

import type { Meta, StoryObj } from '@storybook/vue3';
import BubbleChart from './BubbleChart.vue';

const meta = {
  title: 'Charts/Bubble',
  component: BubbleChart
} satisfies Meta<typeof BubbleChart>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
  args: {
    width: '800px',
    height: '500px',
    labels: ['Serie 1', 'Serie 2', 'Serie 3', 'Serie 4'],
    colours: [0, 4, 1, 2],
    shapes: ['rectRot', 'triangle', 'circle', 'rect'],
    colourSet: 4,
    datasets: [
      [
        {
          x: 20000,
          y: 25,
          r: 5
        },
        {
          x: 10000,
          y: 505,
          r: 15
        }
      ],
      [
        {
          x: 10000,
          y: 30,
          r: 20
        },
        {
          x: 10,
          y: 300,
          r: 200
        }
      ],
      [
        {
          x: 5000,
          y: 320,
          r: 100
        }
      ],
      [
        {
          x: 18000,
          y: 8,
          r: 30
        }
      ]
    ],
    xAxis: { title: 'Data 1', unit: '€' },
    yAxis: { title: 'Data 2', unit: 'D' },
    rAxis: { title: 'Data 3', unit: '%' }
  }
} satisfies Story;