import { withA11y } from '@storybook/addon-a11y';
import { DonutChartComponent } from './donut-chart.component';
import { moduleMetadata } from '@storybook/angular';
import { DonutChartSampleData } from '@creedinteractive/onguard-models';

export default {
    title: 'Visualizations/Britecharts/Donut Chart',
    component: DonutChartComponent,
    decorators: [
        withA11y,
        moduleMetadata({
            declarations: [DonutChartComponent],
        }),
    ],
};

const Template = (args: DonutChartComponent) => ({
    component: DonutChartComponent,
    props: args,
    template: `
    <onguard-donut-chart [data]="data" [height]="height" [useTooltip]="useTooltip" [colorSchema]="colorSchema"></onguard-donut-chart>
    `,
});

//   _____ _             _
//  / ____| |           (_)
// | (___ | |_ ___  _ __ _  ___  ___
//  \___ \| __/ _ \| '__| |/ _ \/ __|
//  ____) | || (_) | |  | |  __/\__ \
// |_____/ \__\___/|_|  |_|\___||___/

export const Primary = Template.bind({});
Primary.args = {
    data: DonutChartSampleData,
    useTooltip: true,
    height: 450,
    colorSchema: ['#00AEEF', '#FF9801', '#39B54A'],
};

export const WithoutTooltip = Template.bind({});
WithoutTooltip.args = {
    ...Primary.args,
    useTooltip: false,
};

export const AlternateColors = Template.bind({});
AlternateColors.args = {
    ...Primary.args,
    colorSchema: ['#f54242', '#FBE7C6', '#FFA384'],
};

export const Tall = Template.bind({});
Tall.args = {
    ...Primary.args,
    height: 600,
};

export const Short = Template.bind({});
Short.args = {
    ...Primary.args,
    height: 300,
};