diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js
new file mode 100644
index 0000000..4b5f338
--- /dev/null
+++ b/src/components/statistics/StatisticsSearch.js
@@ -0,0 +1,368 @@
+import {
+ Col,
+ Row,
+ Card,
+ CardHeader,
+ CardTitle,
+ CardBody,
+ CustomInput
+} from 'reactstrap';
+import { Search } from 'react-feather';
+import { Bar, Doughnut } from 'react-chartjs-2';
+
+export default function StatisticsSearch({
+ tooltipShadow,
+ gridLineColor,
+ labelColor,
+ searchData,
+ searchType,
+ dateLists,
+ categoryTypeOptions,
+ handlerBarTicks,
+ handlerTitleName,
+ handleChangeSearchType
+}) {
+ const options = {
+ elements: {
+ rectangle: {
+ borderWidth: 2,
+ borderSkipped: 'bottom'
+ }
+ },
+ responsive: true,
+ maintainAspectRatio: false,
+ responsiveAnimationDuration: 500,
+ legend: {
+ display: false
+ },
+ tooltips: {
+ // Updated default tooltip UI
+ shadowOffsetX: 1,
+ shadowOffsetY: 1,
+ shadowBlur: 8,
+ shadowColor: tooltipShadow,
+ backgroundColor: '#fff',
+ titleFontColor: '#000',
+ bodyFontColor: '#000'
+ },
+ scales: {
+ xAxes: [
+ {
+ display: true,
+ gridLines: {
+ display: true,
+ color: gridLineColor,
+ zeroLineColor: gridLineColor
+ },
+ scaleLabel: {
+ display: false
+ },
+ ticks: {
+ fontColor: labelColor
+ }
+ }
+ ],
+ yAxes: [
+ {
+ display: true,
+ gridLines: {
+ color: gridLineColor,
+ zeroLineColor: gridLineColor
+ },
+ ticks: {
+ ...handlerBarTicks(),
+ min: 0,
+ fontColor: labelColor
+ }
+ }
+ ]
+ }
+ },
+ data = {
+ labels: searchData.graphData.map(i => i.name),
+ datasets: [
+ {
+ data: searchData.graphData.map(i => i.value),
+ backgroundColor: '#00bcd4',
+ borderColor: '#00bcd4',
+ barThickness: 15
+ }
+ ]
+ };
+
+ const options2 = {
+ responsive: true,
+ maintainAspectRatio: true,
+ responsiveAnimationDuration: 500,
+ cutoutPercentage: 60,
+ legend: {
+ position: 'bottom',
+ labels: {
+ usePointStyle: true,
+ padding: 18,
+ boxWidth: 8,
+ fontColor: labelColor,
+ fontSize: 14,
+ fontWeight: 500,
+ fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR']
+ }
+ },
+ tooltips: {
+ callbacks: {
+ label(tooltipItem, data) {
+ const label = data.datasets[0].labels[tooltipItem.index] || '',
+ value = data.datasets[0].data[tooltipItem.index];
+ const output = ` ${label} : ${value} %`;
+ return output;
+ }
+ },
+ shadowOffsetX: 1,
+ shadowOffsetY: 1,
+ shadowBlur: 8,
+ shadowColor: tooltipShadow,
+ backgroundColor: '#fff',
+ titleFontColor: '#000',
+ bodyFontColor: '#000'
+ }
+ },
+ data2 = {
+ labels: searchData.topData.map(i => i.name),
+ datasets: [
+ {
+ labels: searchData.topData.map(i => i.name),
+ data: searchData.topData.map(i => i.value),
+ // 레드버전
+ // backgroundColor: [
+ // '#ffe8d1',
+ // '#ffb59e',
+ // '#f0826b',
+ // '#Bd4f38',
+ // '#8a1c05'
+ // ],
+
+ backgroundColor: [
+ '#ccffff',
+ '#99ffff',
+ '#66ffff',
+ '#33efff',
+ '#00bcd4'
+ ],
+ borderWidth: 0,
+ pointStyle: 'rectRounded'
+ }
+ ]
+ };
+
+ return (
+ <>
+
+
+
+
+
+
검색조건
+
+ {/*
+
+
+ 검색
+
+
*/}
+
+
+
+
+
+ -
+
+
검색조건
+
+
+
+
+
+ handleChangeSearchType(
+ 'category',
+ e.target.value
+ )
+ }
+ >
+ {Object.entries(categoryTypeOptions).map(
+ ([value, label]) => (
+
+ )
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {handlerTitleName(searchType.category)} 통계
+
+
+
+
+
+ handleChangeSearchType('dateType', e.target.value)
+ }
+ >
+
+
+
+
+
+
+
+ {searchType.dateType === 'month' ||
+ searchType.dateType === 'day' ||
+ searchType.dateType === 'one-day' ? (
+ <>
+
+
+ handleChangeSearchType('year', e.target.value)
+ }
+ >
+
+
+
+ {searchType.dateType === 'day' ||
+ searchType.dateType === 'one-day' ? (
+
+
+ handleChangeSearchType('month', e.target.value)
+ }
+ >
+ {dateLists.month.map(i => (
+
+ ))}
+
+
+ ) : null}
+ {searchType.dateType === 'one-day' ? (
+
+
+ handleChangeSearchType('day', e.target.value)
+ }
+ >
+ {dateLists.day.map(i => (
+
+ ))}
+
+
+ ) : null}
+ >
+ ) : null}
+
+ {/*
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {handlerTitleName(searchType.category)} TOP5
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ >
+ );
+}
diff --git a/src/components/statistics/StatisticsTotal.js b/src/components/statistics/StatisticsTotal.js
new file mode 100644
index 0000000..832736d
--- /dev/null
+++ b/src/components/statistics/StatisticsTotal.js
@@ -0,0 +1,69 @@
+import { Col, Row } from 'reactstrap';
+import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
+
+export default function StatisticsTotal({
+ titleName,
+ totalData,
+ totalTitle,
+ parseTime,
+ addCommasToNumber
+}) {
+ const renderIcon = idx => {
+ if (idx === 0) return ;
+ if (idx === 1) return ;
+ return ;
+ };
+
+ const renderData = (data, titleName, idx) => {
+ if (titleName === '비행 통계') {
+ if (idx === 0) return parseTime(data);
+ if (idx === 1) return <>{addCommasToNumber(data)}m>;
+ return <>{addCommasToNumber(data)}건>;
+ } else {
+ return <>{addCommasToNumber(data)}건>;
+ }
+ };
+
+ return (
+
+
+ {totalData.map((i, idx) => (
+
+
+
+
+
+ {renderIcon(idx)}
+ {totalTitle[idx]}
+ {i.name}
+ |
+
+
+ 년
+
+ {renderData(i.year, titleName, idx)}
+
+ |
+
+
+
+ 월
+
+ {renderData(i.month, titleName, idx)}
+
+ |
+
+ 일
+
+ {renderData(i.day, titleName, idx)}
+
+ |
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/containers/statistics/AbnormalSituationContainer.js b/src/containers/statistics/AbnormalSituationContainer.js
index c2d4f80..bbe3334 100644
--- a/src/containers/statistics/AbnormalSituationContainer.js
+++ b/src/containers/statistics/AbnormalSituationContainer.js
@@ -1,26 +1,11 @@
import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
-import {
- Button,
- Col,
- Row,
- Card,
- CardHeader,
- CardTitle,
- CardBody,
- CustomInput
-} from 'reactstrap';
-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, useSelector } from 'react-redux';
import * as StcsActions from '../../modules/statistics/actions';
+import StatisticsSearch from '../../components/statistics/StatisticsSearch';
+import StatisticsTotal from '../../components/statistics/StatisticsTotal';
-export default function AbnormalSituationContainer({
- tooltipShadow,
- gridLineColor,
- labelColor
-}) {
+export default function AbnormalSituationContainer() {
const dispatch = useDispatch();
const { abnormal, abnormalSearch } = useSelector(
state => state.statisticsState
@@ -39,6 +24,12 @@ export default function AbnormalSituationContainer({
});
const titleName = '비정상상황 통계';
+ const totalTitle = ['비행경로이탈', '비정상고도', '충돌위험'];
+ const categoryTypeOptions = {
+ PLAN: '비행경로이탈',
+ ALTITUDE: '비정상고도',
+ CRASH: '충돌위험'
+ };
useEffect(() => {
dispatch(StcsActions.ABNORMAL_STCS.request());
@@ -84,12 +75,7 @@ export default function AbnormalSituationContainer({
// 그래프 타이틀 handler
const handlerTitleName = category => {
- const categoryMappings = {
- PLAN: '비행경로이탈',
- ALTITUDE: '비정상고도',
- CRASH: '충돌위험'
- };
- return categoryMappings[category];
+ return categoryTypeOptions[category];
};
// Bar Graph handler
@@ -106,501 +92,29 @@ export default function AbnormalSituationContainer({
return 10 ** (exponent - 1);
};
+ // 123456789 -> 123,456,789
const addCommasToNumber = number => {
if (number === 'noData') return 0;
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
- const options = {
- elements: {
- rectangle: {
- borderWidth: 2,
- borderSkipped: 'bottom'
- }
- },
- responsive: true,
- maintainAspectRatio: false,
- responsiveAnimationDuration: 500,
- legend: {
- display: false
- },
- tooltips: {
- // Updated default tooltip UI
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- },
- scales: {
- xAxes: [
- {
- display: true,
- gridLines: {
- display: true,
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- scaleLabel: {
- display: false
- },
- ticks: {
- fontColor: labelColor
- }
- }
- ],
- yAxes: [
- {
- display: true,
- gridLines: {
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- ticks: {
- ...handlerBarTicks(),
- min: 0,
- fontColor: labelColor
- }
- }
- ]
- }
- },
- data = {
- labels: abnormalSearch.graphData.map(i => i.name),
- datasets: [
- {
- data: abnormalSearch.graphData.map(i => i.value),
- backgroundColor: '#00bcd4',
- borderColor: '#00bcd4',
- barThickness: 15
- }
- ]
- };
-
- const options2 = {
- responsive: true,
- maintainAspectRatio: true,
- responsiveAnimationDuration: 500,
- cutoutPercentage: 60,
- legend: {
- position: 'bottom',
- labels: {
- usePointStyle: true,
- padding: 18,
- boxWidth: 8,
- fontColor: labelColor,
- fontSize: 14,
- fontWeight: 500,
- fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR']
- }
- },
- tooltips: {
- callbacks: {
- label(tooltipItem, data) {
- const label = data.datasets[0].labels[tooltipItem.index] || '',
- value = data.datasets[0].data[tooltipItem.index];
- const output = ` ${label} : ${value}건`;
- return output;
- }
- },
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- }
- },
- data2 = {
- labels: abnormalSearch.topData.map(i => i.name),
- datasets: [
- {
- labels: abnormalSearch.topData.map(i => i.name),
- data: abnormalSearch.topData.map(i => i.value),
- //레드버전
- // backgroundColor: [
- // '#ffe8d1',
- // '#ffb59e',
- // '#f0826b',
- // '#Bd4f38',
- // '#8a1c05'
- // ],
-
- backgroundColor: [
- '#ccffff',
- '#99ffff',
- '#66ffff',
- '#33efff',
- '#00bcd4'
- ],
- borderWidth: 0,
- pointStyle: 'rectRounded'
- }
- ]
- };
-
return (
-
-
- {abnormal.map((i, idx) => (
-
-
-
-
-
- {idx === 0 ? (
- <>
-
-
-
- 비행경로이탈
- >
- ) : idx === 1 ? (
- <>
-
-
-
- 비정상고도
- >
- ) : (
- <>
-
-
-
- 충돌위험
- >
- )}
-
- {i.name}
- |
-
- 년
-
- {addCommasToNumber(i.year)}건
-
- |
-
-
-
- 월
-
- {addCommasToNumber(i.month)}건
-
- |
-
- 일
-
- {addCommasToNumber(i.day)}건
-
- |
-
-
-
-
- ))}
- {/*
-
-
-
-
-
-
-
- 비행경로이탈
- PA0001
- |
-
- 년
- 8일 10시간 35분 12초
- |
-
-
-
- 월
- 1일 35분 12초
- |
-
- 일
- 35분 12초
- |
-
-
-
-
-
-
-
-
-
-
-
-
- 비정상 고도
- PA0002
- |
-
- 년
- 10,845m
- |
-
-
-
- 월
- 1,201m
- |
-
- 일
- 53m
- |
-
-
-
-
-
-
-
-
-
-
-
-
- 충돌위험
- PA0002
- |
-
- 년
- 1,024,845건
- |
-
-
-
- 월
- 111,201건
- |
-
- 일
- 153건
- |
-
-
-
- */}
-
-
-
-
-
-
-
-
검색조건
-
- {/*
-
-
- 검색
-
-
*/}
-
-
-
-
-
- -
-
-
검색조건
-
-
-
-
-
- handleChangeSearchType(
- 'category',
- e.target.value
- )
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {handlerTitleName(searchType.category)} 통계
-
-
-
-
-
- handleChangeSearchType('dateType', e.target.value)
- }
- >
-
-
-
-
-
-
-
- {searchType.dateType === 'month' ||
- searchType.dateType === 'day' ||
- searchType.dateType === 'one-day' ? (
- <>
-
-
- handleChangeSearchType('year', e.target.value)
- }
- >
-
-
-
- {searchType.dateType === 'day' ||
- searchType.dateType === 'one-day' ? (
-
-
- handleChangeSearchType(
- 'month',
- e.target.value
- )
- }
- >
- {dateLists.month.map(i => (
-
- ))}
-
-
- ) : null}
- {searchType.dateType === 'one-day' ? (
-
-
- handleChangeSearchType('day', e.target.value)
- }
- >
- {dateLists.day.map(i => (
-
- ))}
-
-
- ) : null}
- >
- ) : null}
-
- {/*
-
*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {handlerTitleName(searchType.category)} TOP5
-
-
-
-
-
-
- {/* */}
-
-
-
-
-
+
+
);
diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js
index 33de57b..744db43 100644
--- a/src/containers/statistics/FlightContainer.js
+++ b/src/containers/statistics/FlightContainer.js
@@ -1,26 +1,11 @@
import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
-import {
- Button,
- Col,
- Row,
- Card,
- CardHeader,
- CardTitle,
- CardBody,
- CustomInput
-} from 'reactstrap';
-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, useSelector } from 'react-redux';
import * as StcsActions from '../../modules/statistics/actions';
+import StatisticsTotal from '../../components/statistics/StatisticsTotal';
+import StatisticsSearch from '../../components/statistics/StatisticsSearch';
-export default function FlightContainer({
- tooltipShadow,
- gridLineColor,
- labelColor
-}) {
+export default function FlightContainer() {
const dispatch = useDispatch();
const { flight, flightSearch } = useSelector(state => state.statisticsState);
@@ -37,6 +22,12 @@ export default function FlightContainer({
});
const titleName = '비행 통계';
+ const totalTitle = ['총 비행시간', '총 비행거리', '총 비행횟수'];
+ const categoryTypeOptions = {
+ TIME: '비행 시간',
+ DISTANCE: '비행 거리',
+ FLT_COUNT: '비행 횟수'
+ };
useEffect(() => {
dispatch(StcsActions.FLIGHT_STCS.request());
@@ -83,17 +74,12 @@ export default function FlightContainer({
// 그래프 타이틀 handler
const handlerTitleName = category => {
- const categoryMappings = {
- TIME: '비행 시간',
- DISTANCE: '비행 거리',
- FLT_COUNT: '비행 횟수'
- };
- return categoryMappings[category];
+ return categoryTypeOptions[category];
};
// Bar Graph handler
const handlerBarTicks = () => {
- const data = flightSearch.topData.map(i => i.value);
+ const data = flightSearch.graphData.map(i => i.value);
const max = Math.ceil(Math.max(...data) / 10) * 10;
const stepSize = handlerStepSize(max);
@@ -105,15 +91,16 @@ export default function FlightContainer({
return 10 ** (exponent - 1);
};
+ // 123456789 -> 123,456,789
const addCommasToNumber = number => {
if (number === 'noData') return 0;
+
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
+ // '24:35:12' -> 1일 35분 12초
const parseTime = time => {
- if (time === 'noData') {
- return '0초';
- }
+ if (time === 'noData') return '0초';
const [hour, minute, second] = time.split(':').map(Number);
@@ -129,423 +116,25 @@ export default function FlightContainer({
return parts.join(' ');
};
- const options = {
- elements: {
- rectangle: {
- borderWidth: 2,
- borderSkipped: 'bottom'
- }
- },
- responsive: true,
- maintainAspectRatio: false,
- responsiveAnimationDuration: 500,
- legend: {
- display: false
- },
- tooltips: {
- // Updated default tooltip UI
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- },
- scales: {
- xAxes: [
- {
- display: true,
- gridLines: {
- display: true,
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- scaleLabel: {
- display: false
- },
- ticks: {
- fontColor: labelColor
- }
- }
- ],
- yAxes: [
- {
- display: true,
- gridLines: {
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- ticks: {
- ...handlerBarTicks(),
- min: 0,
- fontColor: labelColor
- }
- }
- ]
- }
- },
- data = {
- labels: flightSearch.graphData.map(i => i.name),
- datasets: [
- {
- data: flightSearch.graphData.map(i => i.value),
- backgroundColor: '#00bcd4',
- borderColor: '#00bcd4',
- barThickness: 15
- }
- ]
- };
-
- const options2 = {
- responsive: true,
- maintainAspectRatio: true,
- responsiveAnimationDuration: 500,
- cutoutPercentage: 60,
- legend: {
- position: 'bottom',
- labels: {
- usePointStyle: true,
- padding: 18,
- boxWidth: 8,
- fontColor: labelColor,
- fontSize: 14,
- fontWeight: 500,
- fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR']
- }
- },
- tooltips: {
- callbacks: {
- label(tooltipItem, data) {
- const label = data.datasets[0].labels[tooltipItem.index] || '',
- value = data.datasets[0].data[tooltipItem.index];
- const output = ` ${label} : ${value} %`;
- return output;
- }
- },
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- }
- },
- data2 = {
- labels: flightSearch.topData.map(i => i.name),
- datasets: [
- {
- labels: flightSearch.topData.map(i => i.name),
- data: flightSearch.topData.map(i => i.value),
- // 레드버전
- // backgroundColor: [
- // '#ffe8d1',
- // '#ffb59e',
- // '#f0826b',
- // '#Bd4f38',
- // '#8a1c05'
- // ],
-
- backgroundColor: [
- '#ccffff',
- '#99ffff',
- '#66ffff',
- '#33efff',
- '#00bcd4'
- ],
- borderWidth: 0,
- pointStyle: 'rectRounded'
- }
- ]
- };
-
return (
-
-
- {flight.map((i, idx) => (
-
-
-
-
-
-
- {idx === 0 ? (
-
- ) : idx === 1 ? (
-
- ) : (
-
- )}
-
-
- {idx === 0
- ? '총 비행시간'
- : idx === 1
- ? '총 비행거리'
- : '총 비행횟수'}
-
- {i.name}
- |
-
-
- 년
-
- {idx === 0 ? (
- <>{parseTime(i.year)}>
- ) : idx === 1 ? (
- <>{addCommasToNumber(i.year)}m>
- ) : (
- <>{addCommasToNumber(i.year)}건>
- )}
-
- |
-
-
-
- 월
-
- {idx === 0 ? (
- <>{parseTime(i.month)}>
- ) : idx === 1 ? (
- <>{addCommasToNumber(i.month)}m>
- ) : (
- <>{addCommasToNumber(i.month)}건>
- )}
-
- |
-
- 일
-
- {idx === 0 ? (
- <>{parseTime(i.day)}>
- ) : idx === 1 ? (
- <>{addCommasToNumber(i.day)}m>
- ) : (
- <>{addCommasToNumber(i.day)}건>
- )}
-
- |
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
검색조건
-
- {/*
-
-
- 검색
-
-
*/}
-
-
-
-
-
- -
-
-
검색조건
-
-
-
-
-
- handleChangeSearchType(
- 'category',
- e.target.value
- )
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {handlerTitleName(searchType.category)} 통계
-
-
-
-
-
- handleChangeSearchType('dateType', e.target.value)
- }
- >
-
-
-
-
-
-
-
- {searchType.dateType === 'month' ||
- searchType.dateType === 'day' ||
- searchType.dateType === 'one-day' ? (
- <>
-
-
- handleChangeSearchType('year', e.target.value)
- }
- >
-
-
-
- {searchType.dateType === 'day' ||
- searchType.dateType === 'one-day' ? (
-
-
- handleChangeSearchType(
- 'month',
- e.target.value
- )
- }
- >
- {dateLists.month.map(i => (
-
- ))}
-
-
- ) : null}
- {searchType.dateType === 'one-day' ? (
-
-
- handleChangeSearchType('day', e.target.value)
- }
- >
- {dateLists.day.map(i => (
-
- ))}
-
-
- ) : null}
- >
- ) : null}
-
- {/*
-
*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {handlerTitleName(searchType.category)} TOP5
-
-
-
-
-
-
- {/* */}
-
-
-
-
-
+
+
);
diff --git a/src/containers/statistics/FlightResultContainer.js b/src/containers/statistics/FlightResultContainer.js
index 990332e..3236b90 100644
--- a/src/containers/statistics/FlightResultContainer.js
+++ b/src/containers/statistics/FlightResultContainer.js
@@ -1,26 +1,11 @@
import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
-import {
- Button,
- Col,
- Row,
- Card,
- CardHeader,
- CardTitle,
- CardBody,
- CustomInput
-} from 'reactstrap';
-import { Search } from 'react-feather';
-import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
-import { Bar, Doughnut } from 'react-chartjs-2';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as StcsActions from '../../modules/statistics/actions';
+import StatisticsTotal from '../../components/statistics/StatisticsTotal';
+import StatisticsSearch from '../../components/statistics/StatisticsSearch';
-export default function ResultContainer({
- tooltipShadow,
- gridLineColor,
- labelColor
-}) {
+export default function ResultContainer() {
const dispatch = useDispatch();
const { result, resultSearch } = useSelector(state => state.statisticsState);
@@ -37,6 +22,12 @@ export default function ResultContainer({
});
const titleName = '비행 실적 통계';
+ const totalTitle = ['비행 실적', '비행 계획', '비행 승인'];
+ const categoryTypeOptions = {
+ FLT_RESULT: '비행 실적',
+ FLT_PLAN: '비행 계획',
+ FLT_PLAN_APRVN: '비행 승인'
+ };
useEffect(() => {
dispatch(StcsActions.RESULT_STCS.request());
@@ -83,12 +74,7 @@ export default function ResultContainer({
// 그래프 타이틀 handler
const handlerTitleName = category => {
- const categoryMappings = {
- FLT_RESULT: '비행 실적',
- FLT_PLAN: '비행 계획',
- FLT_PLAN_APRVN: '비행 승인'
- };
- return categoryMappings[category];
+ return categoryTypeOptions[category];
};
// Bar Graph handler
@@ -105,418 +91,29 @@ export default function ResultContainer({
return 10 ** (exponent - 1);
};
+ // 123456789 -> 123,456,789
const addCommasToNumber = number => {
if (number === 'NoData') return 0;
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
- const options = {
- elements: {
- rectangle: {
- borderWidth: 2,
- borderSkipped: 'bottom'
- }
- },
- responsive: true,
- maintainAspectRatio: false,
- responsiveAnimationDuration: 500,
- legend: {
- display: false
- },
- tooltips: {
- // Updated default tooltip UI
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- },
- scales: {
- xAxes: [
- {
- display: true,
- gridLines: {
- display: true,
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- scaleLabel: {
- display: false
- },
- ticks: {
- fontColor: labelColor
- }
- }
- ],
- yAxes: [
- {
- display: true,
- gridLines: {
- color: gridLineColor,
- zeroLineColor: gridLineColor
- },
- ticks: {
- ...handlerBarTicks(),
- min: 0,
- fontColor: labelColor
- }
- }
- ]
- }
- },
- data = {
- labels: resultSearch.graphData.map(i => i.name),
- datasets: [
- {
- data: resultSearch.graphData.map(i => i.value),
- backgroundColor: '#00bcd4',
- borderColor: '#00bcd4',
- barThickness: 15
- }
- ]
- };
-
- const options2 = {
- responsive: true,
- maintainAspectRatio: true,
- responsiveAnimationDuration: 500,
- cutoutPercentage: 60,
- legend: {
- position: 'bottom',
- labels: {
- usePointStyle: true,
- padding: 18,
- boxWidth: 8,
- fontColor: labelColor,
- fontSize: 14,
- fontWeight: 500,
- fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR']
- }
- },
- tooltips: {
- callbacks: {
- label(tooltipItem, data) {
- const label = data.datasets[0].labels[tooltipItem.index] || '',
- value = data.datasets[0].data[tooltipItem.index];
- const output = ` ${label} : ${value}건`;
- return output;
- }
- },
- shadowOffsetX: 1,
- shadowOffsetY: 1,
- shadowBlur: 8,
- shadowColor: tooltipShadow,
- backgroundColor: '#fff',
- titleFontColor: '#000',
- bodyFontColor: '#000'
- }
- },
- data2 = {
- labels: resultSearch.topData.map(i => i.name),
- datasets: [
- {
- labels: resultSearch.topData.map(i => i.name),
- data: resultSearch.topData.map(i => i.value),
- // 레드버전
- // backgroundColor: [
- // '#ffe8d1',
- // '#ffb59e',
- // '#f0826b',
- // '#Bd4f38',
- // '#8a1c05'
- // ],
-
- backgroundColor: [
- '#ccffff',
- '#99ffff',
- '#66ffff',
- '#33efff',
- '#00bcd4'
- ],
- borderWidth: 0,
- pointStyle: 'rectRounded'
- }
- ]
- };
-
return (
-
-
- {result.map((i, idx) => (
-
-
-
-
-
- {idx === 0 ? (
- <>
-
-
-
- 비행 실적
- >
- ) : idx === 1 ? (
- <>
-
-
-
- 비행 계획
- >
- ) : (
- <>
-
-
-
- 비행 승인
- >
- )}
-
- {i.name}
- |
-
- 년
-
- {addCommasToNumber(i.year)}건
-
- |
-
-
-
- 월
-
- {addCommasToNumber(i.month)}건
-
- |
-
- 일
-
- {addCommasToNumber(i.day)}건
-
- |
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
검색조건
-
- {/*
-
-
- 검색
-
-
*/}
-
-
-
-
-
- -
-
-
검색조건
-
-
-
-
-
- handleChangeSearchType(
- 'category',
- e.target.value
- )
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {handlerTitleName(searchType.category)} 통계
-
-
-
-
-
- handleChangeSearchType('dateType', e.target.value)
- }
- >
-
-
-
-
-
-
-
- {searchType.dateType === 'month' ||
- searchType.dateType === 'day' ||
- searchType.dateType === 'one-day' ? (
- <>
-
-
- handleChangeSearchType('year', e.target.value)
- }
- >
-
-
-
- {searchType.dateType === 'day' ||
- searchType.dateType === 'one-day' ? (
-
-
- handleChangeSearchType(
- 'month',
- e.target.value
- )
- }
- >
- {dateLists.month.map(i => (
-
- ))}
-
-
- ) : null}
- {searchType.dateType === 'one-day' ? (
-
-
- handleChangeSearchType('day', e.target.value)
- }
- >
- {dateLists.day.map(i => (
-
- ))}
-
-
- ) : null}
- >
- ) : null}
-
- {/*
-
*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {handlerTitleName(searchType.category)} TOP5
-
-
-
-
-
-
- {/* */}
-
-
-
-
-
+
+
);