@mozaic-ds/chart/src/components/doughnut/DoughnutChart.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.

// DoughnutChart.stories.ts;

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

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

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

export const Default = {
  args: {
    height: '400px',
    width: '400px',
    labels: ['Data One', 'Data Two'],
    enableCenteredLabel: true,
    disableAccessibility: false,
    data: [
      {
        value: 2771824.19,
        unit: '€',
        rate: 30.186240355262925
      },
      {
        value: 1715453.65,
        unit: '€',
        rate: 18.68195550931139
      }
    ],
    maxValues: 2
  }
} satisfies Story;

export const MultipleData = {
  args: {
    height: '400px',
    width: '400px',
    labels: [
      'Data One',
      'Data Two',
      'Data Three',
      'Data Four',
      'Data Five',
      'Data Six'
    ],
    maxValues: 3,
    disableAccessibility: false,
    data: [
      {
        value: 2771824.19,
        unit: '€',
        rate: 30.186240355262925
      },
      {
        value: 1715453.65,
        unit: '€',
        rate: 18.68195550931139
      },
      {
        value: 1651575.28,
        unit: '€',
        rate: 17.986295287685856
      },
      {
        value: 1168958.3,
        unit: '€',
        rate: 12.730409214402426
      },
      {
        value: 949837.87,
        unit: '€',
        rate: 10.34410275579238
      },
      {
        value: 924760.17,
        unit: '€',
        rate: 10.070996877545035
      }
    ]
  }
} satisfies Story;