import React from 'react';
import { ResponsivePie } from '@nivo/pie';

/**
 * Composant permettant d'afficher un diagramme de type "camembert".
 *
 * @component
 * @param {object} props?.data - Données à afficher dans le camembert
 * @param {string} props.height - Hauteur du diagramme (Obligatoire)
 */
function GenericPie(props) {
    // Nombre de données retournées pour effectuer le pourcentage
    let nbValues = 0;
    props?.data.forEach((d) => (nbValues += d.value));

    return (
        <div style={{ height: props.height }}>
            <ResponsivePie
                data={props?.data}
                theme={{
                    fontSize: '12px'
                }}
                margin={{ top: 50, right: 50, bottom: 60, left: 50 }}
                innerRadius={0.5}
                padAngle={0.7}
                cornerRadius={3}
                activeOuterRadiusOffset={8}
                borderWidth={1}
                colors={{ datum: 'data.color' }}
                borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
                arcLinkLabelsSkipAngle={10}
                arcLinkLabelsTextColor="#333333"
                arcLinkLabelsThickness={2}
                arcLinkLabelsColor={{ from: 'color' }}
                arcLabel={(l) => {
                    const percentage = (l.value / nbValues) * 100;
                    return percentage.toFixed(2) + ' %';
                }}
                arcLabelsSkipAngle={10}
                arcLabelsTextColor={'#ffffff'}
                layers={['arcLinkLabels', 'arcs', 'arcLabels']}
            />
        </div>
    );
}

export default GenericPie;
