Untitled

import React from 'react';
import { Box, Typography, Stack } from '@mui/material';
import ReactECharts from 'echarts-for-react';

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 percentage = totalValue > 0 ? Math.round((highestValue / totalValue) * 100) : 0;

  const getOption = () => {
    return {
      title: {
        text: `${percentage}%`,
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#63C938'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        show: false,
        // show: true,
        orient: 'vertical',
        left: '0%',
        icon: 'rect',
        top: 'center',
        data: sortedDataEDC?.map((item) => item.label),
        itemWidth: 14,
        itemHeight: 14
      },
      series: [
        {
          name: 'Team',
          type: 'pie',
          radius: ['50%', '90%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          padAngle: 5,
          itemStyle: {
            borderRadius: 5,
            borderWidth: 2
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },

          data: sortedDataEDC?.map((item, index) => ({
            value: item.value ?? 0,
            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: 'row', justifyContent: 'space-between' }}>
      <Stack
        direction="column"
        justifyContent="center"
        spacing="16px"
        sx={{
          height: '100%',
          width: '35%',
          bgcolor: '#fff',
          '@media screen and (max-width:1536px)': {
            width: '40%'
          }
        }}
      >
        <Typography
          sx={{
            fontSize: '16px',
            color: '#1A1A1A',
            fontWeight: 600,
            whiteSpace: 'nowrap',
            '@media screen and (max-width:1536px)': {
              fontSize: '13px'
            }
          }}
        >
          Managed by Team
        </Typography>
        <Stack direction="column" width="100%" spacing="8px">
          {sortedDataEDC?.map((item, index) => (
            <Box key={index} sx={{ display: 'flex', alignItems: 'center' }}>
              <Box
                sx={{
                  width: 14,
                  height: 14,
                  bgcolor: colors[index],
                  borderRadius: 1,
                  mr: 1
                }}
              />
              <Typography
                sx={{
                  fontSize: '14px',
                  color: '#1A1A1A',
                  fontWeight: 400,
                  whiteSpace: 'nowrap',
                  '@media screen and (max-width:1536px)': {
                    fontSize: '12px'
                  }
                }}
              >
                {item.label}
              </Typography>
            </Box>
          ))}
        </Stack>
      </Stack>
      <ReactECharts
        option={getOption()}
        style={{
          height: '100%',
          width: '65%',
          bgcolor: '#fff',
          '@media screen and (max-width:1536px)': {
            width: '60%'
          }
        }}
      />
    </Box>
  );
};

export default ManagedByTeamChart;