import { PieChart } from 'react-minimal-pie-chart';
import './chart.css'
import "../../styles/styles.css";




export const PieChartComp: React.FC = () => {
    const dataMock = [
        { title: 'One', value: 36.27, color: '#7A31C4' },
        { title: 'Two', value: 6.22, color: '#FB57F4' },
        { title: 'Three', value: 9.95, color: '#8742F8' },
        { title: 'Four', value: 17.93, color: '#D375FF' },
        { title: 'Five', value: 29.64, color: '#798FFF' },

    ];


    const defaultLabelStyle = {
        fontSize: '9px',
        fontWeight: '500',
        lineHeight: '140%',
        fontFamily: 'GilroyWebRegular',
        fill: '#EBEBEB',
    };





    return (
        <div className='chart'>
            <PieChart
                label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}
                data={dataMock}
                labelStyle={
                    defaultLabelStyle
                }
                labelPosition={65}
            />
        </div>
    )
}