비행 실적 페이지 경로 변경

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({
                                       )
                                     }
                                   >
-                                    <option value={'비행 실적'}>
+                                    <option value={'FLT_RESULT'}>
                                       비행 실적
                                     </option>
-                                    <option value={'비행 계획'}>
+                                    <option value={'FLT_PLAN'}>
                                       비행 계획
                                     </option>
-                                    <option value={'비행 승인'}>
+                                    <option value={'FLT_PLAN_APRVN'}>
                                       비행 승인
                                     </option>
                                   </CustomInput>
@@ -359,7 +399,9 @@ export default function FlightPerformanceContainer({
             <Col md='8' className='chart-wrap'>
               <Card>
                 <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
-                  <CardTitle tag='h4'>{searchType.category} 통계</CardTitle>
+                  <CardTitle tag='h4'>
+                    {handlerTitleName(searchType.category)} 통계
+                  </CardTitle>
                   <div className='select-date-wrap'>
                     <Row>
                       <div className='select-date'>
@@ -465,7 +507,9 @@ export default function FlightPerformanceContainer({
             <Col md='4' className='chart-wrap'>
               <Card>
                 <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
-                  <CardTitle tag='h4'>{searchType.category} TOP5</CardTitle>
+                  <CardTitle tag='h4'>
+                    {handlerTitleName(searchType.category)} TOP5
+                  </CardTitle>
                 </CardHeader>
                 <CardBody>
                   <div style={{ height: '275px' }}>

src/navigation/statistics/index.js

@@ -20,6 +20,6 @@ export default [
     id: 'statistics_001_03',
     type: 'item',
     title: '비행 실적',
-    navLink: '/statistics/performance'
+    navLink: '/statistics/result'
   }
 ];

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'))
   }
 ];
 

src/views/statistics/FlightPerformanceView.js

@@ -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 <FlightPerformanceContainer />;
-}

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 <FlightResultContainer />;
+}