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

// MixedBarLineChart.stories.ts

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

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

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

export const Default = {
  args: {
    width: '500px',
    height: '400px',
    tooltipFirstLineLabel: 'content',
    tooltipSecondLineLabel: 'content2',
    disableAccessibility: false,
    newPatternsOrder: [0, 1, 0, 1, 2, 3],
    colourSet: 0,
    barUnit: '',
    lineUnit: '€',
    xAxisTitle: 'X Axis',
    yLeftAxisTitle: 'Y1 Axis',
    yRightAxisTitle: 'Y2 Axis',
    barDatasets: [
      {
        type: 'bar',
        label: 'Bar Label 1',
        data: [10, 20, 30, 40],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }
    ],
    lineDatasets: [
      {
        type: 'line',
        label: 'Line Label 1',
        data: [5, 15, 20, 25],
        borderColor: 'rgb(54, 162, 235)'
      }
    ],
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
  }
} satisfies Story;

export const Multiple_Data = {
  args: {
    width: '500px',
    height: '400px',
    tooltipFirstLineLabel: 'content',
    tooltipSecondLineLabel: 'content2',
    disableAccessibility: false,
    newPatternsOrder: [0, 1, 0, 1, 2, 3],
    colourSet: 0,
    lineUnit: '€',
    barDatasets: [
      {
        type: 'bar',
        label: 'Bar Label 1',
        data: [10, 20, 30, 40],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      },
      {
        type: 'bar',
        label: 'Bar Label 2',
        data: [20, 20, 30, 40],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }
    ],
    lineDatasets: [
      {
        type: 'line',
        label: 'Line Label 1',
        data: [50, 150, 20, 250],
        borderColor: 'rgb(54, 162, 235)'
      },
      {
        type: 'line',
        label: 'Line Label 2',
        data: [1, 8, 6, 24],
        borderColor: 'rgb(54, 162, 235)'
      }
    ],
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
  }
} satisfies Story;