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

// LineChart.stories.ts;

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

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

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

export const Default = {
  args: {
    width: '600px',
    height: '400px',
    labels: ['Data One', 'Data Two', 'Data Three'],
    lines: [
      {
        label: 'Data One',
        data: [-22, 34, 11],
        unit: '%'
      },
      {
        label: 'Data Two',
        data: [-3, 28, 35],
        unit: '%'
      }
    ],
    xAxisTitle: 'X Axis Title',
    yAxisTitle: 'Y Axis Title'
  }
} satisfies Story;

export const MultipleData = {
  args: {
    width: '600px',
    height: '400px',
    labels: [
      'Data One',
      'Data Two',
      'Data Three',
      'Data Four',
      'Data Five',
      'Data Six'
    ],
    lines: [
      {
        label: 'Data One',
        data: [-22, 34, 11, 1, 22, 21],
        unit: '%'
      },
      {
        label: 'Data Two',
        data: [-3, 28, 35, 10, 3, 18],
        unit: '%'
      }
    ]
  }
} satisfies Story;

export const LineChartWithSuggestedMinAndSuggestedMax = {
  args: {
    width: '600px',
    height: '400px',
    labels: ['Data One', 'Data Two', 'Data Three'],
    lines: [
      {
        label: 'Data One',
        data: [20, 34, 11],
        unit: '€'
      },
      {
        label: 'Data Two',
        data: [45, 28, 35],
        unit: '€'
      }
    ],
    xAxisTitle: 'X Axis Title',
    yAxisTitle: 'Y Axis Title',
    suggestedMin: 0,
    suggestedMax: 50
  }
} satisfies Story;