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

const data = [
    {
        id: '0.0',
        group: 'group A',
        price: 153,
        volume: 19,
    },
    {
        id: '0.1',
        group: 'group A',
        price: 84,
        volume: 17,
    },
    {
        id: '0.2',
        group: 'group A',
        price: 309,
        volume: 5,
    },
    {
        id: '0.3',
        group: 'group A',
        price: 357,
        volume: 5,
    },
    {
        id: '0.4',
        group: 'group A',
        price: 452,
        volume: 13,
    },
    {
        id: '0.5',
        group: 'group A',
        price: 221,
        volume: 5,
    },
    {
        id: '0.6',
        group: 'group A',
        price: 237,
        volume: 5,
    },
    {
        id: '0.7',
        group: 'group A',
        price: 184,
        volume: 6,
    },
    {
        id: '0.8',
        group: 'group A',
        price: 154,
        volume: 14,
    },
    {
        id: '0.9',
        group: 'group A',
        price: 388,
        volume: 7,
    },
    {
        id: '0.10',
        group: 'group A',
        price: 115,
        volume: 17,
    },
    {
        id: '0.11',
        group: 'group A',
        price: 459,
        volume: 12,
    },
    {
        id: '0.12',
        group: 'group A',
        price: 32,
        volume: 8,
    },
    {
        id: '0.13',
        group: 'group A',
        price: 384,
        volume: 10,
    },
    {
        id: '0.14',
        group: 'group A',
        price: 154,
        volume: 5,
    },
    {
        id: '0.15',
        group: 'group A',
        price: 92,
        volume: 7,
    },
    {
        id: '0.16',
        group: 'group A',
        price: 296,
        volume: 9,
    },
    {
        id: '0.17',
        group: 'group A',
        price: 166,
        volume: 4,
    },
    {
        id: '0.18',
        group: 'group A',
        price: 265,
        volume: 6,
    },
    {
        id: '0.19',
        group: 'group A',
        price: 97,
        volume: 10,
    },
    {
        id: '0.20',
        group: 'group A',
        price: 72,
        volume: 14,
    },
    {
        id: '0.21',
        group: 'group A',
        price: 293,
        volume: 11,
    },
    {
        id: '0.22',
        group: 'group A',
        price: 250,
        volume: 9,
    },
    {
        id: '0.23',
        group: 'group A',
        price: 442,
        volume: 19,
    },
    {
        id: '0.24',
        group: 'group A',
        price: 375,
        volume: 6,
    },
    {
        id: '0.25',
        group: 'group A',
        price: 234,
        volume: 13,
    },
    {
        id: '0.26',
        group: 'group A',
        price: 339,
        volume: 4,
    },
    {
        id: '0.27',
        group: 'group A',
        price: 432,
        volume: 12,
    },
    {
        id: '0.28',
        group: 'group A',
        price: 179,
        volume: 7,
    },
    {
        id: '0.29',
        group: 'group A',
        price: 49,
        volume: 4,
    },
    {
        id: '0.30',
        group: 'group A',
        price: 495,
        volume: 18,
    },
    {
        id: '0.31',
        group: 'group A',
        price: 399,
        volume: 12,
    },
    {
        id: '0.32',
        group: 'group A',
        price: 101,
        volume: 18,
    },
    {
        id: '0.33',
        group: 'group A',
        price: 244,
        volume: 4,
    },
    {
        id: '0.34',
        group: 'group A',
        price: 8,
        volume: 8,
    },
    {
        id: '0.35',
        group: 'group A',
        price: 340,
        volume: 17,
    },
    {
        id: '0.36',
        group: 'group A',
        price: 414,
        volume: 18,
    },
    {
        id: '0.37',
        group: 'group A',
        price: 303,
        volume: 12,
    },
    {
        id: '0.38',
        group: 'group A',
        price: 281,
        volume: 7,
    },
    {
        id: '0.39',
        group: 'group A',
        price: 30,
        volume: 19,
    },
    {
        id: '0.40',
        group: 'group A',
        price: 114,
        volume: 20,
    },
    {
        id: '0.41',
        group: 'group A',
        price: 440,
        volume: 12,
    },
    {
        id: '0.42',
        group: 'group A',
        price: 293,
        volume: 20,
    },
    {
        id: '0.43',
        group: 'group A',
        price: 387,
        volume: 5,
    },
    {
        id: '0.44',
        group: 'group A',
        price: 205,
        volume: 19,
    },
    {
        id: '0.45',
        group: 'group A',
        price: 369,
        volume: 4,
    },
    {
        id: '0.46',
        group: 'group A',
        price: 93,
        volume: 16,
    },
    {
        id: '0.47',
        group: 'group A',
        price: 112,
        volume: 11,
    },
    {
        id: '0.48',
        group: 'group A',
        price: 261,
        volume: 14,
    },
    {
        id: '0.49',
        group: 'group A',
        price: 274,
        volume: 4,
    },
    {
        id: '0.50',
        group: 'group A',
        price: 84,
        volume: 10,
    },
    {
        id: '0.51',
        group: 'group A',
        price: 432,
        volume: 4,
    },
    {
        id: '0.52',
        group: 'group A',
        price: 317,
        volume: 9,
    },
    {
        id: '0.53',
        group: 'group A',
        price: 287,
        volume: 8,
    },
    {
        id: '0.54',
        group: 'group A',
        price: 340,
        volume: 10,
    },
    {
        id: '0.55',
        group: 'group A',
        price: 3,
        volume: 7,
    },
    {
        id: '0.56',
        group: 'group A',
        price: 451,
        volume: 7,
    },
    {
        id: '0.57',
        group: 'group A',
        price: 115,
        volume: 20,
    },
    {
        id: '0.58',
        group: 'group A',
        price: 59,
        volume: 18,
    },
    {
        id: '0.59',
        group: 'group A',
        price: 400,
        volume: 8,
    },
    {
        id: '0.60',
        group: 'group A',
        price: 262,
        volume: 19,
    },
    {
        id: '0.61',
        group: 'group A',
        price: 481,
        volume: 6,
    },
    {
        id: '0.62',
        group: 'group A',
        price: 182,
        volume: 4,
    },
    {
        id: '0.63',
        group: 'group A',
        price: 79,
        volume: 19,
    },
    {
        id: '0.64',
        group: 'group A',
        price: 318,
        volume: 7,
    },
    {
        id: '0.65',
        group: 'group A',
        price: 364,
        volume: 5,
    },
    {
        id: '0.66',
        group: 'group A',
        price: 174,
        volume: 11,
    },
    {
        id: '1.0',
        group: 'group B',
        price: 448,
        volume: 7,
    },
    {
        id: '1.1',
        group: 'group B',
        price: 28,
        volume: 13,
    },
    {
        id: '1.2',
        group: 'group B',
        price: 129,
        volume: 12,
    },
    {
        id: '1.3',
        group: 'group B',
        price: 246,
        volume: 20,
    },
    {
        id: '1.4',
        group: 'group B',
        price: 137,
        volume: 4,
    },
    {
        id: '1.5',
        group: 'group B',
        price: 170,
        volume: 7,
    },
    {
        id: '1.6',
        group: 'group B',
        price: 19,
        volume: 14,
    },
    {
        id: '1.7',
        group: 'group B',
        price: 432,
        volume: 20,
    },
    {
        id: '1.8',
        group: 'group B',
        price: 304,
        volume: 10,
    },
    {
        id: '1.9',
        group: 'group B',
        price: 155,
        volume: 9,
    },
    {
        id: '1.10',
        group: 'group B',
        price: 269,
        volume: 9,
    },
    {
        id: '1.11',
        group: 'group B',
        price: 477,
        volume: 18,
    },
    {
        id: '1.12',
        group: 'group B',
        price: 367,
        volume: 11,
    },
    {
        id: '1.13',
        group: 'group B',
        price: 66,
        volume: 11,
    },
    {
        id: '1.14',
        group: 'group B',
        price: 184,
        volume: 8,
    },
    {
        id: '1.15',
        group: 'group B',
        price: 17,
        volume: 7,
    },
    {
        id: '1.16',
        group: 'group B',
        price: 237,
        volume: 8,
    },
    {
        id: '1.17',
        group: 'group B',
        price: 397,
        volume: 12,
    },
    {
        id: '1.18',
        group: 'group B',
        price: 122,
        volume: 15,
    },
    {
        id: '1.19',
        group: 'group B',
        price: 435,
        volume: 20,
    },
    {
        id: '1.20',
        group: 'group B',
        price: 171,
        volume: 9,
    },
    {
        id: '1.21',
        group: 'group B',
        price: 356,
        volume: 13,
    },
    {
        id: '1.22',
        group: 'group B',
        price: 16,
        volume: 10,
    },
    {
        id: '1.23',
        group: 'group B',
        price: 94,
        volume: 16,
    },
    {
        id: '1.24',
        group: 'group B',
        price: 495,
        volume: 6,
    },
    {
        id: '1.25',
        group: 'group B',
        price: 286,
        volume: 6,
    },
    {
        id: '1.26',
        group: 'group B',
        price: 122,
        volume: 8,
    },
    {
        id: '1.27',
        group: 'group B',
        price: 153,
        volume: 4,
    },
    {
        id: '1.28',
        group: 'group B',
        price: 94,
        volume: 10,
    },
    {
        id: '1.29',
        group: 'group B',
        price: 178,
        volume: 10,
    },
    {
        id: '1.30',
        group: 'group B',
        price: 426,
        volume: 7,
    },
    {
        id: '1.31',
        group: 'group B',
        price: 236,
        volume: 9,
    },
    {
        id: '1.32',
        group: 'group B',
        price: 29,
        volume: 17,
    },
    {
        id: '1.33',
        group: 'group B',
        price: 21,
        volume: 10,
    },
    {
        id: '1.34',
        group: 'group B',
        price: 98,
        volume: 5,
    },
    {
        id: '1.35',
        group: 'group B',
        price: 265,
        volume: 14,
    },
    {
        id: '1.36',
        group: 'group B',
        price: 164,
        volume: 11,
    },
    {
        id: '1.37',
        group: 'group B',
        price: 347,
        volume: 14,
    },
    {
        id: '1.38',
        group: 'group B',
        price: 48,
        volume: 6,
    },
    {
        id: '1.39',
        group: 'group B',
        price: 151,
        volume: 14,
    },
    {
        id: '1.40',
        group: 'group B',
        price: 7,
        volume: 18,
    },
    {
        id: '1.41',
        group: 'group B',
        price: 304,
        volume: 17,
    },
    {
        id: '1.42',
        group: 'group B',
        price: 224,
        volume: 6,
    },
    {
        id: '1.43',
        group: 'group B',
        price: 21,
        volume: 10,
    },
    {
        id: '1.44',
        group: 'group B',
        price: 55,
        volume: 14,
    },
    {
        id: '1.45',
        group: 'group B',
        price: 190,
        volume: 16,
    },
    {
        id: '1.46',
        group: 'group B',
        price: 271,
        volume: 11,
    },
    {
        id: '1.47',
        group: 'group B',
        price: 461,
        volume: 13,
    },
    {
        id: '1.48',
        group: 'group B',
        price: 121,
        volume: 20,
    },
    {
        id: '1.49',
        group: 'group B',
        price: 71,
        volume: 19,
    },
    {
        id: '1.50',
        group: 'group B',
        price: 475,
        volume: 13,
    },
    {
        id: '1.51',
        group: 'group B',
        price: 380,
        volume: 15,
    },
    {
        id: '1.52',
        group: 'group B',
        price: 227,
        volume: 14,
    },
    {
        id: '1.53',
        group: 'group B',
        price: 62,
        volume: 5,
    },
    {
        id: '1.54',
        group: 'group B',
        price: 474,
        volume: 9,
    },
    {
        id: '1.55',
        group: 'group B',
        price: 76,
        volume: 18,
    },
    {
        id: '1.56',
        group: 'group B',
        price: 378,
        volume: 14,
    },
    {
        id: '1.57',
        group: 'group B',
        price: 250,
        volume: 12,
    },
    {
        id: '1.58',
        group: 'group B',
        price: 476,
        volume: 19,
    },
    {
        id: '1.59',
        group: 'group B',
        price: 34,
        volume: 15,
    },
    {
        id: '1.60',
        group: 'group B',
        price: 6,
        volume: 13,
    },
    {
        id: '1.61',
        group: 'group B',
        price: 410,
        volume: 12,
    },
    {
        id: '1.62',
        group: 'group B',
        price: 371,
        volume: 4,
    },
    {
        id: '1.63',
        group: 'group B',
        price: 493,
        volume: 17,
    },
    {
        id: '1.64',
        group: 'group B',
        price: 188,
        volume: 7,
    },
    {
        id: '1.65',
        group: 'group B',
        price: 80,
        volume: 8,
    },
    {
        id: '1.66',
        group: 'group B',
        price: 421,
        volume: 11,
    },
    {
        id: '1.67',
        group: 'group B',
        price: 476,
        volume: 5,
    },
    {
        id: '1.68',
        group: 'group B',
        price: 170,
        volume: 18,
    },
    {
        id: '1.69',
        group: 'group B',
        price: 454,
        volume: 20,
    },
    {
        id: '1.70',
        group: 'group B',
        price: 402,
        volume: 18,
    },
    {
        id: '2.0',
        group: 'group C',
        price: 428,
        volume: 20,
    },
    {
        id: '2.1',
        group: 'group C',
        price: 147,
        volume: 14,
    },
    {
        id: '2.2',
        group: 'group C',
        price: 410,
        volume: 8,
    },
    {
        id: '2.3',
        group: 'group C',
        price: 157,
        volume: 9,
    },
    {
        id: '2.4',
        group: 'group C',
        price: 493,
        volume: 16,
    },
    {
        id: '2.5',
        group: 'group C',
        price: 70,
        volume: 13,
    },
    {
        id: '2.6',
        group: 'group C',
        price: 291,
        volume: 8,
    },
    {
        id: '2.7',
        group: 'group C',
        price: 488,
        volume: 15,
    },
    {
        id: '2.8',
        group: 'group C',
        price: 465,
        volume: 20,
    },
    {
        id: '2.9',
        group: 'group C',
        price: 226,
        volume: 4,
    },
    {
        id: '2.10',
        group: 'group C',
        price: 426,
        volume: 5,
    },
    {
        id: '2.11',
        group: 'group C',
        price: 323,
        volume: 11,
    },
    {
        id: '2.12',
        group: 'group C',
        price: 345,
        volume: 10,
    },
    {
        id: '2.13',
        group: 'group C',
        price: 123,
        volume: 14,
    },
    {
        id: '2.14',
        group: 'group C',
        price: 243,
        volume: 4,
    },
    {
        id: '2.15',
        group: 'group C',
        price: 335,
        volume: 13,
    },
    {
        id: '2.16',
        group: 'group C',
        price: 385,
        volume: 6,
    },
    {
        id: '2.17',
        group: 'group C',
        price: 357,
        volume: 17,
    },
    {
        id: '2.18',
        group: 'group C',
        price: 81,
        volume: 6,
    },
    {
        id: '2.19',
        group: 'group C',
        price: 165,
        volume: 4,
    },
    {
        id: '2.20',
        group: 'group C',
        price: 400,
        volume: 15,
    },
    {
        id: '2.21',
        group: 'group C',
        price: 397,
        volume: 14,
    },
    {
        id: '2.22',
        group: 'group C',
        price: 266,
        volume: 20,
    },
    {
        id: '2.23',
        group: 'group C',
        price: 28,
        volume: 19,
    },
    {
        id: '2.24',
        group: 'group C',
        price: 34,
        volume: 6,
    },
    {
        id: '2.25',
        group: 'group C',
        price: 14,
        volume: 6,
    },
    {
        id: '2.26',
        group: 'group C',
        price: 315,
        volume: 9,
    },
    {
        id: '2.27',
        group: 'group C',
        price: 22,
        volume: 18,
    },
    {
        id: '2.28',
        group: 'group C',
        price: 469,
        volume: 13,
    },
    {
        id: '2.29',
        group: 'group C',
        price: 473,
        volume: 9,
    },
    {
        id: '2.30',
        group: 'group C',
        price: 104,
        volume: 6,
    },
    {
        id: '2.31',
        group: 'group C',
        price: 200,
        volume: 9,
    },
    {
        id: '2.32',
        group: 'group C',
        price: 153,
        volume: 19,
    },
    {
        id: '2.33',
        group: 'group C',
        price: 325,
        volume: 12,
    },
    {
        id: '2.34',
        group: 'group C',
        price: 300,
        volume: 4,
    },
    {
        id: '2.35',
        group: 'group C',
        price: 363,
        volume: 13,
    },
    {
        id: '2.36',
        group: 'group C',
        price: 487,
        volume: 11,
    },
    {
        id: '2.37',
        group: 'group C',
        price: 390,
        volume: 13,
    },
    {
        id: '2.38',
        group: 'group C',
        price: 434,
        volume: 10,
    },
    {
        id: '2.39',
        group: 'group C',
        price: 423,
        volume: 7,
    },
    {
        id: '2.40',
        group: 'group C',
        price: 40,
        volume: 12,
    },
    {
        id: '2.41',
        group: 'group C',
        price: 214,
        volume: 10,
    },
    {
        id: '2.42',
        group: 'group C',
        price: 103,
        volume: 5,
    },
    {
        id: '2.43',
        group: 'group C',
        price: 100,
        volume: 10,
    },
    {
        id: '2.44',
        group: 'group C',
        price: 122,
        volume: 15,
    },
    {
        id: '2.45',
        group: 'group C',
        price: 207,
        volume: 20,
    },
    {
        id: '2.46',
        group: 'group C',
        price: 255,
        volume: 14,
    },
    {
        id: '2.47',
        group: 'group C',
        price: 450,
        volume: 7,
    },
    {
        id: '2.48',
        group: 'group C',
        price: 81,
        volume: 9,
    },
    {
        id: '2.49',
        group: 'group C',
        price: 353,
        volume: 12,
    },
    {
        id: '2.50',
        group: 'group C',
        price: 385,
        volume: 15,
    },
    {
        id: '2.51',
        group: 'group C',
        price: 45,
        volume: 19,
    },
    {
        id: '2.52',
        group: 'group C',
        price: 255,
        volume: 10,
    },
    {
        id: '2.53',
        group: 'group C',
        price: 486,
        volume: 20,
    },
    {
        id: '2.54',
        group: 'group C',
        price: 102,
        volume: 9,
    },
    {
        id: '2.55',
        group: 'group C',
        price: 236,
        volume: 19,
    },
    {
        id: '2.56',
        group: 'group C',
        price: 20,
        volume: 18,
    },
    {
        id: '2.57',
        group: 'group C',
        price: 286,
        volume: 13,
    },
    {
        id: '2.58',
        group: 'group C',
        price: 437,
        volume: 10,
    },
    {
        id: '2.59',
        group: 'group C',
        price: 105,
        volume: 5,
    },
    {
        id: '2.60',
        group: 'group C',
        price: 314,
        volume: 4,
    },
    {
        id: '2.61',
        group: 'group C',
        price: 165,
        volume: 9,
    },
    {
        id: '2.62',
        group: 'group C',
        price: 243,
        volume: 16,
    },
    {
        id: '2.63',
        group: 'group C',
        price: 89,
        volume: 9,
    },
    {
        id: '2.64',
        group: 'group C',
        price: 308,
        volume: 8,
    },
    {
        id: '2.65',
        group: 'group C',
        price: 5,
        volume: 6,
    },
    {
        id: '2.66',
        group: 'group C',
        price: 473,
        volume: 18,
    },
    {
        id: '2.67',
        group: 'group C',
        price: 215,
        volume: 8,
    },
];

export default createBoard({
    name: 'Swarmplot',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveSwarmPlot
                data={data}
                groups={['group A', 'group B', 'group C']}
                value="price"
                valueFormat="$.2f"
                valueScale={{ type: 'linear', min: 0, max: 500, reverse: false }}
                size={{
                    key: 'volume',
                    values: [4, 20],
                    sizes: [6, 20],
                }}
                forceStrength={4}
                simulationIterations={100}
                borderColor={{
                    from: 'color',
                    modifiers: [
                        ['darker', 0.6],
                        ['opacity', 0.5],
                    ],
                }}
                margin={{ top: 80, right: 100, bottom: 80, left: 100 }}
                axisTop={{
                    tickSize: 10,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'group if vertical, price if horizontal',
                    legendPosition: 'middle',
                    legendOffset: -46,
                }}
                axisRight={{
                    tickSize: 10,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'price if vertical, group if horizontal',
                    legendPosition: 'middle',
                    legendOffset: 76,
                }}
                axisBottom={{
                    tickSize: 10,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'group if vertical, price if horizontal',
                    legendPosition: 'middle',
                    legendOffset: 46,
                }}
                axisLeft={{
                    tickSize: 10,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'price if vertical, group if horizontal',
                    legendPosition: 'middle',
                    legendOffset: -76,
                }}
            />
        </div>
    ),
    cover,
});