Storybook argTypes control objects into array

Question

storybook -v 6.5.10

const dashStyles = [
    'Solid',
    'ShortDash',
    'Dot',
    'Dash',
    'LongDash',
];

AreaChart.args = {
    series: [
        {
            color: '#d987de',
            data: [60, 20, 70, 10, -30, 0],
            name: 'Channel 1',
            dashStyle: dashStyles[0]
        },
        {
            color: '#01ecc5',
            data: [10, 15, 10, 9, 5, -10],
            name: 'Channel 2',
            dashStyle: dashStyles[0]
        }
    ],
};

I want to control series[i].dashStyle with argTypes {control: 'select'} or names separate {control: 'text'}

Answer 1

If someone wants to know , I have find the answer

const dashStyles = [
    'Solid',
    'ShortDash',
    'ShortDot',
    'ShortDashDot',
    'ShortDashDotDot',
    'Dot',
];
const categories = ['January', 'February', 'March', 'April', 'May', 'June'];


export default {
    title: 'Molecules/Charts/AreaChart',
    component: AreaChartComponent,
    argTypes: {
        label1: {
            name: 'First label',
            control: 'text'
        },
        dashStyle1: {
            name: 'First dash style',
            options: dashStyles,
            control: 'select'
        },
        label2: {
            name: 'Second label',
            control: 'text'
        },
        dashStyle2: {
            name: 'Second dash style',
            options: dashStyles,
            control: 'select'
        },
    },
    args: {
        label1: 'Channel 1',
        dashStyle1: dashStyles[0],
        label2: 'Channel 2',
        dashStyle2: dashStyles[0],
    },
    decorators: [
        (story, {args}) => {
            const {label1, dashStyle1, label2, dashStyle2,  ...restArgs} =
                args;
            const series = [
                {name: label1, dashStyle: dashStyle1, color: '#d987de', data: [60, 20, 70, 10, -30, 0]},
                {name: label2, dashStyle: dashStyle2, color: '#01ecc5', data: [10, 15, 10, 9, 5, -10]},
            ];
            return story({args: {series, ...restArgs}});
        }
    ]
};
const Template = ({...args}) => {
    return <AreaChartComponent {...args} />;
};

export const AreaChart = Template.bind({});
AreaChart.args = {
    sharedTooltip: true,
    categories
};