import React, { Component } from 'react';
import ReactApexChart from 'react-apexcharts';

interface State {
    series: { name: string; data: number[] }[];
    options: {
        chart: { type: string; height: number };
        plotOptions: { bar: { colors: { ranges: { from: number; to: number; color: string }[] }; columnWidth: string } };
        dataLabels: { enabled: boolean };
        yaxis: { title: { text: string }; labels: { formatter: (y: number) => string } };
        xaxis: { type: string; categories: string[]; labels: { rotate: number } };
    };
}

class ApexChartColumn extends Component<{}, State> {
    render() {
        return (
            <div>
                <div id="chart">
                    <ReactApexChart
                        options={
                            {
                                chart: { type: 'bar', height: 350, zoom: { enabled: false } },
                                plotOptions: {
                                    bar: {
                                        colors: {
                                            ranges: [
                                                {
                                                    from: -100,
                                                    to: 0,
                                                    color: '#57c0fd'
                                                },
                                                {
                                                    from: 0,
                                                    to: 100,
                                                    color: '#6484fd',

                                                },
                                            ],
                                        },
                                        columnWidth: '20%',
                                    },
                                },
                                dataLabels: {
                                    enabled: false,
                                },
                                yaxis: {

                                    labels: {
                                        formatter: (y: any) => {
                                            return y.toFixed(0);
                                        },
                                    },
                                },
                                xaxis: {
                                    type: 'datetime',
                                    categories: [
                                        '2020-05-01', '2020-05-02', '2020-05-03', '2020-05-04', '2020-05-05',
                                    ],
                                    labels: {
                                        rotate: -90,
                                    },
                                },

                            }}
                        series={[
                            {
                                name: 'Earning This Month   ',
                                data: [
                                    1.45, 5.9, -0.42, -12.6, -18.1
                                ],
                            },
                        ]} type="bar" height={350} />
                </div>
                <div id="html-dist"></div>
            </div>
        );
    }
}

export default ApexChartColumn;