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

const data = [
    {
        id: 'group A',
        data: [
            {
                x: 76,
                y: 6,
            },
            {
                x: 94,
                y: 91,
            },
            {
                x: 41,
                y: 54,
            },
            {
                x: 72,
                y: 66,
            },
            {
                x: 57,
                y: 29,
            },
            {
                x: 88,
                y: 56,
            },
            {
                x: 66,
                y: 117,
            },
            {
                x: 34,
                y: 100,
            },
            {
                x: 42,
                y: 45,
            },
            {
                x: 70,
                y: 75,
            },
            {
                x: 35,
                y: 12,
            },
            {
                x: 0,
                y: 112,
            },
            {
                x: 71,
                y: 13,
            },
            {
                x: 96,
                y: 45,
            },
            {
                x: 87,
                y: 57,
            },
            {
                x: 94,
                y: 9,
            },
            {
                x: 84,
                y: 47,
            },
            {
                x: 25,
                y: 0,
            },
            {
                x: 72,
                y: 96,
            },
            {
                x: 17,
                y: 59,
            },
            {
                x: 10,
                y: 6,
            },
            {
                x: 61,
                y: 101,
            },
            {
                x: 49,
                y: 105,
            },
            {
                x: 6,
                y: 18,
            },
            {
                x: 88,
                y: 14,
            },
            {
                x: 96,
                y: 106,
            },
            {
                x: 75,
                y: 50,
            },
            {
                x: 52,
                y: 99,
            },
            {
                x: 91,
                y: 91,
            },
            {
                x: 10,
                y: 7,
            },
            {
                x: 59,
                y: 56,
            },
            {
                x: 55,
                y: 85,
            },
            {
                x: 80,
                y: 55,
            },
            {
                x: 62,
                y: 120,
            },
            {
                x: 92,
                y: 75,
            },
            {
                x: 0,
                y: 54,
            },
            {
                x: 65,
                y: 84,
            },
            {
                x: 92,
                y: 74,
            },
            {
                x: 59,
                y: 78,
            },
            {
                x: 81,
                y: 43,
            },
            {
                x: 15,
                y: 94,
            },
            {
                x: 52,
                y: 8,
            },
            {
                x: 31,
                y: 111,
            },
            {
                x: 3,
                y: 46,
            },
            {
                x: 52,
                y: 105,
            },
            {
                x: 62,
                y: 9,
            },
            {
                x: 68,
                y: 10,
            },
            {
                x: 80,
                y: 74,
            },
            {
                x: 79,
                y: 81,
            },
            {
                x: 23,
                y: 69,
            },
        ],
    },
    {
        id: 'group B',
        data: [
            {
                x: 58,
                y: 81,
            },
            {
                x: 51,
                y: 114,
            },
            {
                x: 1,
                y: 113,
            },
            {
                x: 28,
                y: 119,
            },
            {
                x: 82,
                y: 18,
            },
            {
                x: 18,
                y: 98,
            },
            {
                x: 85,
                y: 0,
            },
            {
                x: 6,
                y: 112,
            },
            {
                x: 45,
                y: 67,
            },
            {
                x: 60,
                y: 15,
            },
            {
                x: 23,
                y: 47,
            },
            {
                x: 9,
                y: 31,
            },
            {
                x: 10,
                y: 3,
            },
            {
                x: 75,
                y: 58,
            },
            {
                x: 21,
                y: 42,
            },
            {
                x: 11,
                y: 72,
            },
            {
                x: 28,
                y: 118,
            },
            {
                x: 32,
                y: 74,
            },
            {
                x: 40,
                y: 71,
            },
            {
                x: 67,
                y: 84,
            },
            {
                x: 44,
                y: 72,
            },
            {
                x: 60,
                y: 88,
            },
            {
                x: 98,
                y: 106,
            },
            {
                x: 55,
                y: 89,
            },
            {
                x: 55,
                y: 37,
            },
            {
                x: 13,
                y: 109,
            },
            {
                x: 65,
                y: 85,
            },
            {
                x: 45,
                y: 7,
            },
            {
                x: 40,
                y: 86,
            },
            {
                x: 12,
                y: 96,
            },
            {
                x: 20,
                y: 103,
            },
            {
                x: 84,
                y: 1,
            },
            {
                x: 77,
                y: 109,
            },
            {
                x: 17,
                y: 63,
            },
            {
                x: 67,
                y: 24,
            },
            {
                x: 70,
                y: 33,
            },
            {
                x: 41,
                y: 61,
            },
            {
                x: 17,
                y: 95,
            },
            {
                x: 84,
                y: 11,
            },
            {
                x: 35,
                y: 96,
            },
            {
                x: 77,
                y: 53,
            },
            {
                x: 18,
                y: 119,
            },
            {
                x: 9,
                y: 80,
            },
            {
                x: 93,
                y: 83,
            },
            {
                x: 73,
                y: 70,
            },
            {
                x: 89,
                y: 8,
            },
            {
                x: 26,
                y: 108,
            },
            {
                x: 39,
                y: 67,
            },
            {
                x: 32,
                y: 36,
            },
            {
                x: 83,
                y: 112,
            },
        ],
    },
    {
        id: 'group C',
        data: [
            {
                x: 62,
                y: 48,
            },
            {
                x: 4,
                y: 24,
            },
            {
                x: 90,
                y: 40,
            },
            {
                x: 61,
                y: 115,
            },
            {
                x: 100,
                y: 104,
            },
            {
                x: 70,
                y: 92,
            },
            {
                x: 49,
                y: 53,
            },
            {
                x: 83,
                y: 102,
            },
            {
                x: 73,
                y: 30,
            },
            {
                x: 89,
                y: 58,
            },
            {
                x: 79,
                y: 16,
            },
            {
                x: 90,
                y: 46,
            },
            {
                x: 48,
                y: 48,
            },
            {
                x: 56,
                y: 64,
            },
            {
                x: 34,
                y: 55,
            },
            {
                x: 33,
                y: 100,
            },
            {
                x: 64,
                y: 7,
            },
            {
                x: 51,
                y: 10,
            },
            {
                x: 65,
                y: 105,
            },
            {
                x: 98,
                y: 68,
            },
            {
                x: 58,
                y: 21,
            },
            {
                x: 53,
                y: 59,
            },
            {
                x: 15,
                y: 52,
            },
            {
                x: 22,
                y: 2,
            },
            {
                x: 91,
                y: 47,
            },
            {
                x: 24,
                y: 26,
            },
            {
                x: 90,
                y: 52,
            },
            {
                x: 22,
                y: 108,
            },
            {
                x: 95,
                y: 95,
            },
            {
                x: 31,
                y: 110,
            },
            {
                x: 7,
                y: 112,
            },
            {
                x: 79,
                y: 32,
            },
            {
                x: 24,
                y: 36,
            },
            {
                x: 56,
                y: 7,
            },
            {
                x: 73,
                y: 64,
            },
            {
                x: 32,
                y: 114,
            },
            {
                x: 1,
                y: 80,
            },
            {
                x: 46,
                y: 22,
            },
            {
                x: 78,
                y: 117,
            },
            {
                x: 42,
                y: 32,
            },
            {
                x: 59,
                y: 105,
            },
            {
                x: 24,
                y: 28,
            },
            {
                x: 65,
                y: 77,
            },
            {
                x: 18,
                y: 111,
            },
            {
                x: 25,
                y: 87,
            },
            {
                x: 9,
                y: 20,
            },
            {
                x: 74,
                y: 18,
            },
            {
                x: 39,
                y: 116,
            },
            {
                x: 67,
                y: 79,
            },
            {
                x: 49,
                y: 106,
            },
        ],
    },
    {
        id: 'group D',
        data: [
            {
                x: 23,
                y: 104,
            },
            {
                x: 60,
                y: 80,
            },
            {
                x: 89,
                y: 41,
            },
            {
                x: 93,
                y: 37,
            },
            {
                x: 43,
                y: 72,
            },
            {
                x: 12,
                y: 56,
            },
            {
                x: 66,
                y: 117,
            },
            {
                x: 96,
                y: 62,
            },
            {
                x: 62,
                y: 119,
            },
            {
                x: 74,
                y: 56,
            },
            {
                x: 40,
                y: 23,
            },
            {
                x: 15,
                y: 6,
            },
            {
                x: 75,
                y: 0,
            },
            {
                x: 86,
                y: 83,
            },
            {
                x: 86,
                y: 109,
            },
            {
                x: 89,
                y: 5,
            },
            {
                x: 80,
                y: 17,
            },
            {
                x: 26,
                y: 12,
            },
            {
                x: 5,
                y: 94,
            },
            {
                x: 86,
                y: 16,
            },
            {
                x: 55,
                y: 15,
            },
            {
                x: 28,
                y: 34,
            },
            {
                x: 36,
                y: 81,
            },
            {
                x: 22,
                y: 73,
            },
            {
                x: 46,
                y: 20,
            },
            {
                x: 37,
                y: 3,
            },
            {
                x: 58,
                y: 76,
            },
            {
                x: 31,
                y: 19,
            },
            {
                x: 95,
                y: 104,
            },
            {
                x: 95,
                y: 85,
            },
            {
                x: 49,
                y: 83,
            },
            {
                x: 14,
                y: 100,
            },
            {
                x: 92,
                y: 34,
            },
            {
                x: 89,
                y: 72,
            },
            {
                x: 88,
                y: 15,
            },
            {
                x: 65,
                y: 48,
            },
            {
                x: 89,
                y: 105,
            },
            {
                x: 20,
                y: 7,
            },
            {
                x: 47,
                y: 18,
            },
            {
                x: 70,
                y: 111,
            },
            {
                x: 75,
                y: 27,
            },
            {
                x: 56,
                y: 83,
            },
            {
                x: 45,
                y: 82,
            },
            {
                x: 71,
                y: 23,
            },
            {
                x: 46,
                y: 23,
            },
            {
                x: 8,
                y: 50,
            },
            {
                x: 42,
                y: 5,
            },
            {
                x: 13,
                y: 25,
            },
            {
                x: 71,
                y: 28,
            },
            {
                x: 60,
                y: 93,
            },
        ],
    },
    {
        id: 'group E',
        data: [
            {
                x: 58,
                y: 68,
            },
            {
                x: 59,
                y: 9,
            },
            {
                x: 25,
                y: 9,
            },
            {
                x: 79,
                y: 64,
            },
            {
                x: 52,
                y: 105,
            },
            {
                x: 49,
                y: 43,
            },
            {
                x: 51,
                y: 63,
            },
            {
                x: 66,
                y: 102,
            },
            {
                x: 33,
                y: 94,
            },
            {
                x: 98,
                y: 116,
            },
            {
                x: 82,
                y: 77,
            },
            {
                x: 39,
                y: 40,
            },
            {
                x: 80,
                y: 71,
            },
            {
                x: 70,
                y: 0,
            },
            {
                x: 98,
                y: 36,
            },
            {
                x: 26,
                y: 79,
            },
            {
                x: 76,
                y: 116,
            },
            {
                x: 98,
                y: 85,
            },
            {
                x: 81,
                y: 58,
            },
            {
                x: 69,
                y: 48,
            },
            {
                x: 8,
                y: 4,
            },
            {
                x: 10,
                y: 72,
            },
            {
                x: 47,
                y: 88,
            },
            {
                x: 83,
                y: 33,
            },
            {
                x: 44,
                y: 115,
            },
            {
                x: 35,
                y: 18,
            },
            {
                x: 62,
                y: 101,
            },
            {
                x: 25,
                y: 97,
            },
            {
                x: 92,
                y: 69,
            },
            {
                x: 84,
                y: 37,
            },
            {
                x: 55,
                y: 106,
            },
            {
                x: 95,
                y: 39,
            },
            {
                x: 48,
                y: 81,
            },
            {
                x: 98,
                y: 106,
            },
            {
                x: 23,
                y: 77,
            },
            {
                x: 35,
                y: 9,
            },
            {
                x: 5,
                y: 22,
            },
            {
                x: 95,
                y: 33,
            },
            {
                x: 97,
                y: 88,
            },
            {
                x: 20,
                y: 84,
            },
            {
                x: 0,
                y: 0,
            },
            {
                x: 34,
                y: 115,
            },
            {
                x: 30,
                y: 86,
            },
            {
                x: 30,
                y: 91,
            },
            {
                x: 93,
                y: 74,
            },
            {
                x: 19,
                y: 22,
            },
            {
                x: 49,
                y: 74,
            },
            {
                x: 84,
                y: 57,
            },
            {
                x: 26,
                y: 36,
            },
            {
                x: 40,
                y: 82,
            },
        ],
    },
];

export default createBoard({
    name: 'Scatterplot',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveScatterPlot
                data={data}
                margin={{ top: 60, right: 140, bottom: 70, left: 90 }}
                xScale={{ type: 'linear', min: 0, max: 'auto' }}
                xFormat=">-.2f"
                yScale={{ type: 'linear', min: 0, max: 'auto' }}
                yFormat=">-.2f"
                blendMode="multiply"
                axisTop={null}
                axisRight={null}
                axisBottom={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'weight',
                    legendPosition: 'middle',
                    legendOffset: 46,
                }}
                axisLeft={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'size',
                    legendPosition: 'middle',
                    legendOffset: -60,
                }}
                legends={[
                    {
                        anchor: 'bottom-right',
                        direction: 'column',
                        justify: false,
                        translateX: 130,
                        translateY: 0,
                        itemWidth: 100,
                        itemHeight: 12,
                        itemsSpacing: 5,
                        itemDirection: 'left-to-right',
                        symbolSize: 12,
                        symbolShape: 'circle',
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemOpacity: 1,
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});