116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
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 areaChartOptions = {
|
|
chart: {
|
|
type: 'donut',
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
offsetY: 10,
|
|
expandOnClick:false,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true
|
|
},
|
|
title: {
|
|
text: `${new Date().getFullYear()}년 ${new Date().getMonth() + 1}월`,
|
|
align: 'center'
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 200
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}],
|
|
grid: {
|
|
padding: {
|
|
bottom: -150
|
|
}
|
|
},
|
|
};
|
|
|
|
// ==============================|| REPORT AREA CHART ||============================== //
|
|
|
|
const ReportAreaChart = () => {
|
|
const theme = useTheme();
|
|
|
|
const { primary, secondary } = theme.palette.text;
|
|
const line = theme.palette.divider;
|
|
|
|
const [options, setOptions] = useState(areaChartOptions);
|
|
const [connectMethod, setConnectMethod] = useState([]);
|
|
|
|
// 메뉴 접속 및 방문자 수
|
|
const retrieveList = useCallback(() => {
|
|
const retrieveListURL = '/admin/dashboard/connect-method'
|
|
|
|
const requestOptions = {
|
|
method: "POST",
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
},
|
|
// body: JSON.stringify()
|
|
}
|
|
|
|
EgovNet.requestFetch(retrieveListURL,
|
|
requestOptions,
|
|
(resp) => {
|
|
setConnectMethod(resp.result.connectMethod[0]);
|
|
},
|
|
function (resp) {
|
|
console.log("err response : ", resp);
|
|
}
|
|
);
|
|
// eslint-disable-next-lie react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
retrieveList();
|
|
|
|
setOptions((prevState) => ({
|
|
...prevState,
|
|
labels: ['PC', 'Mobile'],
|
|
colors: ['#448EF7', '#FFC107'],
|
|
// colors: [theme.palette.warning.main],
|
|
grid: {
|
|
borderColor: line
|
|
},
|
|
tooltip: {
|
|
theme: 'light'
|
|
},
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
colors: 'grey.500'
|
|
}
|
|
}
|
|
}));
|
|
}, [primary, secondary, line, theme, retrieveList]);
|
|
|
|
const [series, setSeries] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setSeries(connectMethod);
|
|
}, [connectMethod]);
|
|
|
|
return <ReactApexChart options={options} series={series} type="donut" />;
|
|
};
|
|
|
|
export default ReportAreaChart;
|