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

const data = [
    [71, 456, 895, 97, 290],
    [1873, 419, 83, 357, 896],
    [58, 298, 444, 200, 97],
    [317, 133, 330, 366, 97],
    [34, 59, 268, 104, 102],
];

export default createBoard({
    name: 'Chord',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveChord
                data={data}
                keys={['John', 'Raoul', 'Jane', 'Marcel', 'Ibrahim']}
                margin={{ top: 60, right: 60, bottom: 90, left: 60 }}
                valueFormat=".2f"
                padAngle={0.02}
                innerRadiusRatio={0.96}
                innerRadiusOffset={0.02}
                inactiveArcOpacity={0.25}
                arcBorderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.6]],
                }}
                activeRibbonOpacity={0.75}
                inactiveRibbonOpacity={0.25}
                ribbonBorderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.6]],
                }}
                labelRotation={-90}
                labelTextColor={{
                    from: 'color',
                    modifiers: [['darker', 1]],
                }}
                colors={{ scheme: 'nivo' }}
                motionConfig="stiff"
                legends={[
                    {
                        anchor: 'bottom',
                        direction: 'row',
                        justify: false,
                        translateX: 0,
                        translateY: 70,
                        itemWidth: 80,
                        itemHeight: 14,
                        itemsSpacing: 0,
                        itemTextColor: '#999',
                        itemDirection: 'left-to-right',
                        symbolSize: 12,
                        symbolShape: 'circle',
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
    isSnippet: true,
});