import React from 'react';

import { Chart } from '../components/Chart';

export default {
    title: 'Design System/Chart',
    component: Chart
};

const Template = (args) => <div style={{ paddingTop: '1em' }}><Chart {...args} /></div>;

export const Line = Template.bind({});
Line.args = {
    options: {
        // high: 10,
        // low: -10,
        // chartPadding: 1,
        height: 300,
        axisX: {
            labelInterpolationFnc: function(value, index) {
                return index % 2 === 0 ? value : null;
            },
            showGrid: true,
            // showLabel: false
        },
        axisY: {
            labelInterpolationFnc: function(value, index) {
                return index % 2 === 0 ? value : null;
            },
            showGrid: true,
            // showLabel: false
        },
        showArea: true,
        showLine: true,
        showPoint: true,
        fullWidth: false,
        fullHeight: false
    },
    data: {
        labels: ['Mo', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mo', 'Tue', 'Wed'],
        series: [
            // {   
            //     className: 'baseline',
            //     name: 'baseline',
            //     data: [0, -4, 7, 20, -5, -1, 2, -8, 9, 13]
            // },
            {
                className: 'uptrend',
                name: 'return',
                data: [2, 6, 2, 15, 10, 5, 18, 13, 22, 35]
            }
        ]
    },
    type: 'Line'
};

export const Bar = Template.bind({});
Bar.args = {
    options: {
        // high: 10,
        // low: -10,
        height: 300,
        axisX: {
            labelInterpolationFnc: function(value, index) {
                return index % 2 === 0 ? value : null;
            }
        }
    },
    data: {
        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
        series: [
          [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
        ]
    },
    type: 'Bar'
};

export const Pie = Template.bind({});
Pie.args = {
    options: {
        height: 400
        // donut: false
    },
    data: {
        series: [
            {
                value: 20,
                name: "Series 1"
            },
            {
                value: 40,
                name: "Series 2"
            },
            {
                value: 60,
                name: "Series 3"
            },
            {
                value: 60,
                name: "Series 3"
            }
        ]
    },
    type: 'Pie'
};

export const Donut = Template.bind({});
Donut.args = {
    options: {
        height: 400,
        donut: true
    },
    data: {
        series: [
            {
                value: 20,
                name: "Series 1"
            },
            {
                value: 40,
                name: "Series 2"
            },
            {
                value: 60,
                name: "Series 3"
            },
            {
                value: 60,
                name: "Series 3"
            }
        ]
    },
    type: 'Pie'
};