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

const data = [
    {
        id: 'temp.',
        ranges: [61, 27, 73, 0, 120],
        measures: [81],
        markers: [99],
    },
    {
        id: 'power',
        ranges: [0.21708285529872082, 0.476034804983244, 0.3694482568196107, 0, 2],
        measures: [0.08818891471912765, 0.3531616367327284],
        markers: [1.2571205141460582],
    },
    {
        id: 'volume',
        ranges: [10, 42, 17, 43, 1, 36, 0, 60],
        measures: [56],
        markers: [44],
    },
    {
        id: 'cost',
        ranges: [282633, 67244, 383121, 0, 500000],
        measures: [276972, 416172],
        markers: [431479],
    },
    {
        id: 'revenue',
        ranges: [11, 2, 6, 0, 13],
        measures: [11],
        markers: [8.769479905241779, 12.016735786301002],
    },
];

export default createBoard({
    name: 'Bullet',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveBullet
                data={data}
                margin={{ top: 50, right: 90, bottom: 50, left: 90 }}
                spacing={46}
                titleAlign="start"
                titleOffsetX={-70}
                measureSize={0.2}
            />
        </div>
    ),
    cover,
    isSnippet: true,
});