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

const data = [
    {
        taste: 'fruity',
        chardonay: 27,
        carmenere: 46,
        syrah: 71,
    },
    {
        taste: 'bitter',
        chardonay: 91,
        carmenere: 103,
        syrah: 85,
    },
    {
        taste: 'heavy',
        chardonay: 113,
        carmenere: 116,
        syrah: 96,
    },
    {
        taste: 'strong',
        chardonay: 100,
        carmenere: 43,
        syrah: 29,
    },
    {
        taste: 'sunny',
        chardonay: 29,
        carmenere: 116,
        syrah: 120,
    },
];

export default createBoard({
    name: 'Radar',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveRadar
                data={data}
                keys={['chardonay', 'carmenere', 'syrah']}
                indexBy="taste"
                valueFormat=">-.2f"
                margin={{ top: 70, right: 80, bottom: 40, left: 80 }}
                borderColor={{ from: 'color' }}
                gridLabelOffset={36}
                dotSize={10}
                dotColor={{ theme: 'background' }}
                dotBorderWidth={2}
                colors={{ scheme: 'nivo' }}
                blendMode="multiply"
                motionConfig="wobbly"
                legends={[
                    {
                        anchor: 'top-left',
                        direction: 'column',
                        translateX: -50,
                        translateY: -40,
                        itemWidth: 80,
                        itemHeight: 20,
                        itemTextColor: '#999',
                        symbolSize: 12,
                        symbolShape: 'circle',
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});