60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
|
|
import { LineChart, LineChartProps } from '../src/components/LineChart';
|
|
|
|
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
|
|
const meta: Meta = {
|
|
title: 'Components/LineChart',
|
|
component: LineChart,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
data: {
|
|
description:
|
|
'Data to be displayed.\n\n E.g.: [["1990", 1], ["1991", 2]] \n\nOR\n\n "https://url.to/data.csv"',
|
|
},
|
|
title: {
|
|
description: 'Title to display on the chart. Optional.',
|
|
},
|
|
xAxis: {
|
|
description:
|
|
'Name of the X axis on the data. Required when the "data" parameter is an URL.',
|
|
},
|
|
yAxis: {
|
|
description:
|
|
'Name of the Y axis on the data. Required when the "data" parameter is an URL.',
|
|
},
|
|
fullWidth: {
|
|
description:
|
|
'Whether the component should be rendered as full bleed or not',
|
|
},
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<LineChartProps>;
|
|
|
|
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
|
|
export const FromDataPoints: Story = {
|
|
name: 'Line chart from array of data points',
|
|
args: {
|
|
data: [
|
|
['1850', -0.41765878],
|
|
['1851', -0.2333498],
|
|
['1852', -0.22939907],
|
|
['1853', -0.27035445],
|
|
['1854', -0.29163003],
|
|
],
|
|
},
|
|
};
|
|
|
|
export const FromURL: Story = {
|
|
name: 'Line chart from URL',
|
|
args: {
|
|
title: 'Oil Price x Year',
|
|
data: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
|
|
xAxis: 'Date',
|
|
yAxis: 'Price',
|
|
},
|
|
};
|