import { createBoard } from '@wixc3/react-board';
import { ResponsiveRadialBar } from '@nivo/radial-bar';
import cover from './cover.png';

const data = [
    {
        id: 'Supermarket',
        data: [
            {
                x: 'Vegetables',
                y: 71,
            },
            {
                x: 'Fruits',
                y: 51,
            },
            {
                x: 'Meat',
                y: 217,
            },
            {
                x: 'Fish',
                y: 111,
            },
        ],
    },
    {
        id: 'Combini',
        data: [
            {
                x: 'Vegetables',
                y: 29,
            },
            {
                x: 'Fruits',
                y: 25,
            },
            {
                x: 'Meat',
                y: 247,
            },
            {
                x: 'Fish',
                y: 61,
            },
        ],
    },
    {
        id: 'Online',
        data: [
            {
                x: 'Vegetables',
                y: 25,
            },
            {
                x: 'Fruits',
                y: 187,
            },
            {
                x: 'Meat',
                y: 267,
            },
            {
                x: 'Fish',
                y: 198,
            },
        ],
    },
];

export default createBoard({
    name: 'RadialBar',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveRadialBar
                data={data}
                valueFormat=">-.2f"
                padding={0.4}
                cornerRadius={2}
                margin={{ top: 40, right: 120, bottom: 40, left: 40 }}
                radialAxisStart={{ tickSize: 5, tickPadding: 5, tickRotation: 0 }}
                circularAxisOuter={{ tickSize: 5, tickPadding: 12, tickRotation: 0 }}
                legends={[
                    {
                        anchor: 'right',
                        direction: 'column',
                        justify: false,
                        translateX: 80,
                        translateY: 0,
                        itemsSpacing: 6,
                        itemDirection: 'left-to-right',
                        itemWidth: 100,
                        itemHeight: 18,
                        itemTextColor: '#999',
                        symbolSize: 18,
                        symbolShape: 'square',
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});