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

import {useCallback, useEffect, useState} 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 barChartOptions = {
    chart: {
        type: 'bar',
        height: 365,
        toolbar: {
            show: false
        }
    },
    plotOptions: {
        bar: {
            columnWidth: '45%',
            borderRadius: 4
        }
    },
    dataLabels: {
        enabled: true
    },
    xaxis: {
        categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        axisBorder: {
            show: false
        },
        axisTicks: {
            show: false
        }
    },
    yaxis: {
        show: false
    },
    grid: {
        show: false
    }
};

// ==============================|| MONTHLY BAR CHART ||============================== //

const MonthlyBarChart = ({ onDataFetched }) => {
    const theme = useTheme();

    const { primary, secondary } = theme.palette.text;
    const info = theme.palette.info.light;

    const [options, setOptions] = useState(barChartOptions);
    const [fileDailyList, setFileDailyList] = useState([]);

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

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

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {
                setFileDailyList(resp.result.fileDailyList);
                const sum = resp.result.fileDailyList.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
                onDataFetched(sum);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        // eslint-disable-next-lie react-hooks/exhaustive-deps
    }, []);

    const [series, setSeries] = useState([
        {
            name: '다운로드수',
            data: fileDailyList
        }
    ]);

    useEffect(() => {
        retrieveList();
    }, [onDataFetched]);

    useEffect(() => {
        setSeries([
            {
                data: fileDailyList
            },
        ]);

        setOptions((prevState) => ({
            ...prevState,
            colors: [info],
            xaxis: {
                labels: {
                    style: {
                        colors: [secondary, secondary, secondary, secondary, secondary, secondary, secondary]
                    }
                }
            },
            tooltip: {
                theme: 'light'
            },
        }));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [primary, info, secondary, fileDailyList]);

    return (
        <div id="chart">
            <ReactApexChart options={options} series={series} type="bar" height={365} />
        </div>
    );
};

export default MonthlyBarChart;