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

const data = [
    {
        value: 317,
        day: '2018-05-22',
    },
    {
        value: 37,
        day: '2018-06-22',
    },
    {
        value: 57,
        day: '2018-08-03',
    },
    {
        value: 106,
        day: '2018-08-10',
    },
    {
        value: 136,
        day: '2018-07-06',
    },
    {
        value: 197,
        day: '2018-05-21',
    },
    {
        value: 63,
        day: '2018-05-29',
    },
    {
        value: 177,
        day: '2018-06-04',
    },
    {
        value: 379,
        day: '2018-07-21',
    },
    {
        value: 285,
        day: '2018-05-13',
    },
    {
        value: 1,
        day: '2018-06-08',
    },
    {
        value: 57,
        day: '2018-04-22',
    },
    {
        value: 14,
        day: '2018-08-07',
    },
    {
        value: 98,
        day: '2018-06-01',
    },
    {
        value: 201,
        day: '2018-04-18',
    },
    {
        value: 351,
        day: '2018-04-16',
    },
    {
        value: 191,
        day: '2018-07-05',
    },
    {
        value: 171,
        day: '2018-06-11',
    },
    {
        value: 275,
        day: '2018-04-20',
    },
    {
        value: 215,
        day: '2018-05-31',
    },
    {
        value: 210,
        day: '2018-07-22',
    },
    {
        value: 279,
        day: '2018-05-30',
    },
    {
        value: 86,
        day: '2018-05-14',
    },
    {
        value: 237,
        day: '2018-04-01',
    },
    {
        value: 193,
        day: '2018-07-26',
    },
    {
        value: 230,
        day: '2018-07-18',
    },
    {
        value: 178,
        day: '2018-04-27',
    },
    {
        value: 101,
        day: '2018-08-08',
    },
    {
        value: 337,
        day: '2018-06-06',
    },
    {
        value: 288,
        day: '2018-04-04',
    },
    {
        value: 114,
        day: '2018-04-03',
    },
    {
        value: 339,
        day: '2018-05-11',
    },
    {
        value: 11,
        day: '2018-06-16',
    },
    {
        value: 108,
        day: '2018-07-10',
    },
    {
        value: 318,
        day: '2018-07-09',
    },
    {
        value: 153,
        day: '2018-07-02',
    },
    {
        value: 315,
        day: '2018-04-28',
    },
    {
        value: 143,
        day: '2018-05-09',
    },
    {
        value: 359,
        day: '2018-05-05',
    },
    {
        value: 5,
        day: '2018-05-25',
    },
    {
        value: 105,
        day: '2018-06-13',
    },
    {
        value: 195,
        day: '2018-08-11',
    },
    {
        value: 345,
        day: '2018-08-01',
    },
    {
        value: 359,
        day: '2018-07-30',
    },
    {
        value: 207,
        day: '2018-07-25',
    },
    {
        value: 153,
        day: '2018-04-17',
    },
    {
        value: 206,
        day: '2018-04-02',
    },
    {
        value: 114,
        day: '2018-04-24',
    },
    {
        value: 310,
        day: '2018-06-27',
    },
    {
        value: 136,
        day: '2018-06-09',
    },
    {
        value: 283,
        day: '2018-06-24',
    },
    {
        value: 296,
        day: '2018-04-26',
    },
    {
        value: 265,
        day: '2018-04-11',
    },
    {
        value: 72,
        day: '2018-05-02',
    },
    {
        value: 243,
        day: '2018-04-23',
    },
    {
        value: 282,
        day: '2018-07-27',
    },
    {
        value: 73,
        day: '2018-04-14',
    },
    {
        value: 364,
        day: '2018-05-15',
    },
    {
        value: 120,
        day: '2018-06-18',
    },
    {
        value: 207,
        day: '2018-04-07',
    },
    {
        value: 9,
        day: '2018-05-06',
    },
    {
        value: 354,
        day: '2018-07-12',
    },
    {
        value: 245,
        day: '2018-08-05',
    },
    {
        value: 30,
        day: '2018-07-19',
    },
    {
        value: 202,
        day: '2018-07-11',
    },
    {
        value: 252,
        day: '2018-04-29',
    },
    {
        value: 380,
        day: '2018-04-13',
    },
    {
        value: 391,
        day: '2018-07-14',
    },
    {
        value: 286,
        day: '2018-04-05',
    },
    {
        value: 215,
        day: '2018-05-07',
    },
    {
        value: 46,
        day: '2018-07-31',
    },
    {
        value: 25,
        day: '2018-05-24',
    },
    {
        value: 166,
        day: '2018-07-23',
    },
    {
        value: 177,
        day: '2018-05-26',
    },
    {
        value: 257,
        day: '2018-07-24',
    },
    {
        value: 323,
        day: '2018-05-10',
    },
    {
        value: 131,
        day: '2018-07-15',
    },
    {
        value: 221,
        day: '2018-05-12',
    },
    {
        value: 276,
        day: '2018-05-27',
    },
    {
        value: 348,
        day: '2018-06-07',
    },
    {
        value: 127,
        day: '2018-06-29',
    },
    {
        value: 242,
        day: '2018-07-08',
    },
    {
        value: 211,
        day: '2018-04-06',
    },
    {
        value: 11,
        day: '2018-05-08',
    },
    {
        value: 76,
        day: '2018-04-19',
    },
    {
        value: 325,
        day: '2018-07-16',
    },
    {
        value: 179,
        day: '2018-06-26',
    },
    {
        value: 344,
        day: '2018-06-14',
    },
    {
        value: 6,
        day: '2018-06-20',
    },
    {
        value: 84,
        day: '2018-06-10',
    },
    {
        value: 112,
        day: '2018-05-23',
    },
    {
        value: 94,
        day: '2018-06-23',
    },
    {
        value: 118,
        day: '2018-06-15',
    },
    {
        value: 342,
        day: '2018-04-25',
    },
    {
        value: 120,
        day: '2018-06-17',
    },
    {
        value: 390,
        day: '2018-06-02',
    },
    {
        value: 144,
        day: '2018-07-13',
    },
    {
        value: 143,
        day: '2018-08-06',
    },
    {
        value: 221,
        day: '2018-05-18',
    },
    {
        value: 352,
        day: '2018-07-20',
    },
    {
        value: 258,
        day: '2018-06-25',
    },
    {
        value: 371,
        day: '2018-04-30',
    },
    {
        value: 36,
        day: '2018-08-02',
    },
    {
        value: 346,
        day: '2018-04-10',
    },
    {
        value: 311,
        day: '2018-06-05',
    },
    {
        value: 218,
        day: '2018-04-15',
    },
];

export default createBoard({
    name: 'TimeRange',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveTimeRange
                data={data}
                from="2018-04-01"
                to="2018-08-12"
                emptyColor="#eeeeee"
                colors={['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']}
                margin={{ top: 40, right: 40, bottom: 100, left: 40 }}
                dayBorderWidth={2}
                dayBorderColor="#ffffff"
                legends={[
                    {
                        anchor: 'bottom-right',
                        direction: 'row',
                        justify: false,
                        itemCount: 4,
                        itemWidth: 42,
                        itemHeight: 36,
                        itemsSpacing: 14,
                        itemDirection: 'right-to-left',
                        translateX: -60,
                        translateY: -60,
                        symbolSize: 20,
                    },
                ]}
            />
        </div>
    ),
    cover,
});