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

const bubblechart = () => {
   const [apiData2, setapiData2] = useState()
   const scatterData = apiData2?.map((item)=>({
    name: item?.title,
    value: [item?.id, item?.discountPercentage, item?.title],
    itemStyle: 'blue'
  }));
   const option2 = {
        xAxis: {},
        yAxis: {},
        tooltip: {
            triggerOn: "mousemove",
            alwaysShowContent: true,
            position: 'top'
        },
        series: [
          {
            symbolSize: 20,
            data: scatterData,
            type: 'scatter'
          }
        ]
      };
    const onBubbleChartClick = (params) => {
    console.log('Chart clicked', params);
    };
    const onEvents = {
    click: onBubbleChartClick,
    };
    useEffect(()=>{
        axios.get('https://dummyjson.com/products')
        .then(res => {
            const values = res?.data?.products;
            setapiData2(values);
        })
       
    },[])
  return (
    <>
     <Container fluid>
        <Row>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
            <ReactEcharts option={option2} onEvents={onEvents}/>
            </Col>
        </Row>
    </Container>
    </>
  )
}

export default bubblechart