kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/schedule/IncomeAreaChart.jsx

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

// material-ui
import { useTheme } from '@mui/material/styles';

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

import * as EgovNet from 'api/egovFetch';

// chart options
const areaChartOptions = {
    chart: {
        height: 450,
        type: 'area',
        toolbar: {
            show: false
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth',
        width: 2
    },
    grid: {
        strokeDashArray: 0
    }
};

// ==============================|| INCOME AREA CHART ||============================== //

const IncomeAreaChart = ({ slot }) => {
    const theme = useTheme();

    const { primary, secondary } = theme.palette.text;
    const line = theme.palette.divider;

    const [options, setOptions] = useState(areaChartOptions);
    const [menuMonthlyList, setMenuMonthlyList] = useState([]);
    const [menuDailyList, setMenuDailyList] = useState([]);
    const [loginMonthlyList, setLoginMonthlyList] = useState([]);
    const [loginDailyList, setLoginDailyList] = useState([]);

    // 메뉴 접속 및 방문자 수
    const retrieveList = useCallback(() => {
        const retrieveListURL = '/admin/dashboard/menu-login'

        const requestOptions = {
            method: "POST",
            headers: {
                'Content-type': 'application/json',
            },
            // body: JSON.stringify()
        }

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {
                setMenuMonthlyList(resp.result.menuMonthlyList);
                setMenuDailyList(resp.result.menuDailyList);
                setLoginMonthlyList(resp.result.loginMonthlyList);
                setLoginDailyList(resp.result.loginDailyList);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        // eslint-disable-next-lie react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        retrieveList();

        setOptions((prevState) => ({
            ...prevState,
            colors: [theme.palette.primary.main, theme.palette.primary[700]],
            xaxis: {
                categories:
                    slot === 'month'
                        ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                        : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                labels: {
                    style: {
                        colors: [
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary,
                            secondary
                        ]
                    }
                },
                axisBorder: {
                    show: true,
                    color: line
                },
                tickAmount: slot === 'month' ? 11 : 7
            },
            yaxis: {
                labels: {
                    style: {
                        colors: [secondary]
                    }
                }
            },
            grid: {
                borderColor: line
            },
            tooltip: {
                theme: 'light'
            }
        }));
    }, [primary, secondary, line, theme, slot, retrieveList]);

    const [series, setSeries] = useState([
        {
            name: 'Menu Views',
            data: menuDailyList
        },
        {
            name: 'Login Count',
            data: loginDailyList
        }
    ]);

    useEffect(() => {
        setSeries([
            {
                name: 'Menu Views',
                data: slot === 'month' ? menuMonthlyList : menuDailyList
            },
            {
                name: 'Login Count',
                data: slot === 'month' ? loginMonthlyList : loginDailyList
            }
        ]);
    }, [slot, menuMonthlyList, menuDailyList, loginMonthlyList, loginDailyList]);

    return <ReactApexChart options={options} series={series} type="area" height={450} />;
};

IncomeAreaChart.propTypes = {
    slot: PropTypes.string
};

export default IncomeAreaChart;