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

/**
 * Composant permettant d'afficher un diagramme de type "histogramme".
 *
 * @component
 * @param {object} props?.data - Données à afficher dans les barres
 * @param {string} props.height - Hauteur du diagramme (Obligatoire)
 */
function GenericBar(props) {
    return (
        <div style={{ height: props.height }}>
            <ResponsiveBar
                data={props?.data}
                theme={{
                    fontSize: '15px',
                    axis: {
                        legend: {
                            text: {
                                fontSize: '15px'
                            }
                        }
                    }
                }}
                margin={{ top: 50, right: 60, bottom: 60, left: 100 }}
                keys={props.keys}
                indexBy="item"
                padding={0.5}
                colors={{ datum: 'data.color' }}
                valueScale={{ type: 'linear' }}
                indexScale={{ type: 'band', round: true }}
                valueFormat={{ format: '', enabled: false }}
                borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
                axisTop={null}
                axisRight={null}
                axisLeft={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: props.axisYLegend,
                    legendPosition: 'middle',
                    legendOffset: -70
                }}
                labelSkipWidth={12}
                labelSkipHeight={12}
                labelTextColor={'#ffffff'}
            />
        </div>
    );
}

export default GenericBar;
