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

const data = [
    {
        Raoul: 41,
        Josiane: 75,
        Marcel: 85,
        René: 149,
        Paul: 85,
        Jacques: 36,
    },
    {
        Raoul: 95,
        Josiane: 72,
        Marcel: 111,
        René: 197,
        Paul: 131,
        Jacques: 165,
    },
    {
        Raoul: 40,
        Josiane: 94,
        Marcel: 162,
        René: 12,
        Paul: 160,
        Jacques: 140,
    },
    {
        Raoul: 58,
        Josiane: 15,
        Marcel: 94,
        René: 128,
        Paul: 147,
        Jacques: 86,
    },
    {
        Raoul: 182,
        Josiane: 156,
        Marcel: 180,
        René: 99,
        Paul: 160,
        Jacques: 25,
    },
    {
        Raoul: 35,
        Josiane: 16,
        Marcel: 74,
        René: 49,
        Paul: 168,
        Jacques: 200,
    },
    {
        Raoul: 135,
        Josiane: 30,
        Marcel: 101,
        René: 139,
        Paul: 76,
        Jacques: 128,
    },
    {
        Raoul: 120,
        Josiane: 178,
        Marcel: 146,
        René: 166,
        Paul: 46,
        Jacques: 193,
    },
    {
        Raoul: 140,
        Josiane: 56,
        Marcel: 81,
        René: 143,
        Paul: 113,
        Jacques: 111,
    },
];

export default createBoard({
    name: 'Stream',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveStream
                data={data}
                keys={['Raoul', 'Josiane', 'Marcel', 'René', 'Paul', 'Jacques']}
                margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
                axisTop={null}
                axisRight={null}
                axisBottom={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: '',
                    legendOffset: 36,
                }}
                axisLeft={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: '',
                    legendOffset: -40,
                }}
                enableGridX={true}
                enableGridY={false}
                offsetType="silhouette"
                colors={{ scheme: 'nivo' }}
                fillOpacity={0.85}
                borderColor={{ theme: 'background' }}
                defs={[
                    {
                        id: 'dots',
                        type: 'patternDots',
                        background: 'inherit',
                        color: '#2c998f',
                        size: 4,
                        padding: 2,
                        stagger: true,
                    },
                    {
                        id: 'squares',
                        type: 'patternSquares',
                        background: 'inherit',
                        color: '#e4c912',
                        size: 6,
                        padding: 2,
                        stagger: true,
                    },
                ]}
                fill={[
                    {
                        match: {
                            id: 'Paul',
                        },
                        id: 'dots',
                    },
                    {
                        match: {
                            id: 'Marcel',
                        },
                        id: 'squares',
                    },
                ]}
                dotSize={8}
                dotColor={{ from: 'color' }}
                dotBorderWidth={2}
                dotBorderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.7]],
                }}
                legends={[
                    {
                        anchor: 'bottom-right',
                        direction: 'column',
                        translateX: 100,
                        itemWidth: 80,
                        itemHeight: 20,
                        itemTextColor: '#999999',
                        symbolSize: 12,
                        symbolShape: 'circle',
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000000',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});