import React from 'react'
import { ResponsiveBar } from '@nivo/bar'

export const Bar = ({ data }) => (
    <ResponsiveBar
        data={data}
        keys={['count']}
        indexBy="lessonIndex"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={{ type: 'linear' }}
        indexScale={{ type: 'band', round: true }}
        colors={{ scheme: 'set3' }}
        axisTop={null}
        axisRight={null}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{
            from: 'color',
            modifiers: [['brighter', 1.4]],
        }}
        role="application"
        ariaLabel="График посещаемости лекций"
        barAriaLabel={(e) =>
            e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue
        }
    />
)
