import Chart from "@/core/components/Chart";
import {calculateGradientColor} from "@/core/utils/gradientColorHandler";

const RadialBarSemiCircularChart = ({data, label, formatter}) => {
    const specialOption = {
        title: {
            text: undefined,
        },
        plotOptions: {
            radialBar: {
                startAngle: -90,
                endAngle: 90,
                track: {
                    background: "#e7e7e7",
                    strokeWidth: '80%',
                },
                dataLabels: {
                    name: {
                        fontSize: '1rem',
                        offsetY: 30,
                        color: "#8c8c8c"
                    },
                    value: {
                        offsetY: -30,
                        fontSize: '30px',
                        fontWeight: 500,
                        color: "#8c8c8c",
                        formatter: formatter
                    }
                }
            }
        },
        fill: {
            colors: calculateGradientColor(data)
        },
        labels: [label],
    };
    const series = [data]
    return (
        <Chart chartId="LoanProgressBar" type="radialBar" specialOption={specialOption} series={series}/>
    )
};

export default RadialBarSemiCircularChart;