Untitled

import React, { useRef, useEffect, useState } from 'react';
import { Box, Typography, useMediaQuery } from '@mui/material';
import ReactECharts from 'echarts-for-react';
import PropTypes from 'prop-types';

const ManagedByTeamChart = ({ data = [] }) => {
  const colors = ['#63C938', '#764AF1', '#F28F27', '#6C6C6C', '#F82C17', '#FFC414'];
  const chartRef = useRef(null);
  const [currentTitle, setCurrentTitle] = useState({ text: '', color: '#63C938' });
  const isLaptopSize = useMediaQuery('(max-width:1536px)');

  const sortedDataEDC = data?.sort((a, b) => (b.value ?? 0) - (a.value ?? 0)) || [];
  const totalValue = sortedDataEDC.reduce((acc, item) => acc + (item.value ?? 0), 0);
  const highestValue = sortedDataEDC.length > 0 ? sortedDataEDC[0].value ?? 0 : 0;
  const highestValuePercentage = totalValue > 0 ? ((highestValue / totalValue) * 100).toFixed(2) : 0;

  // Calculate percentage data for the series
  const percentageData = sortedDataEDC.map((item) => {
    return {
      ...item,
      percentage: totalValue > 0 ? (item.value / totalValue) * 100 : 0
    };
  });

  // data for chart slice
  const percentageDataForSlice = sortedDataEDC.map((item) => {
    const percentage = totalValue > 0 ? (item.value / totalValue) * 100 : 0;
    return {
      ...item,
      percentage: percentage < 5 && item.value > 0 ? 5 : percentage
    };
  });

  useEffect(() => {
    setCurrentTitle({ text: `${highestValuePercentage}%`, color: '#63C938' });
  }, [highestValuePercentage]);

  const getOption = () => {
    return {
      title: {
        text: currentTitle.text,
        left: isLaptopSize ? '61%' : '64%',
        top: 'center',
        textStyle: {
          color: currentTitle.color
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const originalData = sortedDataEDC.find((item) => item.label === params.name);
          const formattedValue = originalData.value.toLocaleString('id-ID');
          return `${params.seriesName} <br/>${params.name} : ${formattedValue}`;
        }
      },
      legend: {
        show: true,
        orient: 'vertical',
        left: '0%',
        icon: 'rect',
        top: 'center',
        data: sortedDataEDC?.map((item) => item.label),
        itemWidth: 14,
        itemHeight: 14,
        selectedMode: false
      },
      series: [
        {
          name: 'Team',
          type: 'pie',
          radius: ['50%', '90%'],
          center: ['70%', '50%'],
          roseType: 'radius',
          padAngle: 5,
          itemStyle: {
            borderRadius: 5,
            borderWidth: 2
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: percentageDataForSlice.map((item, index) => ({
            value: item.percentage,
            name: item.label,
            itemStyle: { color: colors[index] }
          }))
        }
      ],
      detail: {
        valueAnimation: true,
        fontSize: 80,
        offsetCenter: [0, '70%']
      }
    };
  };

  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = chartRef.current.getEchartsInstance();
      chartInstance.on('click', (params) => {
        if (params.dataIndex !== undefined && percentageData[params.dataIndex]) {
          const hoveredData = percentageData[params.dataIndex];
          setCurrentTitle({ text: `${hoveredData.percentage.toFixed(2)}%`, color: colors[params.dataIndex] });
        }
      });
    }
  }, [percentageData, highestValuePercentage]);

  return (
    <Box sx={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <Typography
        sx={{
          fontSize: '16px',
          color: '#1A1A1A',
          fontWeight: 600,
          whiteSpace: 'nowrap',
          '@media screen and (max-width:1536px)': {
            fontSize: '13px'
          }
        }}
      >
        Managed by Team
      </Typography>
      <ReactECharts
        ref={chartRef}
        option={getOption()}
        style={{
          height: '95%',
          width: '100%',
          backgroundColor: '#fff'
        }}
      />
    </Box>
  );
};

ManagedByTeamChart.propTypes = {
  data: PropTypes.any
};

export default ManagedByTeamChart;