Dashboard 중간저장
parent
2bbd80d40b
commit
7936704abd
|
|
@ -22,6 +22,7 @@
|
|||
"prop-types": "^15.8.1",
|
||||
"qs": "^6.11.0",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.0",
|
||||
"react-bootstrap": "^2.9.0",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-csv": "^2.2.2",
|
||||
|
|
@ -5416,6 +5417,12 @@
|
|||
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
||||
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
|
||||
},
|
||||
"node_modules/@yr/monotone-cubic-spline": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/abab": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
|
|
@ -5659,6 +5666,21 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/apexcharts": {
|
||||
"version": "3.45.2",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.45.2.tgz",
|
||||
"integrity": "sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
|
|
@ -15479,6 +15501,18 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-apexcharts": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
|
||||
"integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"apexcharts": "^3.41.0",
|
||||
"react": ">=0.13"
|
||||
}
|
||||
},
|
||||
"node_modules/react-app-polyfill": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
||||
|
|
@ -17242,6 +17276,97 @@
|
|||
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
||||
},
|
||||
"node_modules/svg.draggable.js": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.easing.js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": ">=2.3.x"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.filter.js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.js": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/svg.pathmorphing.js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": "^2.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.select.js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
|
|
@ -22742,6 +22867,12 @@
|
|||
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
||||
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
|
||||
},
|
||||
"@yr/monotone-cubic-spline": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||
"peer": true
|
||||
},
|
||||
"abab": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
|
|
@ -22911,6 +23042,21 @@
|
|||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"apexcharts": {
|
||||
"version": "3.45.2",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.45.2.tgz",
|
||||
"integrity": "sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
|
|
@ -30026,6 +30172,14 @@
|
|||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-apexcharts": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
|
||||
"integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"react-app-polyfill": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
||||
|
|
@ -31328,6 +31482,78 @@
|
|||
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
||||
},
|
||||
"svg.draggable.js": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"svg.easing.js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": ">=2.3.x"
|
||||
}
|
||||
},
|
||||
"svg.filter.js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": "^2.2.5"
|
||||
}
|
||||
},
|
||||
"svg.js": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
|
||||
"peer": true
|
||||
},
|
||||
"svg.pathmorphing.js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"svg.resize.js": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.select.js": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": "^2.2.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"svg.select.js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"svg.js": "^2.6.5"
|
||||
}
|
||||
},
|
||||
"svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"qs": "^6.11.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.0",
|
||||
"react-bootstrap": "^2.9.0",
|
||||
"react-csv": "^2.2.2",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
|
|
|
|||
|
|
@ -1,227 +1,250 @@
|
|||
import React, {useState, useEffect, useCallback, PureComponent} from 'react';
|
||||
import {Link, useLocation} from 'react-router-dom';
|
||||
import React, {useState, useEffect, useCallback} from 'react'; // PureComponent
|
||||
import {Link} from 'react-router-dom'; //useLocation
|
||||
|
||||
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts';
|
||||
|
||||
import * as EgovNet from 'api/egovFetch';
|
||||
import URL from 'constants/url';
|
||||
import CODE from 'constants/code';
|
||||
// import CODE from 'constants/code';
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Box,
|
||||
Button,
|
||||
Grid,
|
||||
List,
|
||||
ListItemAvatar,
|
||||
ListItemButton,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
MenuItem,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import MainCard from 'components/cards/MainCard';
|
||||
import IncomeAreaChart from './IncomeAreaChart';
|
||||
import MonthlyBarChart from './MonthlyBarChart';
|
||||
import AnalyticEcommerce from 'components/cards/AnalyticEcommerce';
|
||||
|
||||
import {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin';
|
||||
|
||||
function EgovAdminScheduleList(props) {
|
||||
console.group("EgovAdminScheduleList");
|
||||
console.log("[Start] EgovAdminScheduleList ------------------------------");
|
||||
console.log("EgovAdminScheduleList [props] : ", props);
|
||||
// console.group("EgovAdminScheduleList");
|
||||
// console.log("[Start] EgovAdminScheduleList ------------------------------");
|
||||
// console.log("EgovAdminScheduleList [props] : ", props);
|
||||
|
||||
const location = useLocation();
|
||||
console.log("EgovAdminScheduleList [location] : ", location);
|
||||
// const location = useLocation();
|
||||
// console.log("EgovAdminScheduleList [location] : ", location);
|
||||
|
||||
const DATE = new Date();
|
||||
const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate());
|
||||
// const DATE = new Date();
|
||||
// const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate());
|
||||
//
|
||||
// const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate()});
|
||||
// const [calendarTag, setCalendarTag] = useState([]);
|
||||
//
|
||||
// const [scheduleList, setScheduleList] = useState([]);
|
||||
|
||||
const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate()});
|
||||
const [calendarTag, setCalendarTag] = useState([]);
|
||||
// const innerConsole = (...args) => {
|
||||
// console.log(...args);
|
||||
// }
|
||||
|
||||
// const getLastDateOfMonth = (year, month) => {
|
||||
// const LAST_DATE_SUPPLMENT = 1;
|
||||
// return new Date(year, month + LAST_DATE_SUPPLMENT, 0);
|
||||
// }
|
||||
// const getFirstDateOfMonth = (year, month) => {
|
||||
// return new Date(year, month, 1);
|
||||
// }
|
||||
|
||||
// const changeDate = (target, amount) => {
|
||||
// let changedDate;
|
||||
//
|
||||
// if (target === CODE.DATE_YEAR) {
|
||||
// changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date);
|
||||
// }
|
||||
//
|
||||
// if (target === CODE.DATE_MONTH) {
|
||||
// changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date);
|
||||
// }
|
||||
// setSearchCondition({...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate()});
|
||||
// }
|
||||
|
||||
// const retrieveList = useCallback((srchcnd) => {
|
||||
// console.groupCollapsed("EgovAdminScheduleList.retrieveList()");
|
||||
//
|
||||
// const retrieveListURL = '/schedule/month' + EgovNet.getQueryString(srchcnd);
|
||||
//
|
||||
// const requestOptions = {
|
||||
// method: "GET",
|
||||
// headers: {
|
||||
// 'Content-type': 'application/json',
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// EgovNet.requestFetch(retrieveListURL,
|
||||
// requestOptions,
|
||||
// (resp) => {
|
||||
// setScheduleList(resp.result.resultList);
|
||||
// },
|
||||
// function (resp) {
|
||||
// console.log("err response : ", resp);
|
||||
// }
|
||||
// );
|
||||
// console.groupEnd("EgovAdminScheduleList.retrieveList()");
|
||||
// }, []);
|
||||
|
||||
// const drawCalendar = () => {
|
||||
// console.groupCollapsed("EgovAdminScheduleList.drawCalendar()");
|
||||
// const PREV_MONTH_ADDITION = -1;
|
||||
//
|
||||
// let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION);
|
||||
// let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month);
|
||||
// let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month);
|
||||
//
|
||||
// console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay());
|
||||
// console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay());
|
||||
// console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay());
|
||||
// console.log("scheduleList : ", scheduleList);
|
||||
//
|
||||
// let firstDayOfThisMonth = firstOfThisMonth.getDay();
|
||||
// let lastDateOfThisMonth = lastOfThisMonth.getDate();
|
||||
// console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth)
|
||||
//
|
||||
// let monthArr = [];
|
||||
// let weekArr = [];
|
||||
//
|
||||
// // firstWeek Date Set START
|
||||
// let firstWeekDateCount = 0;
|
||||
// for (let day = 0; day < 7; day++) {
|
||||
// if (day < firstDayOfThisMonth) { //
|
||||
// weekArr.push(0);
|
||||
// firstWeekDateCount = 0;
|
||||
// } else {
|
||||
// weekArr.push(++firstWeekDateCount);
|
||||
// }
|
||||
// }
|
||||
// monthArr.push(weekArr);
|
||||
// console.log("FirstWeek monthArr : ", monthArr);
|
||||
// // firstWeek Date Set END
|
||||
//
|
||||
// // otherWeek Date Set START
|
||||
// let dayCount = 0;
|
||||
// weekArr = [];//초기화
|
||||
// for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) {
|
||||
//
|
||||
// if (dayCount % 7 !== 6) {
|
||||
// weekArr.push(day);
|
||||
// } else {
|
||||
// weekArr.push(day);
|
||||
// monthArr.push(weekArr);
|
||||
// weekArr = [];
|
||||
// dayCount = -1;
|
||||
// }
|
||||
// dayCount++;
|
||||
// }
|
||||
// // otherWeek Date Set END
|
||||
//
|
||||
// // lastWeek Date Set START
|
||||
// if (weekArr.length > 0) {//남은 부분
|
||||
// for (let day = weekArr.length; day < 7; day++) {
|
||||
// weekArr.push(0);
|
||||
// }
|
||||
// monthArr.push(weekArr);
|
||||
// }
|
||||
// // lastWeek Date Set END
|
||||
// console.log("OtherWeek monthArr : ", monthArr);
|
||||
//
|
||||
// let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString());
|
||||
// console.log("mutsUseYearMonth : ", mutsUseYearMonth);
|
||||
//
|
||||
// let mutCalendarTagList = [];
|
||||
// let keyIdx = 0;
|
||||
//
|
||||
// //draw Calendar
|
||||
// monthArr.forEach((week, weekIdx) => {
|
||||
// console.log();
|
||||
// mutCalendarTagList.push(
|
||||
// <tr key={keyIdx++}>{
|
||||
// week.map((day, dayIdx) => {
|
||||
// if (day !== 0) {//당월 일별 구현
|
||||
// let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString();
|
||||
// let iUseDate = Number(mutsUseYearMonth + sDate);
|
||||
// if (scheduleList.length > 0) {//일정 있는 경우
|
||||
// return (
|
||||
// <td key={keyIdx++}>
|
||||
// <Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
||||
// key={keyIdx++}>{day}</Link><br/>
|
||||
// {
|
||||
// scheduleList.map((schedule, scheduleIdx) => {
|
||||
// let iBeginDate = Number(schedule.schdulBgnde.substring(0, 8));
|
||||
// let iEndDate = Number(schedule.schdulEndde.substring(0, 8));
|
||||
// innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate);
|
||||
// innerConsole("schedule.schdulId ", schedule.schdulId);
|
||||
// if (iUseDate >= iBeginDate && iUseDate <= iEndDate) {
|
||||
// return (
|
||||
// <>
|
||||
// <Link to={{pathname: URL.ADMIN_SCHEDULE_DETAIL}}
|
||||
// state={{schdulId: schedule.schdulId}}
|
||||
// key={keyIdx++}>{schedule.schdulNm}
|
||||
// </Link>
|
||||
// <br/>
|
||||
// </>
|
||||
// );
|
||||
// } else return <></>
|
||||
// })
|
||||
// }
|
||||
// </td>
|
||||
// );
|
||||
// } else {//일정 없는 경우
|
||||
// return (
|
||||
// <td key={keyIdx++}>
|
||||
// <Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
||||
// key={keyIdx++}>{day}</Link><br/>
|
||||
// </td>);
|
||||
// }
|
||||
// } else if (day === 0) {// 이전달/다음달 구현
|
||||
// return (<td key={keyIdx++}></td>);
|
||||
// } else return <></>
|
||||
// })
|
||||
// }</tr>);
|
||||
// })
|
||||
// console.log("mutCalendarTagList : ", mutCalendarTagList);
|
||||
// setCalendarTag(mutCalendarTagList);
|
||||
// console.groupEnd("EgovAdminScheduleList.drawCalendar()");
|
||||
// }
|
||||
|
||||
// const Location = React.memo(function Location() {
|
||||
// return (
|
||||
// <div className="location">
|
||||
// <ul>
|
||||
// <li><Link to={URL.MAIN} className="home">Home</Link></li>
|
||||
// <li><Link to={URL.ADMIN}>사이트관리</Link></li>
|
||||
// <li>Dashboard</li>
|
||||
// </ul>
|
||||
// </div>
|
||||
// )
|
||||
// });
|
||||
|
||||
// useEffect(() => {
|
||||
// //retrieveList(searchCondition); disabled by thkim
|
||||
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// }, [searchCondition]);
|
||||
|
||||
// useEffect(() => {
|
||||
// drawCalendar();
|
||||
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// }, [scheduleList]);
|
||||
|
||||
const [scheduleList, setScheduleList] = useState([]);
|
||||
const [dailyUserLogList, setDailyUserLogList] = useState([]);
|
||||
|
||||
const innerConsole = (...args) => {
|
||||
console.log(...args);
|
||||
}
|
||||
|
||||
const getLastDateOfMonth = (year, month) => {
|
||||
const LAST_DATE_SUPPLMENT = 1;
|
||||
return new Date(year, month + LAST_DATE_SUPPLMENT, 0);
|
||||
}
|
||||
const getFirstDateOfMonth = (year, month) => {
|
||||
return new Date(year, month, 1);
|
||||
}
|
||||
|
||||
const changeDate = (target, amount) => {
|
||||
let changedDate;
|
||||
|
||||
if (target === CODE.DATE_YEAR) {
|
||||
changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date);
|
||||
}
|
||||
|
||||
if (target === CODE.DATE_MONTH) {
|
||||
changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date);
|
||||
}
|
||||
setSearchCondition({...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate()});
|
||||
}
|
||||
|
||||
const retrieveList = useCallback((srchcnd) => {
|
||||
console.groupCollapsed("EgovAdminScheduleList.retrieveList()");
|
||||
|
||||
const retrieveListURL = '/schedule/month' + EgovNet.getQueryString(srchcnd);
|
||||
|
||||
const requestOptions = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
}
|
||||
}
|
||||
|
||||
EgovNet.requestFetch(retrieveListURL,
|
||||
requestOptions,
|
||||
(resp) => {
|
||||
setScheduleList(resp.result.resultList);
|
||||
},
|
||||
function (resp) {
|
||||
console.log("err response : ", resp);
|
||||
}
|
||||
);
|
||||
console.groupEnd("EgovAdminScheduleList.retrieveList()");
|
||||
}, []);
|
||||
|
||||
const drawCalendar = () => {
|
||||
console.groupCollapsed("EgovAdminScheduleList.drawCalendar()");
|
||||
const PREV_MONTH_ADDITION = -1;
|
||||
|
||||
let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION);
|
||||
let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month);
|
||||
let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month);
|
||||
|
||||
console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay());
|
||||
console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay());
|
||||
console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay());
|
||||
console.log("scheduleList : ", scheduleList);
|
||||
|
||||
let firstDayOfThisMonth = firstOfThisMonth.getDay();
|
||||
let lastDateOfThisMonth = lastOfThisMonth.getDate();
|
||||
console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth)
|
||||
|
||||
let monthArr = [];
|
||||
let weekArr = [];
|
||||
|
||||
// firstWeek Date Set START
|
||||
let firstWeekDateCount = 0;
|
||||
for (let day = 0; day < 7; day++) {
|
||||
if (day < firstDayOfThisMonth) { //
|
||||
weekArr.push(0);
|
||||
firstWeekDateCount = 0;
|
||||
} else {
|
||||
weekArr.push(++firstWeekDateCount);
|
||||
}
|
||||
}
|
||||
monthArr.push(weekArr);
|
||||
console.log("FirstWeek monthArr : ", monthArr);
|
||||
// firstWeek Date Set END
|
||||
|
||||
// otherWeek Date Set START
|
||||
let dayCount = 0;
|
||||
weekArr = [];//초기화
|
||||
for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) {
|
||||
|
||||
if (dayCount % 7 !== 6) {
|
||||
weekArr.push(day);
|
||||
} else {
|
||||
weekArr.push(day);
|
||||
monthArr.push(weekArr);
|
||||
weekArr = [];
|
||||
dayCount = -1;
|
||||
}
|
||||
dayCount++;
|
||||
}
|
||||
// otherWeek Date Set END
|
||||
|
||||
// lastWeek Date Set START
|
||||
if (weekArr.length > 0) {//남은 부분
|
||||
for (let day = weekArr.length; day < 7; day++) {
|
||||
weekArr.push(0);
|
||||
}
|
||||
monthArr.push(weekArr);
|
||||
}
|
||||
// lastWeek Date Set END
|
||||
console.log("OtherWeek monthArr : ", monthArr);
|
||||
|
||||
let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString());
|
||||
console.log("mutsUseYearMonth : ", mutsUseYearMonth);
|
||||
|
||||
let mutCalendarTagList = [];
|
||||
let keyIdx = 0;
|
||||
|
||||
//draw Calendar
|
||||
monthArr.forEach((week, weekIdx) => {
|
||||
console.log();
|
||||
mutCalendarTagList.push(
|
||||
<tr key={keyIdx++}>{
|
||||
week.map((day, dayIdx) => {
|
||||
if (day !== 0) {//당월 일별 구현
|
||||
let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString();
|
||||
let iUseDate = Number(mutsUseYearMonth + sDate);
|
||||
if (scheduleList.length > 0) {//일정 있는 경우
|
||||
return (
|
||||
<td key={keyIdx++}>
|
||||
<Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
||||
key={keyIdx++}>{day}</Link><br/>
|
||||
{
|
||||
scheduleList.map((schedule, scheduleIdx) => {
|
||||
let iBeginDate = Number(schedule.schdulBgnde.substring(0, 8));
|
||||
let iEndDate = Number(schedule.schdulEndde.substring(0, 8));
|
||||
innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate);
|
||||
innerConsole("schedule.schdulId ", schedule.schdulId);
|
||||
if (iUseDate >= iBeginDate && iUseDate <= iEndDate) {
|
||||
return (
|
||||
<>
|
||||
<Link to={{pathname: URL.ADMIN_SCHEDULE_DETAIL}}
|
||||
state={{schdulId: schedule.schdulId}}
|
||||
key={keyIdx++}>{schedule.schdulNm}
|
||||
</Link>
|
||||
<br/>
|
||||
</>
|
||||
);
|
||||
} else return <></>
|
||||
})
|
||||
}
|
||||
</td>
|
||||
);
|
||||
} else {//일정 없는 경우
|
||||
return (
|
||||
<td key={keyIdx++}>
|
||||
<Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
||||
key={keyIdx++}>{day}</Link><br/>
|
||||
</td>);
|
||||
}
|
||||
} else if (day === 0) {// 이전달/다음달 구현
|
||||
return (<td key={keyIdx++}></td>);
|
||||
} else return <></>
|
||||
})
|
||||
}</tr>);
|
||||
})
|
||||
console.log("mutCalendarTagList : ", mutCalendarTagList);
|
||||
setCalendarTag(mutCalendarTagList);
|
||||
console.groupEnd("EgovAdminScheduleList.drawCalendar()");
|
||||
}
|
||||
|
||||
const Location = React.memo(function Location() {
|
||||
return (
|
||||
<div className="location">
|
||||
<ul>
|
||||
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
||||
<li><Link to={URL.ADMIN}>사이트관리</Link></li>
|
||||
<li>일정관리</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
//retrieveList(searchCondition); disabled by thkim
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchCondition]);
|
||||
|
||||
useEffect(() => {
|
||||
drawCalendar();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scheduleList]);
|
||||
|
||||
const [isDailyChart, setChart] = useState(true);
|
||||
const [isDailyChart, setIsDailyChart] = useState(true);
|
||||
|
||||
const getDailyUserLogList = useCallback(() => {
|
||||
console.groupCollapsed("EgovAdminScheduleList.getDailyUserLogList()");
|
||||
|
||||
console.log("@@@ isDailyChart : " + isDailyChart);
|
||||
// console.groupCollapsed("EgovAdminScheduleList.getDailyUserLogList()");
|
||||
//
|
||||
// console.log("@@@ isDailyChart : " + isDailyChart);
|
||||
|
||||
const dailyUserLogListURL = isDailyChart ? '/admin/dashboard/daily-user-log-list' : '/admin/dashboard/monthly-user-log-list';
|
||||
|
||||
|
|
@ -236,13 +259,14 @@ function EgovAdminScheduleList(props) {
|
|||
requestOptions,
|
||||
(resp) => {
|
||||
setDailyUserLogList(resp.result.dailyUserLogList);
|
||||
console.log("@@@ : " + dailyUserLogList);
|
||||
// console.log("@@@ : " + dailyUserLogList);
|
||||
},
|
||||
function (resp) {
|
||||
console.log("err response : ", resp);
|
||||
// console.log("err response : ", resp);
|
||||
}
|
||||
);
|
||||
console.groupEnd("EgovAdminScheduleList.getDailyUserLogList()");
|
||||
// console.groupEnd("EgovAdminScheduleList.getDailyUserLogList()");
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isDailyChart]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -251,7 +275,7 @@ function EgovAdminScheduleList(props) {
|
|||
}, [isDailyChart]);
|
||||
|
||||
const handleChartToggle = () => {
|
||||
setChart(!isDailyChart);
|
||||
setIsDailyChart(!isDailyChart);
|
||||
};
|
||||
|
||||
const ChartToggle = ({onToggle}) => {
|
||||
|
|
@ -287,42 +311,49 @@ function EgovAdminScheduleList(props) {
|
|||
return null;
|
||||
};
|
||||
|
||||
class UserLogChart extends PureComponent {
|
||||
static demoUrl = 'https://codesandbox.io/s/tooltip-with-customized-content-lyxvs';
|
||||
// class UserLogChart extends PureComponent {
|
||||
// render() {
|
||||
// return (
|
||||
// <ResponsiveContainer width="100%" height="100%">
|
||||
// <BarChart
|
||||
// width={500}
|
||||
// height={300}
|
||||
// data={data}
|
||||
// margin={{
|
||||
// top: 5,
|
||||
// right: 30,
|
||||
// left: 20,
|
||||
// bottom: 5,
|
||||
// }}
|
||||
// >
|
||||
// <CartesianGrid strokeDasharray="3 3"/>
|
||||
// <XAxis dataKey="logDt"/>
|
||||
// <YAxis/>
|
||||
// <Tooltip content={<CustomTooltip/>}/>
|
||||
// <Legend/>
|
||||
// <Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>
|
||||
// </BarChart>
|
||||
// </ResponsiveContainer>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
width={500}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3"/>
|
||||
<XAxis dataKey="logDt"/>
|
||||
<YAxis/>
|
||||
<Tooltip content={<CustomTooltip/>}/>
|
||||
<Legend/>
|
||||
<Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
// console.log("------------------------------EgovAdminScheduleList [End]");
|
||||
// console.groupEnd("EgovAdminScheduleList");
|
||||
const [value, setValue] = useState('today');
|
||||
const [slot, setSlot] = useState('week');
|
||||
|
||||
console.log("------------------------------EgovAdminScheduleList [End]");
|
||||
console.groupEnd("EgovAdminScheduleList");
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="c_wrap">
|
||||
{/* <!-- Location --> */}
|
||||
<Location/>
|
||||
<div className="location">
|
||||
<ul>
|
||||
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
||||
<li><Link to={URL.ADMIN} >사이트관리</Link></li>
|
||||
<li>Dashboard</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* <!--// Location --> */}
|
||||
|
||||
<div className="layout">
|
||||
|
|
@ -334,16 +365,299 @@ function EgovAdminScheduleList(props) {
|
|||
{/* <!-- 본문 --> */}
|
||||
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">사이트관리</h1>
|
||||
<h1 className="tit_1">Dashboard</h1>
|
||||
</div>
|
||||
|
||||
<h2 className="tit_2"></h2>
|
||||
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
|
||||
{/* row 1 */}
|
||||
{/*<Grid item xs={12} sx={{ mb: -2.25 }}>*/}
|
||||
{/* <Typography variant="h5">Dashboard</Typography>*/}
|
||||
{/*</Grid>*/}
|
||||
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||
<AnalyticEcommerce title="총접속자수" count="4,42,236" percentage={59.3} extra="35,000" />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||
<AnalyticEcommerce title="총 DB구축 건수" count="78,250" percentage={70.5} extra="8,900" />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||
<AnalyticEcommerce title="최근 1달 기준코드 등록건수" count="18,800" percentage={27.4} isLoss color="warning" extra="1,943" />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||
<AnalyticEcommerce title="미답변 민원건수" count="$35,078" percentage={27.4} isLoss color="warning" extra="$20,395" />
|
||||
</Grid>
|
||||
|
||||
<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>
|
||||
<Grid item md={8} sx={{ display: { sm: 'none', md: 'block', lg: 'none' } }} />
|
||||
|
||||
<div style={{width: 1000, height: 300}}>
|
||||
<UserLogChart/>
|
||||
</div>
|
||||
{/* row 2 */}
|
||||
<Grid item xs={12} md={7} lg={8}>
|
||||
<Grid container alignItems="center" justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Typography variant="h5">Unique Visitor</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Stack direction="row" alignItems="center" spacing={0}>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => setSlot('month')}
|
||||
color={slot === 'month' ? 'primary' : 'secondary'}
|
||||
variant={slot === 'month' ? 'outlined' : 'text'}
|
||||
>
|
||||
Month
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => setSlot('week')}
|
||||
color={slot === 'week' ? 'primary' : 'secondary'}
|
||||
variant={slot === 'week' ? 'outlined' : 'text'}
|
||||
>
|
||||
Week
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MainCard content={false} sx={{ mt: 1.5 }}>
|
||||
<Box sx={{ pt: 1, pr: 2 }}>
|
||||
<IncomeAreaChart slot={slot} />
|
||||
</Box>
|
||||
</MainCard>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={5} lg={4}>
|
||||
<Grid container alignItems="center" justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Typography variant="h5">Income Overview</Typography>
|
||||
</Grid>
|
||||
<Grid item />
|
||||
</Grid>
|
||||
<MainCard sx={{ mt: 2 }} content={false}>
|
||||
<Box sx={{ p: 3, pb: 0 }}>
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
This Week Statistics
|
||||
</Typography>
|
||||
<Typography variant="h3">$7,650</Typography>
|
||||
</Stack>
|
||||
</Box>
|
||||
<MonthlyBarChart />
|
||||
</MainCard>
|
||||
</Grid>
|
||||
|
||||
{/*/!* row 3 *!/*/}
|
||||
{/*<Grid item xs={12} md={7} lg={8}>*/}
|
||||
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <Typography variant="h5">Recent Orders</Typography>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <Grid item />*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <MainCard sx={{ mt: 2 }} content={false}>*/}
|
||||
{/* <OrdersTable />*/}
|
||||
{/* </MainCard>*/}
|
||||
{/*</Grid>*/}
|
||||
{/*<Grid item xs={12} md={5} lg={4}>*/}
|
||||
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <Typography variant="h5">Analytics Report</Typography>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <Grid item />*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <MainCard sx={{ mt: 2 }} content={false}>*/}
|
||||
{/* <List sx={{ p: 0, '& .MuiListItemButton-root': { py: 2 } }}>*/}
|
||||
{/* <ListItemButton divider>*/}
|
||||
{/* <ListItemText primary="Company Finance Growth" />*/}
|
||||
{/* <Typography variant="h5">+45.14%</Typography>*/}
|
||||
{/* </ListItemButton>*/}
|
||||
{/* <ListItemButton divider>*/}
|
||||
{/* <ListItemText primary="Company Expenses Ratio" />*/}
|
||||
{/* <Typography variant="h5">0.58%</Typography>*/}
|
||||
{/* </ListItemButton>*/}
|
||||
{/* <ListItemButton>*/}
|
||||
{/* <ListItemText primary="Business Risk Cases" />*/}
|
||||
{/* <Typography variant="h5">Low</Typography>*/}
|
||||
{/* </ListItemButton>*/}
|
||||
{/* </List>*/}
|
||||
{/* <ReportAreaChart />*/}
|
||||
{/* </MainCard>*/}
|
||||
{/*</Grid>*/}
|
||||
|
||||
{/*/!* row 4 *!/*/}
|
||||
{/*<Grid item xs={12} md={7} lg={8}>*/}
|
||||
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <Typography variant="h5">Sales Report</Typography>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <TextField*/}
|
||||
{/* id="standard-select-currency"*/}
|
||||
{/* size="small"*/}
|
||||
{/* select*/}
|
||||
{/* value={value}*/}
|
||||
{/* onChange={(e) => setValue(e.target.value)}*/}
|
||||
{/* sx={{ '& .MuiInputBase-input': { py: 0.5, fontSize: '0.875rem' } }}*/}
|
||||
{/* >*/}
|
||||
{/* {status.map((option) => (*/}
|
||||
{/* <MenuItem key={option.value} value={option.value}>*/}
|
||||
{/* {option.label}*/}
|
||||
{/* </MenuItem>*/}
|
||||
{/* ))}*/}
|
||||
{/* </TextField>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <MainCard sx={{ mt: 1.75 }}>*/}
|
||||
{/* <Stack spacing={1.5} sx={{ mb: -12 }}>*/}
|
||||
{/* <Typography variant="h6" color="secondary">*/}
|
||||
{/* Net Profit*/}
|
||||
{/* </Typography>*/}
|
||||
{/* <Typography variant="h4">$1560</Typography>*/}
|
||||
{/* </Stack>*/}
|
||||
{/* <SalesColumnChart />*/}
|
||||
{/* </MainCard>*/}
|
||||
{/*</Grid>*/}
|
||||
{/*<Grid item xs={12} md={5} lg={4}>*/}
|
||||
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <Typography variant="h5">Transaction History</Typography>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <Grid item />*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <MainCard sx={{ mt: 2 }} content={false}>*/}
|
||||
{/* <List*/}
|
||||
{/* component="nav"*/}
|
||||
{/* sx={{*/}
|
||||
{/* px: 0,*/}
|
||||
{/* py: 0,*/}
|
||||
{/* '& .MuiListItemButton-root': {*/}
|
||||
{/* py: 1.5,*/}
|
||||
{/* '& .MuiAvatar-root': avatarSX,*/}
|
||||
{/* '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }*/}
|
||||
{/* }*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <ListItemButton divider>*/}
|
||||
{/* <ListItemAvatar>*/}
|
||||
{/* <Avatar*/}
|
||||
{/* sx={{*/}
|
||||
{/* color: 'success.main',*/}
|
||||
{/* bgcolor: 'success.lighter'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <GiftOutlined />*/}
|
||||
{/* </Avatar>*/}
|
||||
{/* </ListItemAvatar>*/}
|
||||
{/* <ListItemText primary={<Typography variant="subtitle1">Order #002434</Typography>} secondary="Today, 2:00 AM" />*/}
|
||||
{/* <ListItemSecondaryAction>*/}
|
||||
{/* <Stack alignItems="flex-end">*/}
|
||||
{/* <Typography variant="subtitle1" noWrap>*/}
|
||||
{/* + $1,430*/}
|
||||
{/* </Typography>*/}
|
||||
{/* <Typography variant="h6" color="secondary" noWrap>*/}
|
||||
{/* 78%*/}
|
||||
{/* </Typography>*/}
|
||||
{/* </Stack>*/}
|
||||
{/* </ListItemSecondaryAction>*/}
|
||||
{/* </ListItemButton>*/}
|
||||
{/* <ListItemButton divider>*/}
|
||||
{/* <ListItemAvatar>*/}
|
||||
{/* <Avatar*/}
|
||||
{/* sx={{*/}
|
||||
{/* color: 'primary.main',*/}
|
||||
{/* bgcolor: 'primary.lighter'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <MessageOutlined />*/}
|
||||
{/* </Avatar>*/}
|
||||
{/* </ListItemAvatar>*/}
|
||||
{/* <ListItemText primary={<Typography variant="subtitle1">Order #984947</Typography>} secondary="5 August, 1:45 PM" />*/}
|
||||
{/* <ListItemSecondaryAction>*/}
|
||||
{/* <Stack alignItems="flex-end">*/}
|
||||
{/* <Typography variant="subtitle1" noWrap>*/}
|
||||
{/* + $302*/}
|
||||
{/* </Typography>*/}
|
||||
{/* <Typography variant="h6" color="secondary" noWrap>*/}
|
||||
{/* 8%*/}
|
||||
{/* </Typography>*/}
|
||||
{/* </Stack>*/}
|
||||
{/* </ListItemSecondaryAction>*/}
|
||||
{/* </ListItemButton>*/}
|
||||
{/* <ListItemButton>*/}
|
||||
{/* <ListItemAvatar>*/}
|
||||
{/* <Avatar*/}
|
||||
{/* sx={{*/}
|
||||
{/* color: 'error.main',*/}
|
||||
{/* bgcolor: 'error.lighter'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <SettingOutlined />*/}
|
||||
{/* </Avatar>*/}
|
||||
{/* </ListItemAvatar>*/}
|
||||
{/* <ListItemText primary={<Typography variant="subtitle1">Order #988784</Typography>} secondary="7 hours ago" />*/}
|
||||
{/* <ListItemSecondaryAction>*/}
|
||||
{/* <Stack alignItems="flex-end">*/}
|
||||
{/* <Typography variant="subtitle1" noWrap>*/}
|
||||
{/* + $682*/}
|
||||
{/* </Typography>*/}
|
||||
{/* <Typography variant="h6" color="secondary" noWrap>*/}
|
||||
{/* 16%*/}
|
||||
{/* </Typography>*/}
|
||||
{/* </Stack>*/}
|
||||
{/* </ListItemSecondaryAction>*/}
|
||||
{/* </ListItemButton>*/}
|
||||
{/* </List>*/}
|
||||
{/* </MainCard>*/}
|
||||
{/* <MainCard sx={{ mt: 2 }}>*/}
|
||||
{/* <Stack spacing={3}>*/}
|
||||
{/* <Grid container justifyContent="space-between" alignItems="center">*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <Stack>*/}
|
||||
{/* <Typography variant="h5" noWrap>*/}
|
||||
{/* Help & Support Chat*/}
|
||||
{/* </Typography>*/}
|
||||
{/* <Typography variant="caption" color="secondary" noWrap>*/}
|
||||
{/* Typical replay within 5 min*/}
|
||||
{/* </Typography>*/}
|
||||
{/* </Stack>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <Grid item>*/}
|
||||
{/* <AvatarGroup sx={{ '& .MuiAvatar-root': { width: 32, height: 32 } }}>*/}
|
||||
{/* <Avatar alt="Remy Sharp" src={avatar1} />*/}
|
||||
{/* <Avatar alt="Travis Howard" src={avatar2} />*/}
|
||||
{/* <Avatar alt="Cindy Baker" src={avatar3} />*/}
|
||||
{/* <Avatar alt="Agnes Walker" src={avatar4} />*/}
|
||||
{/* </AvatarGroup>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* <Button size="small" variant="contained" sx={{ textTransform: 'capitalize' }}>*/}
|
||||
{/* Need Help?*/}
|
||||
{/* </Button>*/}
|
||||
{/* </Stack>*/}
|
||||
{/* </MainCard>*/}
|
||||
{/*</Grid>*/}
|
||||
</Grid>
|
||||
|
||||
|
||||
{/*<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>*/}
|
||||
|
||||
{/*<div style={{width: 1000, height: 300}}>*/}
|
||||
{/* <ResponsiveContainer width="100%" height="100%">*/}
|
||||
{/* <BarChart*/}
|
||||
{/* width={500}*/}
|
||||
{/* height={300}*/}
|
||||
{/* data={data}*/}
|
||||
{/* margin={{*/}
|
||||
{/* top: 5,*/}
|
||||
{/* right: 30,*/}
|
||||
{/* left: 20,*/}
|
||||
{/* bottom: 5,*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <CartesianGrid strokeDasharray="3 3"/>*/}
|
||||
{/* <XAxis dataKey="logDt"/>*/}
|
||||
{/* <YAxis/>*/}
|
||||
{/* <Tooltip content={<CustomTooltip/>}/>*/}
|
||||
{/* <Legend/>*/}
|
||||
{/* <Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>*/}
|
||||
{/* </BarChart>*/}
|
||||
{/* </ResponsiveContainer>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
// third-party
|
||||
import ReactApexChart from 'react-apexcharts';
|
||||
|
||||
// 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);
|
||||
|
||||
useEffect(() => {
|
||||
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]);
|
||||
|
||||
const [series, setSeries] = useState([
|
||||
{
|
||||
name: 'Page Views',
|
||||
data: [0, 86, 28, 115, 48, 210, 136]
|
||||
},
|
||||
{
|
||||
name: 'Sessions',
|
||||
data: [0, 43, 14, 56, 24, 105, 68]
|
||||
}
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
setSeries([
|
||||
{
|
||||
name: 'Page Views',
|
||||
data: slot === 'month' ? [76, 85, 101, 98, 87, 105, 91, 114, 94, 86, 115, 35] : [31, 40, 28, 51, 42, 109, 100]
|
||||
},
|
||||
{
|
||||
name: 'Sessions',
|
||||
data: slot === 'month' ? [110, 60, 150, 35, 60, 36, 26, 45, 65, 52, 53, 41] : [11, 32, 45, 32, 34, 52, 41]
|
||||
}
|
||||
]);
|
||||
}, [slot]);
|
||||
|
||||
return <ReactApexChart options={options} series={series} type="area" height={450} />;
|
||||
};
|
||||
|
||||
IncomeAreaChart.propTypes = {
|
||||
slot: PropTypes.string
|
||||
};
|
||||
|
||||
export default IncomeAreaChart;
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
// third-party
|
||||
import ReactApexChart from 'react-apexcharts';
|
||||
|
||||
// chart options
|
||||
const barChartOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 365,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
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 = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
const { primary, secondary } = theme.palette.text;
|
||||
const info = theme.palette.info.light;
|
||||
|
||||
const [series] = useState([
|
||||
{
|
||||
data: [80, 95, 70, 42, 65, 55, 78]
|
||||
}
|
||||
]);
|
||||
|
||||
const [options, setOptions] = useState(barChartOptions);
|
||||
|
||||
useEffect(() => {
|
||||
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]);
|
||||
|
||||
return (
|
||||
<div id="chart">
|
||||
<ReactApexChart options={options} series={series} type="bar" height={365} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonthlyBarChart;
|
||||
Loading…
Reference in New Issue