import React, {ReactNode} from 'react';
import {ChartData} from "../../../models/Riview/ChartData";
import Chart from "react-apexcharts";

type BarChartColumnProps = {
  chart: ChartData
}

const BarChartColumn = ({chart}: BarChartColumnProps) => {
    return (
        <Chart
                    options={{
                        colors: ['#000','#1A73E8'],
                        fill: {
                            opacity: 1
                        },
                        legend: {
                            show: false
                        },
                        chart: {
                            id: '-rescom-bar-chart',
                            zoom: {
                                enabled: false
                            },
                            toolbar: {
                                show: false
                            },
                        },
                        xaxis: {
                            categories: chart.labels,
                            labels: {
                                style: {
                                    cssClass: 'bar-chart-x-labels',
                                    colors: '#000'
                                },
                                maxHeight: 30
                            }
                        },
                        yaxis: {
                            labels: {
                                formatter: function (val) {
                                    return val.toFixed(0);
                                  }
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            offsetY: -12,
                            style: {
                                fontSize: '8px',
                                colors: [0]
                            },
                            
                        },
                        plotOptions: {
                            bar: {
                                columnWidth: '75%',
                                dataLabels: {
                                    position: 'top',
                                  },
                                  colors: {
                                    ranges:[{
                                        from: 0,
                                        to: 1000000000000000000000000000000000,
                                        color: '#0d6efd'
                                    }]
                                  }
                            },
                        },
                        tooltip: {
                            y: {
                                title: {
                                    formatter: (seriesName) => seriesName.replace('_', ' '),
                                },
                            },
                        },
                        grid: {
                            show: true,
                        },
                    }}

                    series={[chart.series[0]]}
                    type="bar"
/>
    );
}

export default BarChartColumn;