From 232034f37e389ed4c5f0481c6d8dbb2525cba574 Mon Sep 17 00:00:00 2001 From: hhjk00 Date: Mon, 13 Nov 2023 16:31:50 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8B=A4=EC=A0=81=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...eContainer.js => FlightResultContainer.js} | 102 +++++++++++++----- src/navigation/statistics/index.js | 2 +- src/router/routes/RouteStatistics.js | 6 +- src/views/statistics/FlightPerformanceView.js | 8 -- src/views/statistics/FlightResultView.js | 8 ++ 5 files changed, 84 insertions(+), 42 deletions(-) rename src/containers/statistics/{FlightPerformanceContainer.js => FlightResultContainer.js} (87%) delete mode 100644 src/views/statistics/FlightPerformanceView.js create mode 100644 src/views/statistics/FlightResultView.js diff --git a/src/containers/statistics/FlightPerformanceContainer.js b/src/containers/statistics/FlightResultContainer.js similarity index 87% rename from src/containers/statistics/FlightPerformanceContainer.js rename to src/containers/statistics/FlightResultContainer.js index d05add29..fe66ab7c 100644 --- a/src/containers/statistics/FlightPerformanceContainer.js +++ b/src/containers/statistics/FlightResultContainer.js @@ -12,19 +12,20 @@ import { import { Search } from 'react-feather'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; import { Bar, Doughnut } from 'react-chartjs-2'; -import { useCallback, useEffect, useState } from 'react'; -import { useDispatch } from 'react-redux'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import * as StcsActions from '../../modules/statistics/actions'; -export default function FlightPerformanceContainer({ +export default function ResultContainer({ tooltipShadow, gridLineColor, labelColor }) { const dispatch = useDispatch(); + const { result, resultSearch } = useSelector(state => state.statisticsState); const [searchType, setSearchType] = useState({ - category: '비행실적', + category: 'FLT_RESULT', dateType: 'year', year: new Date().getFullYear(), month: new Date().getMonth() + 1, @@ -37,6 +38,11 @@ export default function FlightPerformanceContainer({ const titleName = '비행 실적 통계'; + useEffect(() => { + dispatch(StcsActions.RESULT_STCS.request()); + }, []); + + // 해당 월에 맞는 요일 표출 useEffect(() => { const { year, month } = searchType; const lastDay = new Date(year, Number(month), 0).getDate(); @@ -45,6 +51,25 @@ export default function FlightPerformanceContainer({ setDateLists({ ...dateLists, day: dayList }); }, [searchType.month]); + useEffect(() => { + const { category, dateType, year, month, day } = searchType; + + const dateMapping = { + month: year, + day: `${year}-${month}`, + 'one-day': `${year}-${month}-${day}` + }; + const date = dateMapping[dateType] || ''; + + dispatch( + StcsActions.RESULT_STCS_SEARCH.request({ + cate: category, + date, + type: dateType + }) + ); + }, [searchType]); + // 검색조건 handler const handleChangeSearchType = useCallback( (type, val) => { @@ -56,6 +81,35 @@ export default function FlightPerformanceContainer({ [searchType] ); + // 그래프 타이틀 handler + const handlerTitleName = category => { + const categoryMappings = { + TIME: '비행 실적', + DISTANCE: '비행 계획', + FLT_COUNT: '비행 승인' + }; + return categoryMappings[category]; + }; + + const handlerBarTicks = () => { + const data = resultSearch.topData.map(i => i.value); + const max = Math.max(...data); + const min = Math.min(...data); + const stepSize = handlerStepSize(max); + + return { max, min, stepSize }; + }; + + const handlerStepSize = max => { + if (max <= 1000) { + return 100; + } else if (max <= 5000) { + return 500; + } else { + return 1000; + } + }; + const options = { elements: { rectangle: { @@ -104,9 +158,7 @@ export default function FlightPerformanceContainer({ zeroLineColor: gridLineColor }, ticks: { - stepSize: 100, - min: 0, - max: 400, + ...handlerBarTicks(), fontColor: labelColor } } @@ -114,22 +166,10 @@ export default function FlightPerformanceContainer({ } }, data = { - labels: [ - '7/12', - '8/12', - '9/12', - '10/12', - '11/12', - '12/12', - '13/12', - '14/12', - '15/12', - '16/12', - '17/12' - ], + labels: resultSearch?.topData.map(i => i.name), datasets: [ { - data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190], + data: resultSearch?.topData.map(i => i.value), backgroundColor: '#00bcd4', borderColor: '#00bcd4', barThickness: 15 @@ -173,11 +213,11 @@ export default function FlightPerformanceContainer({ } }, data2 = { - labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], + labels: resultSearch?.graphData.map(i => i.name), datasets: [ { - labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], - data: [10, 20, 30, 40, 80], + labels: resultSearch?.graphData.map(i => i.name), + data: resultSearch?.graphData.map(i => i.value), // 레드버전 // backgroundColor: [ // '#ffe8d1', @@ -331,13 +371,13 @@ export default function FlightPerformanceContainer({ ) } > - - - @@ -359,7 +399,9 @@ export default function FlightPerformanceContainer({ - {searchType.category} 통계 + + {handlerTitleName(searchType.category)} 통계 +
@@ -465,7 +507,9 @@ export default function FlightPerformanceContainer({ - {searchType.category} TOP5 + + {handlerTitleName(searchType.category)} TOP5 +
diff --git a/src/navigation/statistics/index.js b/src/navigation/statistics/index.js index a42eb804..bcfcce73 100644 --- a/src/navigation/statistics/index.js +++ b/src/navigation/statistics/index.js @@ -20,6 +20,6 @@ export default [ id: 'statistics_001_03', type: 'item', title: '비행 실적', - navLink: '/statistics/performance' + navLink: '/statistics/result' } ]; diff --git a/src/router/routes/RouteStatistics.js b/src/router/routes/RouteStatistics.js index d0a4deba..f3a4fcb7 100644 --- a/src/router/routes/RouteStatistics.js +++ b/src/router/routes/RouteStatistics.js @@ -12,10 +12,8 @@ const RouteStatistics = [ ) }, { - path: '/statistics/performance', - component: lazy(() => - import('../../views/statistics/FlightPerformanceView') - ) + path: '/statistics/result', + component: lazy(() => import('../../views/statistics/FlightResultView')) } ]; diff --git a/src/views/statistics/FlightPerformanceView.js b/src/views/statistics/FlightPerformanceView.js deleted file mode 100644 index 3d128539..00000000 --- a/src/views/statistics/FlightPerformanceView.js +++ /dev/null @@ -1,8 +0,0 @@ -import '../../assets/css/custom.css'; -import '@styles/react/libs/flatpickr/flatpickr.scss'; -import '@styles/react/libs/tables/react-dataTable-component.scss'; -import FlightPerformanceContainer from '../../containers/statistics/FlightPerformanceContainer'; - -export default function FlightPerformanceView() { - return ; -} diff --git a/src/views/statistics/FlightResultView.js b/src/views/statistics/FlightResultView.js new file mode 100644 index 00000000..4e589a53 --- /dev/null +++ b/src/views/statistics/FlightResultView.js @@ -0,0 +1,8 @@ +import '../../assets/css/custom.css'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; +import '@styles/react/libs/tables/react-dataTable-component.scss'; +import FlightResultContainer from '../../containers/statistics/FlightResultContainer'; + +export default function FlightResultView() { + return ; +}