125 lines
3.0 KiB
JavaScript
125 lines
3.0 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 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; |