import { GaugeComponent } from './gauge.component';
import { withA11y } from '@storybook/addon-a11y';
import { moduleMetadata } from '@storybook/angular';
import { GaugeModule } from './gauge.module';

export default {
    title: 'Visualizations/Gauge',
    component: GaugeComponent,
    decorators: [
        withA11y,
        moduleMetadata({
            imports: [GaugeModule],
        }),
    ],
};

const Template = (args: GaugeComponent) => ({
    component: GaugeComponent,
    props: args,
    template: `<onguard-gauge [score]="score" [title]="title" [min]="min" [max]="max"></onguard-gauge>`,
});

export const red = Template.bind({});
red.args = {
    score: 2,
};

export const yellow = Template.bind({});
yellow.args = {
    score: 4,
};

export const green = Template.bind({});
green.args = {
    score: 6,
};

export const darkGreen = Template.bind({});
darkGreen.args = {
    score: 8,
};

export const customTitle = Template.bind({});
customTitle.args = {
    score: 5,
    title: 'Very long custom Title',
};

export const customRange = Template.bind({});
customRange.args = {
    score: 50,
    min: 0,
    max: 60,
};