import React from 'react'
import AreaChart from './AreaChart'
import { Meta } from '@storybook/react'
import { IDefaultChartProps } from '../types'
export default {
title: 'Charts/Area Chart',
component: AreaChart,
argTypes: {
title: {
table: {
disable: true
}
},
yComplement: {
table: {
disable: true
}
},
lineMakeName: {
table: {
disable: true
}
}
}
} as Meta<typeof AreaChart>
export const areaChartWithTime = (
args: React.JSX.IntrinsicAttributes & IDefaultChartProps
) => (
<AreaChart
{...args}
color='#74007c'
xType='time'
yType='time'
title='Area Chart With Time'
tooltip={{ label: 'Data', result: 'MTBF' }}
data={[
{ label: '2019-02-01', result: 4.5 },
{ label: '2019-03-01', result: 3 },
{ label: '2019-04-01', result: 2 },
{ label: '2019-05-01', result: 4 },
{ label: '2019-06-01', result: 5 },
{ label: '2019-07-01', result: 3 },
{ label: '2019-08-01', result: 4 },
{ label: '2019-09-01', result: 2 },
{ label: '2019-10-01', result: 6 }
]}
/>
)
export const areaChartWithDateAndTime = (
args: React.JSX.IntrinsicAttributes & IDefaultChartProps
) => (
<AreaChart
{...args}
xType='time'
dateFormat='MMM/dd HH:mm'
title='Area Chart With Date And Time'
toolboxTooltip={{ saveAsImage: 'saving' }}
tooltip={{ label: 'Data', result: 'O.S. em aberto' }}
color='#E65100'
data={[
{ label: '2019-09-01 08:40', result: 1 },
{ label: '2019-09-02 12:32', result: 4 },
{ label: '2019-09-03 14:20', result: 3 },
{ label: '2019-09-04 19:25', result: 2 }
]}
/>
)
#How to set controls individually for each story
4 messages · Page 1 of 1 (latest)
I was able to disable the unwanted controls directly on the default export, but how can I manage the controls for each story?
By using the argTypes[key].control?.type
https://storybook.js.org/docs/react/essentials/controls#annotation
Most of all settings in storybook cascade. Meaning story overwrites meta, meta overrides preview