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 ApexChartLineArea extends Component<{}, State> {
    render() {
        return (
            <div id="chart" className='w-[377px] translate-y-6 -translate-x-6'>
                <ReactApexChart
                    options={
                        {
                            chart: {
                                height: 50,
                                type: 'area',
                                zoom: {
                                    enabled: false
                                },
                                toolbar: {
                                    show: false, // Menampilkan toolbar
                                   
                                }
                            },
                            stroke: {
                                curve: 'smooth'
                            },
                            dataLabels: {
                                enabled: false
                            },
                            fill: {
                                type: 'light',
                                opacity: [0.35, 0],
                            },
                            markers: {
                                size: 0
                            },
                            xaxis: {
                                labels: {
                                    show: false
                                }
                            },
                            yaxis: {
                                labels: {
                                    show: false
                                }
                            },
                            legend: {
                                show: false
                            },
                            grid: {
                                show: false
                            }
                        }}
                    series={[{
                        name: 'Monthly Earning',
                        data: [25, 55, 20, 40, 12, 60, 20]
                    }]}
                    type="area" height={90}
                />
            </div>
        );
    }
}

export default ApexChartLineArea;