xit-opst-fo/src/ui-component/cards/AnalyticsChartCard.js

import PropTypes from 'prop-types';
import { useState } from 'react';

// material-ui
import { Box, Button, Grid, Menu, MenuItem, Typography } from '@mui/material';

// third party
import Chart from 'react-apexcharts';

// project imports
import MainCard from './MainCard';

// assets
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';

// ==========================|| ANALYTICS CHART CARD ||========================== //

const AnalyticsChartCard = ({ title, chartData, dropData, listData }) => {
  const [anchorEl, setAnchorEl] = useState(null);

  let dropHtml;
  if (dropData) {
    const handleClick = (event) => {
      setAnchorEl(event?.currentTarget);
    };

    const handleClose = () => {
      setAnchorEl(null);
    };

    dropHtml = (
      <>
        <Button variant="text" disableElevation size="small" aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
          {dropData.title}
        </Button>
        <Menu
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right'
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right'
          }}
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}
        >
          {dropData?.options.map((option, index) => (
            <MenuItem key={index} onClick={handleClose}>
              {option.label}
            </MenuItem>
          ))}
        </Menu>
      </>
    );
  }

  let listItem;
  if (listData) {
    listItem = listData.map((item, index) => (
      <Grid item key={index} sm={12}>
        <Box
          sx={{
            color: item.color
          }}
        >
          <Grid container spacing={2} justifyContent="center">
            <Grid item>{item.icon}</Grid>
            <Grid item>
              <Typography variant="subtitle1">{item.value}%</Typography>
            </Grid>
            <Grid item>
              {item.state === 1 && <ArrowUpwardIcon fontSize="inherit" color="inherit" />}
              {item.state === 0 && <ArrowDownwardIcon fontSize="inherit" color="inherit" />}
            </Grid>
            <Grid item>
              <Typography variant="subtitle1" color="inherit">
                {item.percentage}%
              </Typography>
            </Grid>
          </Grid>
        </Box>
      </Grid>
    ));
  }

  return (
    <MainCard>
      <Grid container justifyContent="space-between" alignItems="center">
        {title && (
          <Grid item>
            <Typography variant="subtitle1">{title}</Typography>
          </Grid>
        )}
        <Grid item>{dropHtml}</Grid>
      </Grid>
      <Grid container justifyContent="center" alignItems="center">
        <Grid item container direction="column" spacing={1} xs={12} sm={6}>
          <Box
            sx={{
              mt: 3,
              display: 'block'
            }}
          >
            {listItem}
          </Box>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Chart {...chartData} />
        </Grid>
      </Grid>
    </MainCard>
  );
};

AnalyticsChartCard.propTypes = {
  title: PropTypes.string,
  chartData: PropTypes.object,
  dropData: PropTypes.object,
  listData: PropTypes.array
};

export default AnalyticsChartCard;