diff --git a/egovframe-template-simple-react-contribution/package-lock.json b/egovframe-template-simple-react-contribution/package-lock.json index 061f257..b32df1b 100644 --- a/egovframe-template-simple-react-contribution/package-lock.json +++ b/egovframe-template-simple-react-contribution/package-lock.json @@ -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", diff --git a/egovframe-template-simple-react-contribution/package.json b/egovframe-template-simple-react-contribution/package.json index 42ee56a..20fcc98 100644 --- a/egovframe-template-simple-react-contribution/package.json +++ b/egovframe-template-simple-react-contribution/package.json @@ -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", diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx index 102a467..6d03683 100644 --- a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/EgovAdminScheduleList.jsx @@ -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( + // { + // 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 ( + // + // {day}
+ // { + // 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 ( + // <> + // {schedule.schdulNm} + // + //
+ // + // ); + // } else return <> + // }) + // } + // + // ); + // } else {//일정 없는 경우 + // return ( + // + // {day}
+ // ); + // } + // } else if (day === 0) {// 이전달/다음달 구현 + // return (); + // } else return <> + // }) + // }); + // }) + // console.log("mutCalendarTagList : ", mutCalendarTagList); + // setCalendarTag(mutCalendarTagList); + // console.groupEnd("EgovAdminScheduleList.drawCalendar()"); + // } + + // const Location = React.memo(function Location() { + // return ( + //
+ // + //
+ // ) + // }); + + // 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( - { - 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 ( - - {day}
- { - 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 ( - <> - {schedule.schdulNm} - -
- - ); - } else return <> - }) - } - - ); - } else {//일정 없는 경우 - return ( - - {day}
- ); - } - } else if (day === 0) {// 이전달/다음달 구현 - return (); - } else return <> - }) - }); - }) - console.log("mutCalendarTagList : ", mutCalendarTagList); - setCalendarTag(mutCalendarTagList); - console.groupEnd("EgovAdminScheduleList.drawCalendar()"); - } - - const Location = React.memo(function Location() { - return ( -
- -
- ) - }); - - 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 ( + // + // + // + // + // + // }/> + // + // + // + // + // ); + // } + // } - render() { - return ( - - - - - - }/> - - - - - ); - } - } + // 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 (
{/* */} - +
+
    +
  • Home
    • +
  • 사이트관리
    • +
  • Dashboard
    • +
+
{/* */}
@@ -334,16 +365,299 @@ function EgovAdminScheduleList(props) { {/* */}
-

사이트관리

+

Dashboard

-

+ + {/* row 1 */} + {/**/} + {/* Dashboard*/} + {/**/} + + + + + + + + + + + + - + -
- -
+ {/* row 2 */} + + + + Unique Visitor + + + + + + + + + + + + + + + + + + Income Overview + + + + + + + + This Week Statistics + + $7,650 + + + + + + + {/*/!* row 3 *!/*/} + {/**/} + {/* */} + {/* */} + {/* Recent Orders*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/**/} + {/* */} + {/* */} + {/* Analytics Report*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* +45.14%*/} + {/* */} + {/* */} + {/* */} + {/* 0.58%*/} + {/* */} + {/* */} + {/* */} + {/* Low*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + + {/*/!* row 4 *!/*/} + {/**/} + {/* */} + {/* */} + {/* Sales Report*/} + {/* */} + {/* */} + {/* setValue(e.target.value)}*/} + {/* sx={{ '& .MuiInputBase-input': { py: 0.5, fontSize: '0.875rem' } }}*/} + {/* >*/} + {/* {status.map((option) => (*/} + {/* */} + {/* {option.label}*/} + {/* */} + {/* ))}*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Net Profit*/} + {/* */} + {/* $1560*/} + {/* */} + {/* */} + {/* */} + {/**/} + {/**/} + {/* */} + {/* */} + {/* Transaction History*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Order #002434} secondary="Today, 2:00 AM" />*/} + {/* */} + {/* */} + {/* */} + {/* + $1,430*/} + {/* */} + {/* */} + {/* 78%*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Order #984947} secondary="5 August, 1:45 PM" />*/} + {/* */} + {/* */} + {/* */} + {/* + $302*/} + {/* */} + {/* */} + {/* 8%*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Order #988784} secondary="7 hours ago" />*/} + {/* */} + {/* */} + {/* */} + {/* + $682*/} + {/* */} + {/* */} + {/* 16%*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Help & Support Chat*/} + {/* */} + {/* */} + {/* Typical replay within 5 min*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + + + + {/**/} + + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* }/>*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/}
diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/IncomeAreaChart.js b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/IncomeAreaChart.js new file mode 100644 index 0000000..86e71ac --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/IncomeAreaChart.js @@ -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 ; +}; + +IncomeAreaChart.propTypes = { + slot: PropTypes.string +}; + +export default IncomeAreaChart; \ No newline at end of file diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/schedule/MonthlyBarChart.js b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/MonthlyBarChart.js new file mode 100644 index 0000000..12e157e --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/pages/admin/schedule/MonthlyBarChart.js @@ -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 ( +
+ +
+ ); +}; + +export default MonthlyBarChart; \ No newline at end of file