import { createBoard } from '@wixc3/react-board';
import { ResponsiveWaffle } from '@nivo/waffle';
import cover from './cover.png';

const data = [
    {
        id: 'cats',
        label: 'Cats',
        value: 15.476049874677352,
    },
    {
        id: 'dogs',
        label: 'Dogs',
        value: 16.365657505291065,
    },
    {
        id: 'rabbits',
        label: 'Rabits',
        value: 26.396035183015456,
    },
];

export default createBoard({
    name: 'Waffle',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveWaffle
                data={data}
                total={100}
                rows={18}
                columns={14}
                padding={1}
                valueFormat=".2f"
                margin={{ top: 10, right: 10, bottom: 10, left: 120 }}
                colors={{ scheme: 'nivo' }}
                borderRadius={3}
                borderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.3]],
                }}
                motionStagger={2}
                legends={[
                    {
                        anchor: 'top-left',
                        direction: 'column',
                        justify: false,
                        translateX: -100,
                        translateY: 0,
                        itemsSpacing: 4,
                        itemWidth: 100,
                        itemHeight: 20,
                        itemDirection: 'left-to-right',
                        itemOpacity: 1,
                        itemTextColor: '#777',
                        symbolSize: 20,
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000',
                                    itemBackground: '#f7fafb',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});