Untitled

import React from 'react';
import { Box, Typography } 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 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 ? Math.round((highestValue / totalValue) * 100) : 0;

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

  const getOption = () => {
    return {
      title: {
        text: `${highestValuePercentage}%`,
        left: '65%',
        top: 'center',
        textStyle: {
          color: '#63C938'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const originalData = sortedDataEDC.find((item) => item.label === params.name);
          return `${params.seriesName} <br/>${params.name} : ${originalData.value}`;
        }
      },
      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: percentageData.map((item, index) => ({
            value: item.percentage,
            name: item.label,
            itemStyle: { color: colors[index] }
          }))
        }
      ],
      detail: {
        valueAnimation: true,
        fontSize: 80,
        offsetCenter: [0, '70%']
      }
    };
  };

  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
        option={getOption()}
        style={{
          height: '95%',
          width: '100%',
          backgroundColor: '#fff'
        }}
      />
    </Box>
  );
};

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

export default ManagedByTeamChart;