import React, { useEffect, useState } from 'react';
import ReactEcharts from "echarts-for-react"; 
import { Col, Container, Row } from 'react-bootstrap';
import axios from 'axios';
import { getPieChartData } from '../TabulatorData';

function pichart(){
    const [apiData, setapiData] = useState()
   const option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {  
          type:'scroll',
          orient: "horizontal",
          bottom : "0%",
          legendHoverLink: true,
        },
        series: [
          {
            type: 'pie',
            data: apiData?.map((item, index)=>{
              return(
                      { value: item?.value, name: item?.title }
                  )
            }),
            label: {
              width: 64,
              overflow: "break",
              fontSize: 12,
              fontWeight : 'normal'
            },
            labelLine: {
              width : 1.5,
              length2: 7,
              length: 7
            },
            width: "100%",
            height: "100%",
            center : ['48%', '50%']
          }
        ]
      };

    const onChartClick = (params) => {
    console.log('Chart clicked', params);
    };
    const onEvents = {
    click: onChartClick,
    };
    useEffect(()=>{
     const getPieChartResult = () => {
      // ⚠️ This is where you should pull data in from your server
        const piechartResultsResponse = getPieChartData();
        setapiData(piechartResultsResponse);
     };
    getPieChartResult();
},[])
  return (
    <>
     <Container fluid>
        <Row>
            <Col xs={12} sm={12} md={12} lg={8}>
              <ReactEcharts option={option} onEvents={onEvents}/>
            </Col>
        </Row>
    </Container>
    </>
  )
}

export default pichart