import React from 'react'
import ReactEcharts from 'echarts-for-react'
import { useTheme } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core'

const CustomLineChart = ({ data, color }) => {
    console.log('data linechart', data)
    const option = {
        color: color,
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data?.xAxis,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: data?.series,
                type: 'line',
                smooth: true,
                areaStyle: {},
            },
        ],
    }

    return <ReactEcharts style={{ height: 400 }} option={option} />
}

export default CustomLineChart
