import { createBoard } from '@wixc3/react-board';
import { ResponsiveParallelCoordinates } from '@nivo/parallel-coordinates';
import cover from './cover.png';

const data = [
    {
        temp: 36.898722704786536,
        cost: 1740,
        weight: 260,
        volume: 5.879241908660724,
        id: 'A',
    },
    {
        temp: 21.279842376976696,
        cost: 5130,
        weight: 192,
        volume: 4.23630527569605,
        id: 'B',
    },
    {
        temp: 2.632449991408768,
        cost: 33924,
        weight: 31,
        volume: 0.8212540209103765,
        id: 'C',
    },
    {
        temp: 27.073634427557856,
        cost: 5582,
        weight: 293,
        volume: 2.7120557638093317,
        id: 'D',
    },
    {
        temp: 6.598629844805391,
        cost: 18292,
        weight: 101,
        volume: 4.64809895551978,
        id: 'E',
    },
    {
        temp: 25.436275522675132,
        cost: 6540,
        weight: 220,
        volume: 4.729620359687096,
        id: 'F',
    },
    {
        temp: 36.570121029346424,
        cost: 4119,
        weight: 73,
        volume: 5.6708744141622525,
        id: 'G',
    },
    {
        temp: 6.327225261731947,
        cost: 23864,
        weight: 167,
        volume: 3.962312837774476,
        id: 'H',
    },
    {
        temp: 21.56128324481202,
        cost: 8450,
        weight: 155,
        volume: 5.427647847155856,
        id: 'I',
    },
    {
        temp: 24.92093965308503,
        cost: 18151,
        weight: 107,
        volume: 3.522465329120659,
        id: 'J',
    },
];

export default createBoard({
    name: 'ParallelCoordinates',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveParallelCoordinates
                data={data}
                variables={[
                    {
                        id: 'temp',
                        label: 'temperature',
                        value: 'temp',
                        min: 'auto',
                        max: 'auto',
                        ticksPosition: 'before',
                        legendPosition: 'start',
                        legendOffset: 20,
                    },
                    {
                        id: 'cost',
                        value: 'cost',
                        min: 0,
                        max: 'auto',
                        ticksPosition: 'before',
                        legendPosition: 'start',
                        legendOffset: 20,
                    },
                    {
                        id: 'weight',
                        value: 'weight',
                        min: 'auto',
                        max: 'auto',
                        legendPosition: 'start',
                        legendOffset: -20,
                    },
                    {
                        id: 'volume',
                        value: 'volume',
                        min: 0,
                        max: 'auto',
                        legendPosition: 'start',
                        legendOffset: -20,
                    },
                ]}
                margin={{ top: 50, right: 120, bottom: 50, left: 60 }}
                lineWidth={3}
                legends={[
                    {
                        anchor: 'right',
                        direction: 'column',
                        justify: false,
                        translateX: 100,
                        translateY: 0,
                        itemsSpacing: 2,
                        itemWidth: 60,
                        itemHeight: 20,
                        itemDirection: 'left-to-right',
                        itemOpacity: 0.85,
                        symbolSize: 20,
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemOpacity: 1,
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});