import React, {ReactNode} from 'react';
import {ChartData} from "../../../models/Riview/ChartData";
import Chart from "react-apexcharts";
import {arraySum, getRate} from "../../../helpers/functions";
import './radialrate.scss'

type RadialRateProps = {
    chart: ChartData
}

const RadialRate = ({chart}: RadialRateProps) => {

    const data = chart.series[0].data
    const total = arraySum(data)
    const rate = getRate(data)
    const title= chart.series[0].name

    return (
        <div className='radial-rate'>
            <div className="content">
                <h4>{title}</h4>
                <p>{total.toLocaleString('el-GR')}</p>


            </div>
            <div className="radial">
                <Chart

                    options={{

                        chart: {
                            id: 'bar-chart',

                        },
                        colors: [`${parseFloat(rate)<0 ? '#E11929' : '#1A73E8'}`],
                        labels: [`${rate}%`],
                        plotOptions: {

                            radialBar: {

                                hollow: {

                                    size: '55%%',
                                    margin: 0,
                                    background: '#F3F8FC'
                                },
                                dataLabels: {

                                    name: {
                                        show: true,
                                        fontFamily: 'hero-new, sans-serif',
                                        fontWeight: 800,
                                        offsetY: 5
                                    },
                                    value: {
                                        show: false,
                                    }
                                },
                                track: {
                                    strokeWidth: '100%',
                                }
                            },


                        },
                    }}

                    series={[Math.abs(parseFloat(rate))]}
                    type="radialBar"
                    width="100%"
                    height={210}
                />
            </div>

        </div>
    );
}

export default RadialRate;