diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js index 460905e..3194f2c 100644 --- a/src/containers/statistics/FlightContainer.js +++ b/src/containers/statistics/FlightContainer.js @@ -14,15 +14,32 @@ import { } from 'reactstrap'; import { Search } from 'react-feather'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; -import { Bar, Doughnut, Polar } from 'react-chartjs-2'; +import { Bar, Doughnut } from 'react-chartjs-2'; +import { useState } from 'react'; export default function FlightContainer({ tooltipShadow, gridLineColor, labelColor }) { + const [searchType, setSearchType] = useState({ + type: 'year', + year: new Date().getFullYear(), + month: new Date().getMonth() + 1, + day: new Date().getDate() + }); + + console.log(searchType); + const titleName = '비행 통계'; + const handleChangeSearchType = (type, val) => { + setSearchType({ + ...searchType, + [type]: type === 'type' ? val : Number(val) + }); + }; + const options = { elements: { rectangle: { @@ -317,47 +334,84 @@ export default function FlightContainer({ 비행 시간 통계
-
- - - - - - -
-
- - - - - -
-
- - - - - -
+ handleChangeSearchType('type', e.target.value) + } > - - - + + + +
+ + {searchType.type === 'month' || + searchType.type === 'day' || + searchType.type === 'time' ? ( + <> +
+ + handleChangeSearchType('year', e.target.value) + } + > + + +
+ {searchType.type === 'day' || + searchType.type === 'time' ? ( +
+ + handleChangeSearchType( + 'month', + e.target.value + ) + } + > + + + + +
+ ) : null} + {searchType.type === 'time' ? ( +
+ + handleChangeSearchType('day', e.target.value) + } + > + + + + +
+ ) : null} + + ) : null}
{/*